Just before anything, when combining CSS files especially on WordPress themes and child themes. Make sure that you combine them in proper order. Some WordPress templates separate the base CSS file of the theme and the CSS file where your custom styles are placed. Make sure that you put the base CSS at the top of the custom CSS so that your custom CSS will be applied.
Another thing, be sure that only the combined CSS file is loaded and the other CSS files are no longer loaded or else everything will be a waste. Most of the CSS files are embedded on the header.php of a theme. Or sometimes it’s enqueued through your theme’s functions.php.
Also, unless you really know what you’re doing. I suggest that you only combine CSS files of your theme. Leave the CSS files of plugins as it is because they will change whenever you update your plugins. While this is also true on themes, templates are not often updated unlike plugins.
Now without any further delay. Here’s the result.
After combining the CSS files, you can see that we actually achieved the two goals above.
- We lessen the number of requests from 80 to 68.
- We reduce the total file size from 878kb to 804kb
And thus, we successfully reduce the page load time
- DOM-loaded ” time from 8 – 10 seconds to 5 – 7 seconds.
So just by combining all the CSS files we reduce the website’s max loading time by 3 seconds!