Google added site speed to the algorithm as a search ranking factor back in 2010, but it has long been a minor signal. In most cases, there were much more important things you could do to improve your search ranking. In the years since, it’s become pretty clear that Google is making their focus on speed a higher priority, and making improvements to the speed of your site is having a bigger effect than ever before.
I wasn’t too concerned with the speed of my sites in the past, but after Penguin 4, I decided to do an upgrade while I was addressing other issues. As such, I can’t say exactly how influential site speed was on its own. I can, however, tell you what I did to take my site from a load time of over two seconds to a load time of 800ms. Here are the four changes I made.
1: Upgrade Your .htaccess File
If you have a blank .htaccess file, no file at all, or have one with minimal customization, you can take this code and add it to your file. This code does two things; it enables gzip compression for files on your site, which makes them smaller so they transfer from your server to your visitors that much faster. It also enables browser caching for files on your site – with different durations for different types of files – so that returning visitors load your site even faster the second time. Combined, they will have quite a significant effect on your site speed.
Do note that if you use a WordPress installation as your base CMS, you might already be using plugins to do this for you. Plugins like W3 Total Cache or WP Super Cache will cover the caching portion of that .htaccess file, while W3 Total Cache and WP HTTP Compression will enable gzip compression for your site. Ideally, you’re using a configured version of W3 Total Cache to get both effects from one plugin.
2: Put Your CSS Inline
The second thing you should do is make the painful decision to put your CSS inline rather than keeping it separate in its own file. Having to reference a second file repeatedly while loading the page slows down your site more than loading it all inline. However, there’s a trick you can use to make this even faster. Identify all of the elements of your page that are above the fold and find the CSS code that applies to them. Add all of these inline in a section in your HTML header. It’s going to make your source code look messy, but it’s going to speed up the whole thing.
What about the rest of it? You can keep it in a stylesheet and throw it in your footer. Yes, it’s still being referenced from a secondary file, but not only is that file smaller – even if by a negligible amount – it’s loading after the above-the-fold content has already loaded, styles and all. By the time the user parses that your page has loaded and decides to scroll down, the extra milliseconds will have passed and the styles will have loaded.
For those of you who argue that this is bad practice, I do somewhat agree with you. Yes, this makes it more annoying to change your CSS on a site-wide basis. However, the annoyance that comes in a redesign later is worth it for the site speed in the here and now. By the time it becomes an issue, you’ve been reaping the benefits for months or years.
3: Rearrange JavaScript and CSS Code
This step piggy-backs off the previous step. Remember how I said to identify the CSS that goes above the fold and only put that code inline? The rest of it should go in an external stylesheet, referenced down at the bottom of your code, in the footer.
In addition to this CSS, you should also put any JavaScript code that isn’t essential to your site down in the footer. If you have scripts that make your navigation work, by all means, keep them up top. Other code, like heatmaps, analytics, and tracking codes, should go in the footer. This includes Google Analytics. The only script I have loading at the top of the page is the script that makes my site design responsive and adapts it to the screen size of the device browsing the site.
There’s an argument to be made that loading Google Analytics after everything else on your page is going to miss some data, particularly the people who bounce within the first second of loading your page. It’s true that some extremely fast visitor hits might be missed by the script loading after they have come and gone, but the majority of the time those hits are coming from bots you would be filtering anyway, so it’s not worth worrying about.
4: Compress Images Site-Wide
The last step to take will improve your performance across your whole site, and it will tend to have a bigger effect on pages other than your homepage. You can fairly easily make all of your images smaller in terms of file size without reducing image resolution or quality. Here are some options how:
- Mac: ImageOptim, a drag-and-drop utility that compresses images in batches with no loss in quality.
- Windows: FileOptimizer, a similar utility that works on all sorts of files, including PDFs, Office documents, and even JSON files.
- Web: Optimizilla, a web-based version of the above, capable of compressing 20 images at a time.
- WordPress: WP Smush, a plugin that automatically reduces the size of your images when you upload them.
Image files are generally the largest files involved in a standard website, so compressing them will have a massive effect on your page load times. The more images per page, the bigger the effect.
