Improve CSS Performance in 3 Easy Ways

Dylan Kerler
Jul 5 · 3 min read

No matter what website you are building, in today’s world, you’ll have at least some CSS styling on it. Despite this fact, an often overlooked part of web development is CSS performance. Not to worry! There are a few simple tricks you can use to easily improve the speed of your stylesheets.

1. Make sure the files are non-blocking in HTML

Typically, we import a CSS file in our HTML like this:

Image for post
Image for post

The problem with this is that it loads the CSS files in a synchronous manner and prevents the rest of the page rendering until the stylesheet has fully loaded. This can be undesirable. Instead, we can preload in the stylesheets which can help prevent render-blocking with a simple keyword: preload .

Image for post
Image for post

This tells the browser to fetch these stylesheets early in the page lifecycle before the rest of the page is rendered in — Therefore, helping to prevent any render-blocking that may potentially occur because of late-to-load stylesheets.

2. Move critical CSS styles into an inline stylesheet

The browser will not render a DOM element until all of it’s respective styles have been loaded in. This can be a problem if your elements styles are all stored in a single large stylesheet that takes seconds to load. Instead, we can give the user a better experience by moving all of the critical CSS styles to be inline inside of the HTML file:

Image for post
Image for post

This means that we can render all of the critical DOM elements before the rest of the stylesheets have been loaded in. There are several tools that can help you find out what styles are critical and what styles aren’t. One of them is grunt-critical which can be used in conjunction with Grunt.

3. Use preconnect to load fonts faster

When a browser requests some fonts it does a DNS lookup, establishes a TCP connection and then asks for the fonts from the server. These steps can cause significant slowdown. Instead we can establish these connections before the browser even knows that it’s going to need to ask for the fonts with the preconnect option on the rel attribute.

Image for post
Image for post

This tells the browser to establish the DNS lookup and TCP connection as soon as the page loads instead of doing them whenever the browser gets to the point in a CSS file where a font lookup is needed.

Conclusion

Performance with CSS is often overlooked and overshadowed by backend, database or even JavaScript performance. However, HMTL provides us with some really simple and easy-to-use API’s that can improve the speed of our pages by, sometimes, significant margins.

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store