How to combine CSS scripts

Another important point when trying to reach top scores on PageSpeed and have a fast loading speed is combining your CSS scripts.

The more external CSS scripts you have the longer it takes for the webpage to get them, thus you have to combine all the CSS scripts you can into one large CSS script. Loading multiple CSS scripts separately unnecessarily increases the number of requests sent by the browser to your server. We would even go as far as to say that having even a single external CSS script is already a problem when it comes to the loading speed of your site. Using external files blocks the rendering of your website when it contains CSS rules for the load of more complex websites. Make sure to always keep this in mind, especially when you have CSS scripts that are very short – COMBINE THEM!

How to Compress new CSS scripts

Hopefully you have listened to our advice and already combined all of your CSS scripts into one large script. Now it`s time to optimize further and compress it to reduce the size of the file that your visitors will have to load to see the website. For each extra KB your visitors will pay a fraction of a second. Now imagine what happens when all of those accumulate into MBs. Luckily you can use CSS compressors for an automatic compression of your CSS files.

So we are finally getting to optimizing your above-the-fold CSS. In theory it is very simple – you prioritise which CSS you need to load first and which CSS scripts you can leave out to a later load. In practice however I would suggest you follow these steps:

1) Analyse your combined CSS script and check on whether is large or small. A small script can be cut from the file and pasted directly into the HTML header tag.

2) When the combined CSS script is large, extract the critical CSS from the main script which leads to rules creating for how and what CSS script loads first to show the main screen of the website. We would suggest you use Node.js (Google it) which can do the work for you if you have the SSH access credentials to your hosting server. Otherwise use one of the available “Critical CSS generators” or do it manually.

3) Now that you have the critical CSS script that is required for rendering you have to paste it into the HTML tag in the <header> of the webpage and paste the remaining script at the bottom of the HTML file.

You should be all set now. Move on to the next blog.