Minimise render blocking request in Horizon theme to improve page speed

[MV_shopifyowner]

Hi,

I am trying to optimise the mobile experience and improve page speed. Page speed insights has identified render blocking requests related to styles.css in Horizon theme, but I am unable to find this in the theme code. Can anyone advise how do I go about this? Below information.

[Website_Speedy]

Hi, @MV_shopifyowner
The file reported in PageSpeed is usually generated from the theme’s existing CSS assets, so it may not appear as a separate file in the theme editor.

1. Check the actual CSS files in your theme
   Go to Online Store - Themes - Edit Code - Assets and check the main CSS files used by the theme.
2. Reduce unused CSS
   Remove unused styles or old app CSS. Apps often leave styles behind even after uninstalling.
3. Load non-critical CSS later
   For styles that are not needed immediately , you can move them into a separate CSS file and load it after the page renders.

In most cases, cleaning unused CSS and separating non-critical styles reduces render-blocking requests and improves mobile speed scores.

If you prefer not to handle image compression manually, apps like
MP ‑ Image Optimizer Pro
Disclaimer : I’m affiliated with this app and it is completely optional to use.
Hope this helps !

[tim_tairli]

This file is auto-generated from {% stylesheet %} tags in your liquid files, see more at JavaScript and stylesheet tags :

The content from {% stylesheet %} tags across all sections, blocks and snippets is concatenated into a single styles.css file by Shopify, and then injected into the theme through the content_for_header global Liquid object.

Horizon has a lot of those, would be a time-consuming task to check them all.