Isolating the Effects of CSS on Webpage Load Times | LoadStorm

There are several ways to make your website’s performance great. The three main areas you can work on are hardware (your web server), server-side scripting optimization (PHP, Python, Java), and front-end performance (the interface of the web page i.e. HTML, CSS, JS, J-Query). Today we will focus on the front end performance effects of CSS. We will look at isolating the negative effects of CSS on webpage load time and discuss different techniques to improve webpage performance by tuning your CSS.

Combine CSS files

Each CSS file you create is a resource that needs to be loaded. For each one of those resources, an HTTP request is made to the server to fetch that resource. If your page requires ten CSS files to display correctly, that’s ten HTTP requests that need to be made in order to download them. Meanwhile, the page needs to wait until it gets a response from all ten requests before it can start to display on screen.

...etc

Reducing the number of HTTP requests a page makes will increase the speed at which your page loads. This also has the effect of minimizing the load on the server, since it needs to handle fewer requests per page. Instead of using multiple CSS files in each page, combine those CSS files into one large CSS file. That way ,the server only needs to handle one request for stylesheets, which will speed up load time.

Use a sprite sheet

Another good way to reduce the number of HTTP requests is to use a sprite sheet. A sprite sheet is a collection of small images placed into one large image. Using CSS, you can parse through this sprite sheet and display each of the smaller images in different places on the site.

Sprite sheet of buttons for a potential media player.

#play { background-position:0px 0px; } #play:hover { background-position:0px -50px; } #play:active { background-position:0px -100px; } #pause { background-position:-50px 0px; } #pause:hover { background-position:-50px -50px; } #pause:active { background-position:-50px -100px; } #facebook{ background-position:-100px 0px; } #gplus{ background-position:-100px -50px; } #twitter{ background-position:-100px -100px; }

Resulting images as they appear in the browser. Five buttons, two of which have three image states, all with a single background image

So rather than make separate requests for each of the smaller images, you can make one request for the sprite sheet and divide it up using CSS. Since this reduces the number of HTTP requests made to the server, it will reduce the load time of the page.

Some great examples of sprite sheets can be found on CSS-Tricks website.

Avoid Using Inline CSS

By default, when a web page is loaded/rendered by the browser it caches the external CSS and JS files on the client side. When a user navigates across the site, those external files are already present and loaded in the client’s cache, so a new server request does not need to be made. Inline CSS, however, must be loaded and rendered on the fly. This slows down the rendering process, causing the page to draw on screen slowly.

/*This will slow down rendering and is not cacheable!*/

Keeping as much of your CSS external as possible speeds up page rendering and allows you to take advantage of browser caching, meaning less needs to be loaded on subsequent visits to pages on your site.

Avoid using CSS @import

The @import rule allows you to import stylesheet rules from an external file. For example:

@import style1.css

Inside style1.css:
@import style2.css

While this works in theory, it can also create massive problems. If you have an @import inside of an external stylesheet, the @imported sheet must wait until the first sheet finishes downloading before it can begin downloading. So in the above example, style1.css needs to finish downloading before a request for style2.css can even be made. Multiple @imports also download in order of size rather than the order in which you specify them. This can cause a multitude of errors from race conditions to null references as dependencies can be loaded last rather than first.

Using a link tag on a single stylesheet instead of @import trees is the safer and faster route.

A more in-depth look at the pitfalls of using @import can be found here: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Minimize the CSS code

Reducing the number of characters in a CSS file will reduce the size of the file, causing it to load faster. Let’s look at some CSS code and see what we can take out:

/*This is some class*/ .some-class {   color: #ffffff;   line-height: 20px;   font-size: 9px; }

Code comments need to be the first thing to go. Commenting your code is one of the best practices a programmer can have to improve code readability. However, since the machine never reads those comments they are just extra baggage that needs to be loaded and can be safely removed.

.some-class {   color: #ffffff;   line-height: 20px;   font-size: 9px; }

Whitespace is the next thing that should be removed. Proper use of spaces, tabs, and line breaks can increase the human-readability of the code, making it easier for our eyes to parse the data. Just like with comments, though, the machine skips over these characters without needing them. Which is why we can remove all whitespace from a CSS document without affecting the appearance of the document.

.some-class{color:#ffffff;line-height:20px;font-size:9px;}

Much more efficient! This may not seem like a lot with a small example like this, but for large stylesheets with hundreds of spaces, tabs, line breaks, and comments this can reduce file size by a ton. That said, this process also makes the code nearly illegible to humans so it may be beneficial to keep a human-readable copy of your stylesheets handy for development purposes.

If this seems like a lot of tedious work to reduce file size…well, it is. That’s why there exist many free tools that do the heavy lifting for you. One such tool, http://www.cleanmystyle.com/, can be used right in your browser and is completely free.

Conclusion

CSS is what defines the look and feel of your website. Optimizing CSS code to reduce file sizes, shorten load times, and decrease the number of server requests made can make a huge difference in the performance of your site.