Table of Contents
The initial stages of evaluating a site for search engine optimization (SEO) are often overwhelming – especially when the site you’re evaluating seemingly has every issue under the sun.
To sort through the confusion, I’ve come up with one simple rule: if Google offers a special tool that helps you measure something, it’s probably worth prioritizing whatever that tool is measuring. That means mobile-friendliness, structured data, and page speed should always be high on your list.
Now that you have a simple rule for prioritizing tasks, my aim is to provide you with a straightforward guide on quickly and effectively improving your Google PageSpeed Insights score. To keep the scope narrow, I chose to focus on solutions for WordPress sites (although some of these solutions depend on server type, so they’re not totally exclusive to sites built on WordPress).
Before we dive into the solutions, I want to provide some background on page speed and how it relates to SEO as well as PageSpeed Insights itself.
First, why has page speed become so important for search engine optimization? The answer is twofold: user experience (UX) and the rise of mobile search. It’s becoming more and more difficult to distinguish between what is good/bad for UX versus what is good/bad for SEO – the two are nearly inseparable.
So, you might be saying, “Okay, I get it. Page speed is obviously a key component of user experience.” But why has it, in the eyes of many SEOs, become one of the key components of SEO?
One possible answer is this: As Google revealed in 2015, a majority of their searches take place on a mobile device. Obviously, a significant portion of searches on mobile devices happen on mobile networks. These mobile networks notoriously have a lower bandwidth than Wi-Fi or wired connections do, which means site owners need to make sure their site is optimized for all levels of internet connection speeds. This places a greater emphasis on page speed.
The Core Four
To the code-averse, some or all of these fixes might be intimidating, but hopefully after reading this guide, you’ll be confident enough to tackle these issues on your own.
GZIP compression is exactly what it sounds like; it’s a way of shrinking the size of the files that make up a web page. Enabling GZIP compression is one of the least complicated fixes in this guide. All you need is access to your .htaccess file and the code below.
There are two ways to access your .htaccess file on WordPress. The easiest way is via the Yoast plugin (assuming you use it, which you should). The other way is through FTP or cPanel access.
To find the .htaccess file through Yoast, go to the plugin in the admin menu, then navigate to the ‘Tools’ menu and select ‘File editor’ (second bullet point). You should see the Robots.txt file at the top of your screen and right below it, the .htaccess file. On a new line, paste the following code:
After saving your changes, check whether GZIP compression is enabled with Varvy’s GZIP compression tool. If this code does not work, try one of the following depending on the server type you’re dealing with. To identify server type, use the BuiltWith extension for Chrome or the BuiltWith website.
For Apache Servers
For NGINX servers
Note: This code would go in the config file, not .htaccess.
Note: Accessing the .htaccess file via FTP is dependent on your host. Please contact them or find their documentation for assistance.
Leverage Browser Caching
Like enabling GZIP compression, all that is required for leveraging browser caching is accessing your site’s .htaccess file and adding a little bit of code. If you’re not sure or don’t remember how to access your .htaccess file, please reference the previous section.
Once you’re in the .htaccess file, paste the following code on a new line:
Double-check whether adding this code worked by running a PageSpeed Insights test.
Note: “Leverage browser caching” may still get flagged if any assets are pointing to an external domain that does not have browser caching enabled. Just expand the dropdown for ‘Leverage browser caching’ and make sure there are no links from your domain listed.
In case you’re curious about exactly what this code is doing, let’s break down what is happening with this line:
ExpiresByType text/css "access 1 month"
Here, the server is saying, “Hey, this website’s CSS file is probably not going to change for at least one month, so instead of having to come back and re-download it every time between now and a month from now, why don’t you just store the file on your computer. That way the site will load much faster in the meantime.”
Check out Varvy’s excellent write up on browser caching to learn more, including alternate methods of caching.
Images are often the “heaviest” elements on a web page in terms of file size. For reference, a typical CSS stylesheet might fall just below 100KB in file size while one image with dimensions of 1000×1000 can easily reach 1MB – about ten times the size of a CSS stylesheet. And, if your web page has multiple images on it, the impact on page speed can quickly become significant.
Since images are often an essential part of communicating your message, removing them entirely to improve page speed usually isn’t an option. There are, however, a couple of approaches that you can take to minimize the file size of your images without sacrificing your message:
Use the Smallest Dimensions Possible
The images above show the file size for the same image at three different widths: 500px, 1000px, and 2000px, respectively. As you can see, loading an image that has a width of 2000px but only needs to be displayed at 500px wide can result in nearly quadrupling the file size.
In many instances, people will upload the full-size version of the image to their CMS, only to scale it down with CSS when adding it to a page. While there are plenty of legitimate use cases for this method, it should only be used if you have a good reason for offering users both a scaled down version of the image and the full-size version. This is because browsers load the full-size image and only scale it down once they come across a CSS rule that tells them to.
So, for example, let’s say you have an image that is 800×800 in its natural state but is displayed at half the size (400×400) when it’s rendered on the web page. If there is no reason to make this image available at its full 800×800 size to users, then scale the image down in WordPress’s Media Library to 400×400.
Bonus tip: File format can also be a factor. For instance, JPEGs are typically much smaller files than PNGs.
Compress the Image Files
We’ve already covered GZIP compression which is a way to compress an entire web page, but compression also works for individual files and is especially useful for large image files. Much like implementing GZIP compression, image compression is relatively straightforward.
Here are a couple of different ways to compress your images:
- Smush Image Compression and Optimization (a.k.a. WP Smush) – This easy-to-use WordPress plugin allows you to go through your media library and compress images that have already been uploaded. It will also compress images as you upload them.
- Other tools – There are a host of other software programs and websites that offer image compression. One of my favorites is Compressor.io.
Note: If you go back and compress the images in the previous section, you’re left with file sizes of 20kb, 52kb, and 123kb, respectively. That’s making the images anywhere from around 25% to over 50% smaller.
To round out this guide, I saved the most technically advanced for last. Fair warning for the code-averse, this one might require dealing with some PHP. But don’t worry, it’ll mostly be copy and pasting.
One way is to add a little bit of PHP code to your WordPress theme’s functions.php file. Another way is to download a plugin that will take care of it for you.
I will explain how to handle both fixes, but I prefer the former because it’s quicker and helps you avoid plugin clutter.
Option 1: Editing Your functions.php File (WordPress Only)
Again, this might seem scary to the code-averse, but as long as you follow these instructions and don’t mess with anything in the functions.php file, you should be fine.
Note: If you do not have access to the backend of the site via FTP, you should steer clear of this option. Even a single typo can take make the whole site inaccessible.
Step 1: Navigate to the Editor (under Appearance) in the Admin menu (see above screenshot).
Step 2: Find ‘Theme Functions’ in the list of PHP files on the right-hand side (see above screenshot).
Step 3: Scroll to the very bottom of the functions.php file and paste this bit of code (make sure you’re not pasting inside of another function):
if ( strpos( $url, 'NAME_OF_FILE.js' ) ) return $url;
If you’re trying to target two or more files with this code, format it the following way:
if ( strpos( $url, 'EXAMPLE1.js' ) || strpos( $url, 'EXAMPLE2.js' ) ) return $url;
The highlighted part is what you need to add for each additional file you wish to specify. If you’re not familiar, the || is an OR separator for PHP, allowing you to specify multiple conditions.
Option 2: Download a Plugin
Follow this link to Hostinger for insight on which plugins to work best. Again, this is a relatively simple issue that shouldn’t require downloading a whole new plugin, but this is a good fallback if the functions.php file is not cooperating or if you’re extremely code-averse.
It’s nearly impossible to get a perfect PageSpeed Insights score, but tackling these four easily fixable issues will get you much closer. More importantly, it will lead to noticeable improvements in the actual loading times of your site.
User experience is inextricably linked to SEO, and if you’re not addressing important factors of user experience like page speed, then you’re behind the curve from an SEO perspective as well.
Finally, one more shout out to Varvy for teaching me virtually everything in this guide. Head over to the page speed section of their website for more learning.