Thanks to CSS, our webpages no longer need to look like they did in the 1990s. It’s an incredibly powerful tool that allows us immense customization, and even the ability to create complex drawings. However, if utilized carelessly, CSS can greatly affect our page speed.
When a user requests a website, the browser must process all the information available to determine the layout and style. The problem is that until this is completed, the user sees a blank white screen. If the browser can make 1 round trip to get your style information, the user will only see that white screen for a fraction of a second. If your website is built more like this…
Your visitors are likely going to be staring at the white screen for a while. At least until they get frustrated and leave!
Each of those stylesheets (and scripts) is a request. This is a roundtrip that the browser has to make before it renders the website. Obviously the number of roundtrips needed will have a large impact on how quickly your site loads.
That’s good to know, but I know you’re looking for a css speed test, or techniques for optimizing your css for speed. Read on!
Perform an Audit of Your Site
First things first, we need to test our website. Most any performance audit service will give you some indication of the CSS problems you have. PageSpeed Insights and WebPageTest are two of the more popular options. We highly recommend continuous monitoring of your site, however, which you can do with our service – MachMetrics.
Did your test reveal some issues? If you saw an excessive number of stylesheets or the dreaded ‘Render Blocking Resources’, follow the steps below to optimize your site.
Combine Your CSS Files
As we saw in our example site above, the browser has to work through 21 requests just to collect all the styling information needed to properly display our website. If these aren’t being downloaded asynchronously (see below), that’s a problem.
If you’re building your website from scratch, this process is easy. Simply take the code from your various CSS files and paste them into 1 file. Done! Just make sure you’re not using @import to pull the files in. This method doesn’t support simultaneous download, meaning it still needs to do one import at a time.
If you’re using WordPress or any other content management system, many caching plugins will also combine your CSS files with the click of a button. Just remember that each additional plugin you use can introduce more files that need to be downloaded, so keep those to a minimum.
A note on HTTP/2 and combining CSS files
While combining your CSS (and JS) files is beneficial under HTTP/1, there is some debate as to whether it should be done with HTTP/2. This new protocol can handle parallelized downloads, meaning it may actually be harmful to force it to download 1 large file, rather than many smaller files simultaneously.
Most performance audit services don’t check for HTTP/2 and will throw a warning, suggesting you merge all files. This is another reason why page speed scores can be misleading. Make sure you test for yourself and see which configuration actually makes your site faster. You can check for HTTP/2 support here.
Try your CSS on a CDN
CSS files are just another piece of static content that may be best served on a CDN. Not only are CDN’s streamlined for files like this, it can also reduce the load on your server. And if your audience has a large geographic distribution, you’re going to be serving it from a location closer to them. Learn more about the other benefits of a CDN for speed.
Reduce Your CSS
Whether you decided to go with one CSS or several smaller ones, removing unnecessary CSS is always a good idea. Lots of CSS frameworks (like Bootstrap) include a ton of features (which makes them heavy!), but if you’re only using a little bit there’s no use supplying all the extra. Sometimes the framework will come with a custom downloader where you can select the features you’re using and it will provide you with a file of just your essentials.
Another reduction would be to remove the white space and various comments via minification. While whitespace makes it easier for humans to read, the browser doesn’t need it. This minification makes our CSS files as small as possible, which reduces the overall size of our website.
There are many online tools that will take care of this for you. A quick Google search will reveal many options, but we recommend CSSminifier.com. Again, if you’re using WordPress, plugins like WPRocket and Autoptomize will handle this for you.
Prioritize Above-the-fold CSS for Ultimate Speed
To really go above and beyond, we want to load our CSS for all of the styling that will be necessary immediately (think navigation menu, call to action, hero image, etc.). This allows us to defer CSS files for things like the footer and other sections that are down the page (anything the viewer would have to scroll down to see). These aren’t needed immediately, so we can load them after the DOM elements are presented.
Tools like this Critical Path CSS generator will analyze your site and create separate files for you. You can do this manually as you build your site.
Inline Critical and Small CSS Files
You’ll also want to inline any small CSS files as well. Even though they may not be essential to the page, there isn’t any real benefit to loading files deferred unless they’re larger.
All of this amounts to a much faster-perceived load time because the non-essential CSS files are able to be loaded while the visitor looks at the upper-most content.
Now Our CSS is Made for Speed!
You should feel incredibly accomplished after taking these steps to make your stylesheets load as fast as they can.
Even if you don’t feel comfortable with some of the options, taking even a few of these steps will ensure that your users get the best of both worlds – amazing styling and a blazing fast experience.
The most important thing to keep in mind is that you’re shooting for a site that is as fast as possible. Often times the various web performance audit services will fire off warnings that may not apply to you if you’re utilizing HTTP/2. Don’t worry about the number/letter score you see and instead focus on improving the various page speed metrics.
Let us know below how your CSS optimization journey went!