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 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).
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.
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.
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.
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.
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!