Splitting CSS for Better page load performance

is there a good method for minimizing or splitting large sized css files ? I am currently using gzip and works fine but i need better alternatives. Any ideas? I am getting max 4-6 sec on page loads and its stops there…

If you have more than one CSS file, combine all files into a single CSS file. Same for JavaScript files which should be just above the closing body statement.

Another technique is CSS lazy-loading which involves having a minimum amount of CSS in your page header which is just enough to display “above the fold” items. Then immediately after the body statement call an inline JavaScript routine to load the combined CSS file.

The “lazy-load” technique can also be applied to images and videos.

Edit
Spelling and replaced editor’s over enthusiastic suggestions :frowning:

1 Like

Have you tried minifying your css file?

What makes you think the CSS is what’s causing the load times you’re describing? Is that what dev tools are indicating? Can you post a screenshot of the network tab of whichever browser you’re working with?

First Thanks. I tweaked almost everything but I haven’t tried CSS lazy-loading.

  1. The style.css file is pretty large in size , 155KB after minifying !
  2. I am also using GZIP including all popular tweaks in htaccess file.
  3. I also compressed my images.
  4. Page load is improved after I tweaked, but not improving.

Hi.
Yes, I used it, and it does help but maybe i reached my limit in the tweaking options after trying all options. The CSS file size is still pretty high, 155KB after minifying !

The question if its better to switch to VPS of there are still other tweaks I can implement for a faster page loading.

Thanks

  1. For the page load speed tools : I am using GTmetrix and Google PageSpeed Insights.
  2. CSS is pretty big I think : 155Kb .

Thanks

Does it need to be so big? You could try a tool like “Dust Me Selectors” to find any redundant css that could be removed.

Splitting actual files would be the wrong tactic. There would still be the same amount of css, but more http requests.

You could try a tool like Pingdom to test site speed and identify where on the page the lag is occurring.

Splitting CSS also better for keep your style properties neat.:grinning:

But at the cost of extra HTTP requests.

2 Likes

As @sama74 suggests, that could make it worse with the additional HTTP requests.

A review of the CSS to find redundant selectors would help. Re-organising the CSS along the lines suggested by Harry Roberts (CSS Wizardry) in this ITCSS presentation, may well help get the volume down. That said, you’re likely to lose much more page weight by optimising any images you may be using.

The Web Developer Toolbar has a useful “View Document Size” option. This lets you see both the size and the number of your page assets, so you can also check how many HTTP requests you are making. Reducing the number of these may be more effective than trying to minify your CSS.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.