Written by

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! 😜

Getting Started

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!

Above the Fold

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: Keep the maximum file size of your 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.

That's 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.

Inline Styles

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.

If these styles are more than 15KB, you should really optimize further or adjust your design. If for some reason you have no other option, make it external with a standard <link rel="stylesheet" href="critical.css" /> tag.

Load in your other stylesheets asynchronously by JavaScript so that they don't block DOM rendering. The best way I've found is to insert the stylesheet directly inside the <body> tag, and this will prevent render blocking.

Order is important, but with asynchronous loading, there's a chance your later files will load in first. Fix this by concatenating critical properties inside one file.

Here's a more cross-browser way of loading your stylesheets asynchronously:

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

<script>
function loadCSS(url) {
    var a = document.createElement("link");
    a.setAttribute("rel", "stylesheet");
    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>

ProTip: To support older versions of Internet Explorer, use the <noscript> code above inside your <head> tag instead of your <body> tag.

If you need help improving your website's loading speed, I'm more than happy to work with you. Just send me an email and we can talk about the details.

If you like what I've written, follow my updates on Facebook and Twitter. Or you can susbscribe to email updates. 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