Improving Your Google Ranking by Increasing Page Speed

It’s the most coveted spot online: the first page of Google. Getting there is no easy task; you have to make sure you’ve got heading tags and meta descriptions, keywords and synonyms, backlinks and interlinks, blog posts, pages, stats, GooglePlus pages, social media integration… the list goes on. But in the midst of all the content and linking and keywords, don’t forget the crux of your website: website speed.

Google has provided a very handy tool for testing exactly how your website is loading: PageSpeed Insights.

Before you look at how to increase your website loading time, go ahead and test your website out.

Website Speed Improvement Wins

The following tools I’ll be talking about have led to some impressive speed increases in several WordPress websites. Here are just a few:

OutlyerVR – Desktop 69/100 increased to 89/100; Mobile 49/100 increased to 69/100

ShopInJoy – Desktop 23/100 increased to 79/100; Mobile 19/100 increased to 67/100

Amber Fox Photo – Desktop 34/100 increased to 72/100; Mobile 45/100 to 68/100

Fresh Tintings – Desktop 53/100 increased to 87/100; Mobile 44/100 to 68/100

Note that anything above 80 for desktop is really good. For mobile, around the 70s. 

Caching

Caching is one of the first things Google’s Speed Test recommends for your site – often stated as “Leverage Browser Caching”. What exactly is caching? It’s the process of putting together the page from all the different resources and storing it in one place so that it loads faster. Think of it as an overall speed improver.

There are lots of different caching plugins, but I personally like W3 Total Cache.

There are lots of different caching plugins, but I personally like W3 Total Cache. If you search for Caching plugins, WP Super Cache comes up almost immediately, but I’ve found it doesn’t have the breadth that W3 Total Cache has.

Within caching, you have the Database Cache, Browser Cache, Object Cache, and Page Cache (in the W3 Total Cache plugin). Turning on and off the different caching types will get you different responses from your website, so you should always do testing after changing the settings to ensure that your website is still working. Notice that Google’s main suggestion is browser caching, so start with that one.

Keep in mind that once you install a caching plugin, when you make changes to the coding in the site you’ll need to “clear the cache” before they show up (usually just a button somewhere in the plugin you use).

Optimizing Images

This recommendation is probably something you’ve heard before – large images slow your site down. But when Google says optimize, it doesn’t just mean resizing; it’s also talking about compression. Now you could go through every image on your site, pull them into Photoshop, resize and compress there, but that’s a time intensive option.

Instead, I use two plugins to accomplish the same thing: ShortPixel which compresses images by bulk and as you upload them, and Imsanity which puts a max size on all images uploaded.

Imsanity is mainly for clients who don’t know how to use or don’t want to use a resizing program for images before they upload. For example, if you upload an image straight from a camera (common for Real Estate Brokers), the image is going to be vastly over-sized for the web at upwards of 4000 pixels. Ideally, websites should almost never have images over 1500 pixels. Imsanity resizes the image if it’s too large.

ShortPixel, on the other hand, compresses images. While the image’s visual size stays the same, the image’s file size, and thus loading time, is reduced. It’s a handy plugin that automatically handles all the new images you upload. You can also get an API key for free and do a bulk compressing of all the previous images you’ve uploaded.

Always check out the “could save” amount on the Google Speed Test for that image to make sure it’s worth it to optimize the images.

While both plugins are useful, you’ll probably have a few images that Google says can still be optimized or resized. You can go through and manually mess with the images using photoshop or some other image program, but before you do, check out the “could save” amount on the Google Speed Test for that image to make sure it’s worth it. If it’s dealing with 20 KiB, it’s not worth your time. If you’re looking at close to 1 MB for a single image, that’s a little more worth your effort.

Note that some images are loaded from other sites and, while they’ll show up in the Google Speed Test, you won’t be able to do anything about them. For example, Twitter or Facebook feeds where you show the person’s image? You can’t do anything about those except remove the feed from your website – or not show the image.

Eliminate Render Blocking Javascript and CSS

I find this one the most annoying of the edits to fix. Like the images, you just might not be able to do anything about certain items here. Render blocking javascript and css means that your site is loading files that must be completely loaded before the site continues – hence blocking the rendering of the page until they’re finished.

Javascript

There are a few ways to eliminate this problem. You can try to fix this is to add “async” to all the Javascript files that are loaded. This can really only be done by a programmer who knows at least HTML. Go to the Header file in your theme and add just the word “async” to the javascript:

There are few issues with this. For example, if you’re loading the jQuery library in the header and make that file async, then the jQuery library won’t load before your next javascript file, that needs that library, loads. That issue will give you errors on your page and will probably break any functionality that relies on javascript.

Another option is to move the javascript files to the bottom of the page, so they load last. But your theme may need those files to load the rest of the page correctly.

Finally, you may have plugins that aren’t loading their files asynchronously. If it makes a huge difference in the speed of your page, you might consider using alternative plugins.

The only way to know is to test, test, test.

CSS

For CSS, there’s not much you can do. If the theme is coded well, there hopefully won’t be a ton of extraneous CSS. If you try to move the CSS file to the bottom of the page, your page won’t load with the correct layout.

Dean Hume actually has a great article already written about Loading CSS Asynchronously. If you’re really concerned about your CSS blocking the page load, you can try his approach.

Minify Javascript & CSS

The last major item you’ll probably see in the Google PageSpeed Insights is to minify Javascript and CSS. To be completely honest, most of the tools I’ve used to do this have messed up the rendering of the page. I’ve tried WP Super Minify, which sometimes works. If you’re using the W3 Total Cache, it has a setting for minifying Javascript and CSS that sometimes works, and sometimes it just makes the website continuously load and then freeze.

If it works for you, fantastic! If not, the rest of your edits should lower your site loading time enough that Google will like you! Like maybe not best friends forever, but pretty close.

Summary

In the midst of everything else you’re doing on your site, it’s important not to forget your website loading speed. It may not be as interesting to talk about as the design, but it’s vitally important.

Did you try it out and see your site improve? Let us know what worked in the comments below!