Written by Jeffrey Bennett

You've got your web design polished and you're so freaking proud of yourself, you could just scream! I feel you. 😎

This blog post is all about improving performance of an already existing webpage.

To make your website a lean, mean, speed machine, you need to go beyond hardware and software limitations and into the realm of perceived performance.

Now you're ready to make your awesome creation even better. This is where the fun really begins!

I want you to feel like this when you're done! 😜
Before we get started, stop right this second and backup your files! This requires restructuring major parts of your stylesheets. Also, this is best with designs that have very few variations across a website.

Ready? Cool.

Let's start with the stylesheets. The first thing you'll need to do is determine exactly what styles will apply to the content above the fold (anything visible on screen before scrolling).

But Jeffrey! "Above the fold" means different things to different sized devices! Whatever shall I do?!

I'm so glad you asked, young grasshopper! Your visitor's browser and screen resolution statistics are an excellent place to start. Are 90% of your visitors arriving on a smartphone? Or are they using ultra-high resolution Retina iMacs, for example?

Find the most common resolution for your visitors (or narrow down the region of your target audience if you don't yet have enough data), then set your browser to emulate that size. Now you can determine the elements that appear above the fold.

Emulating screen resolution

Disclaimer: This part is sometimes very tricky if you're dealing with unorganized stylesheets.

You'll most likely need to include properties like background, display, width, height, margin, padding, position, z-index, font-family, font-size, font-weight, line-height, text-align, transform, box-sizing...

Postpone adding progressive properties like appearance, pointer-events, tap-highlight-color, and user-select.

ProTip: Try to keep the maximum file size of the new above the fold stylesheet to less than 15KB.

Also, if you're using HTML5 elements, add the appropriate style resets for only the above the fold elements. For example:

main, article, header, nav {
	display: block;
	zoom: 1; /* For Internet Explorer */
}

ProTip: Force the browser to display a vertical scrollbar in your above the fold styles! This will prevent visible layout thrashing or janks when the next stylesheets load.

body {
	overflow: auto;
	overflow-x: hidden; /* Hide horizontal scrollbars */
	overflow-y: scroll; /* Show vertical scrollbars */
}

Now we're getting somewhere! The trick is to make the styles load in as seamlessly as possible, so it "appears" as if your website is super freakin' fast. This is what I did with this very blog.

If there are noticeable style adjustments when loading in the other stylesheets, the experience won't be as smooth and it will feel lower quality.

All right, so now that you've been gathering all of your element styles and moving them out of your old stylesheets and into one file, it's time to test your webpage.

If your new stylesheet (minified) is less than 15KB, go ahead and insert that sexiness directly inline with a <style> tag (even if these styles are used on other pages in your site, since 40-60% of visitors come to your website with an empty cache). Inlining these styles are crucial to making your site fast for first-time visitors.

Only make it external with a standard <link rel="stylesheet" href="critical.css" /> tag if it's more than 15KB!

Load in your other stylesheets asynchronously (with async and defer attributes on the tags or by JavaScript) so that they don't block DOM rendering. There are several ways you can do this. In all the major browsers (except for Internet Explorer), you can insert the stylesheet directly in the <body> tag, and this will prevent render blocking.

For a more cross-browser solution, use this code in your <head> tag:

<noscript>
    <link async defer rel="stylesheet" href="/path/to/style.css" />
</noscript>

<script async defer>
function loadCSS(url) {
    var a = document.createElement("link");
    a.setAttribute("rel", "stylesheet");
    a.setAttribute("async", "async");
    a.setAttribute("defer", "defer");
    a.href = url;
    document.getElementsByTagName("head")[0].appendChild(a);
}

try {
    requestAnimationFrame(function() {
        loadCSS("/path/to/style.css");
    });
} catch(e) {
    loadCSS("/path/to/style.css");
}
</script>

If you like what I've written, follow my updates on Facebook, Twitter, or by RSS feed. This blog is brand-new, so it would be super fantastic if you would share it with your friends and colleagues! Thanks for reading!

Life is too short for bad websites!

Read my bio