jeremyquinton
Repos
34
Followers
31
Following
17

Events

issue comment
Question about the CSS loading strategy

I'm very perplexed by the dawn them. A basic page has over 100 requests for css/javascript and image files etc. It's not very performant on slower mobile connections and ranks fairly poorly in google pagespeed insights.

Is there any solution at all to reducing the amount of http requests that are needed. As an example main-product.liquid below has 8 css files.

{{ 'component-accordion.css' | asset_url | stylesheet_tag }}
{{ 'component-price.css' | asset_url | stylesheet_tag }}
{{ 'component-rte.css' | asset_url | stylesheet_tag }}
{{ 'component-slider.css' | asset_url | stylesheet_tag }}
{{ 'component-rating.css' | asset_url | stylesheet_tag }}
{{ 'component-loading-overlay.css' | asset_url | stylesheet_tag }}
{{ 'component-deferred-media.css' | asset_url | stylesheet_tag }}```

One thing that I could do here is remove all css files and make the css inline or potentially combine all 8 files into one taking 8 http requests to 1. This would cause problems if css is needed to be edited but in most instances I'm not touching any of the css for development anyways. 

Can anyone suggest a them that is super performant aka doesn't have so many requests per page. 





                              
Created at 1 month ago