Yes, page speed is a feature. It’s also a ranking factor. So I’m going to show you how to get a high PageSpeed Insights score with WordPress, the easy way.
You don’t need to have the PageSpeed module installed on your server. All you will need is a WordPress installation, two free plugins, and a little time. Some may be able to do this during lunch, if need be. It’s that easy.
Note: This tutorial is primarily for sites without a lot of AJAX driven functionality, as found on many ecommerce sites. And there are some things you don’t want to cache, such as AdSense advertisements. In either case you will need a different caching strategy, as this approach is basically all or nothing.
So you have the guts, but are you ready for the glory?
Operation High PageSpeed WP Commences
First, I selected a theme from the WordPress theme repository. But you can use just about any theme. I chose Rendition theme because of the typical design, and it has a couple huge images. The out-of-the-box PageSpeed Insights score isn’t great, but we can work with it.
I haven’t used Autoptimize in conjunction with any other caching plugin. Though Frank Goossens from Autoptimize has informed me it should work with just about any caching plugin on the market, with one minor exception. If you use W3 Total Cache, make sure it’s code minification features are turned off. Autoptimize handles those features well anyway.
The First PageSpeed Insights Score
I started with a fresh WordPress install in a test environment, then installed the theme. I highly recommend using a test environment. You can probably do this with a live site, but I don’t recommend it.
The PageSpeed Insights score benchmark yielded the following results:
We have a mobile score of 59 and a desktop score of 66. This is less than stellar. Let’s make it better.
Begin Image Optimization
The first big gain we’re going to get is through image optimization. You can download the “optimized” images at the bottom of the PageSpeed Insights result, and upload them to the proper folder via SFTP. But sometimes the image quality isn’t good. So make sure to double check the results!
Or you can give an online tool, such as compressor.io, a shot. Though most of you already use an image optimization plugin, such as EWW Image Optimizer or WP Smush.it. These options will get you close to passing the image portion of the PageSpeed Insights tool, but often they will fall a little short.
Once your images are optimized and uploaded, you’re ready to…
Begin Plugin Configuration
Install then activate Autoptimize first. Then navigate to Settings>Autoptimize and select the following:
Show Advanced Options
Optimize HTML Code
Optimize CSS Code
Inline all CSS
Note: The Inline all CSS option should be safe for most sites. Though there are a couple things you must consider. If average page views per session are high and you have a large CSS file, you may want to consider the Inline and Defer CSS option. If either of the above is true, inlining all of the CSS may decrease performance.
You can use the Inline and Defer CSS option by pasting all of your CSS in this page. This option requires a little more work, and some may even need to load Google fonts asynchronously with Web Font Loader to achieve higher scores.
Optional: Run PageSpeed Insights again and note your score. Such accomplishment. Much wow. But we’re not done yet.
Install then activate WP Super Cache. Then navigate to Settings > WP Super Cache and select the following (ensure preselected options stay selected):
Cache hits to this website for quick access
Use mod_rewrite to serve cache files
Compress pages so they’re served more quickly to visitors
View Mod_Rewrite Rules
Update Mod_Rewrite Rules
High PageSpeed Goodness: The Final Touches
Now it’s time to add a little code to the .htaccess file, if you have an Apache server. If you’re not sure which type of server you have, ask for assistance. Alternatively, check your URL with builtwith.com.
If you have an Apache server, ensure your .htaccess has the following code:
# BEGIN Expires
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresDefault "access plus 2 days"
# Insert filters
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-httpd-fastphp
AddOutputFilterByType DEFLATE image/svg+xml
# End Insert filters
And now…. drum roll please….
The Final PageSpeed Insights Score
The final PageSpeed Insights score is high. It’s an amazing 100 for both desktop and mobile.
External Requests With Low Cache Expiry And Other Factors Lower PageSpeed Insights Score
If you host your own Google Analytics script, or don’t have it installed, the page should score close to 100. If you don’t host your own Google Analytics script, the highest you can achieve is 98 or 99. That is provided your server response time is adequate.
Nearly any external request with a low cache expiry, such as Youtube videos and Google Analytics, are going to lower the score. You can’t control the cache expiry, so your only option would be to host the video files and the GA script yourself. Though doing so involves more overhead, in terms of server resources and technical support.
Enjoy Your High PageSpeed Insights Score
For the price of a little sweat, most of you should see a large improvement in your PageSpeed Insights score. There are definitely more advanced configurations that will increase your site’s load speed dramatically. Though this method is proven to work, even with basic shared hosting.