Most users focus on SEO whether they are running a blog/e-commerce site on WordPress. While SEO is important for your website rankings, Page speed is equally or even more important to Google since it impacts user experience. Research shows that 47% of visitors expect a web page to load in two seconds or less and 40% of them will abandon if it takes more than three seconds to load. In this article, I will show you the tweaks that I have applied to my WordPress site to speed up as well as boost Google PageSpeed score.
Table of Contents
Google PageSpeed Insights
Google PageSpeed Insights is a tool that can analyze your site and identify ways to make it optimized for a faster and better mobile-friendly user experience.
A score is calculated based on the performance ranging from 0 to 100 and it falls into of these three categories – Good (green), Needs Work (yellow) and Poor (red). Performance is measured based on whether or not your website applies these optimizations:
- Eliminate render-blocking JavaScript and CSS in above-the-fold content (Above-the-fold content refer to the portion of the page a user can see when it loads without scrolling down).
- Optimize images (format and compress images without losing the quality to save many bytes of data).
- Leverage browser caching (Set an expiry date or a maximum age in the HTTP headers for static resources so the browser loads previously downloaded resources from local disk rather than over the network).
- Avoid landing page redirects (Check to make sure you don’t have any redirect from a given URL to the final landing page)
- Enable compression (check to make sure your resources are compressed with gzip compression)
- Minify CSS (include minified CSS)
- Minify HTML (HTML source needs to be minified)
- Minify JavaScript (include minified JavaScript)
- Prioritize visible content (properly prioritize above-the-fold content so they load as fast as possible)
- Reduce server response time
How to Speed up Your Website
In order to speed up your website and score higher in Google PageSpeed Insights, there are several measures that you can take. Each and every one of the optimizations mentioned above actually has a link to a help page that explains what it means in detail and what you can do to resolve the issue. Since most WordPress users are not developers it can get both overwhelming and confusing for them. That’s why I have decided to make this process easier by going through the steps that I took to optimize my website. It should be pretty straight forward and you don’t have to touch a single line of code.
Step 1: Migrate to a better web host
The first step is to stop using a cheap shared hosting server and migrate to a better web host like SiteGround for free. No amount of optimization will help if your server response time is low (see Google PageSpeed Insights #10). You might be saving a couple of bucks every month but you are losing a potential customer for every page visit. When you are on a cheap overloaded shared server it hurts your search engine rankings as well.
To be honest, I have nothing against cheap hosting. I think It’s great when you are just starting out with a new website. But there has to be a good value for the price. The reason why I love SiteGround is that they are the best in terms of performance, security, support, and uptime. The price is similar to what other shared hosts offer but you actually get a lot. Currently, they are even offering a free domain and a free SSL certificate with all of their hosting plans – which is really great since Google now provides a slight ranking boost to websites that load in HTTPs.
In addition to that, Google Chrome recently started showing an insecure warning when you visit a site without HTTPs. This can discourage your visitors to leave your site and prevent potential customers from purchasing something. So my recommendation is that you migrate to a good host like SiteGround and install an SSL certificate on your site to make it secure.
Step 2: Install WP Super Cache
WP Super Cache is a very simple yet powerful caching plugin for WordPress. This plugin generates static HTML files from your WordPress site (e.g. when a visitor opens a page on your site and there is no cached copy of this page). After an HTML file is generated for a page, your web server will serve that cached file to the visitors instead of processing WordPress scripts and loading content to the visitors. You can define how long a cached file should remain active on the server depending on your website traffic and when to clear that cache.
Once you have installed the plugin go to Settings > WP Super Cache > Advanced to enable caching as well as configure some caching related settings.
The default options should be fine for the starter. But here is a screenshot of the options that I’m using at the moment:
- Caching: Enable Caching
- Cache Delivery Method: Simple
- Miscellaneous: Don’t cache pages for known users (e.g. When I’m logged in as an admin I don’t want to see the cached pages on the front end)
- Miscellaneous: Compress pages so they’re served more quickly to visitors
- Miscellaneous: Cache rebuild. Serve a supercache file to anonymous users while a new file is being generated
- Advanced: Mobile device support.
- Advanced: Clear all cache files when a post or page is published or updated.
- Advanced: Extra homepage checks. (very occasionally it may stop homepage caching)
Now let’s move onto the Expiry Time & Garbage Collection section.
These settings will differ depending on the amount of traffic you are getting. If it’s a high traffic site a good starting point would be 3600 seconds (1 hour). That means every one hour a new cache file will be generated for a web page. If it’s a moderate or low traffic site you can also experiment with 43200 seconds (12 hours) or 86400 seconds (24 hours). You also need to set a timer which will regularly check for old or stale cached files e.g. 300 seconds (5 minutes) or 3600 (1 hour).
Once you have saved all the settings go to Settings > WP Super Cache > Easy and Click on the Test Cache button to make sure the plugin will be able to cache pages on your site.
WP Super Cache plugin page: https://wordpress.org/plugins/wp-super-cache/
Step 3: Install Hummingbird Page Speed Optimization
Hummingbird Page Speed is a very useful plugin for improving your page speed. It allows you to minify scripts (e.g. JavaScript, CSS), combine them and control whether you want to include it in the header or the footer. It also allows you to apply gzip compression and browser caching.
Once you have installed the plugin go to Hummingbird > Dashboard to Configure browser caching, gzip compression and minification (one at a time). After you click “Configure” the enable option will appear on the next screen.
Hummingbird will write the necessary code to your .htaccess file so your website can start taking advantage of both browser caching and gzip compression.
Now let’s move onto minification. This part is a little tricky because you need to define which scripts are to be minified or combined and where they will be included (header/footer). Sometimes minifying and including it in the wrong place may break your website functionality. So you need to be very careful when playing around with it.
In order to get the maximum benefits of PageSpeed Insights while keeping all the functionalities intact, I configured the settings like the following:
- Minify all CSS files (.css) and Combine
- Minify all JavaScript files (.js), Combine and include in the Footer
Obviously, this will vary in different sites depending on the plugins you are using. But it worked for me without any issue.
When you are experimenting with this feature make sure to always check for errors in your browser console. This link will help: https://codex.wordpress.org/Using_Your_Browser_to_Diagnose_JavaScript_Errors.
Hummingbird plugin page: https://wordpress.org/plugins/hummingbird-performance/
Step 4: Install Smush Image Compression and Optimization
Smush Image Compression previously known as WP SmushIt has been out there for a long time. It is a very popular plugin for compressing images without losing any quality. Once you install the plugin it will automatically start compressing newly uploaded images for you. In order to compress your existing images go to Media > WP Smush and click Bulk Smush Now.
For some reason, if an image doesn’t get smushed/compressed when uploaded, you can come back to this menu and apply bulk smush.
Smush plugin page: https://wordpress.org/plugins/wp-smushit/
Step 5: Install AMP
AMP is the official AMP plugin for WordPress developed by Automattic.
What is AMP?
AMP stands for Accelerated Mobile Pages. It’s a new open-source project spearheaded by Google that allows a site to serve a faster version a page to its users when viewing from a mobile device. There is a set of coding guidelines as to how the AMP version of a page can be constructed. Thankfully as a WordPress user we don’t have to worry about it at all. The official AMP plugin automatically constructs the AMP version of a page and places a link to it in the header of the parent page.
All you need to do is keep this plugin activated so WordPress can make Google bot aware of your Accelerated Mobile Pages the next time it comes to crawl your website. Once a page is indexed it should start to appear in the search engine results page like the following snippet on a mobile device (top one with the AMP icon):
It’s letting a user know that an AMP version of the page is available and so the user is more likely to click on it.
AMP plugin page: https://wordpress.org/plugins/amp/
My Google PageSpeed Insights Score
After applying these tweaks I was able to score 88/100 (Good) on Desktop and 73/100 (Needs Work) on Mobile. It’s not perfect but it’s not that bad either since I’m actually using Google AdSense and various other banners to monetize my site (when you have to load non-optimized resources from external sources you can’t really do much to improve its performance).
That concludes my tutorial on how you can speed up your WordPress site and boost its Google PageSpeed score. I hope it will be useful for users who are new to WordPress or trying to optimize their sites. If you have any suggestions feel free to share it in the comments.
