How to use Google PageSpeed Insights to optimize WordPress website speed

Google has a tool called “PageSpeed Insights” that gives recommendations about how you can improve your site speed. It gives you a score between 0-100 on mobile and on desktop. The benchmark is between 50 – 70. By focusing on some elements we managed to increase our score from 54 on mobile (57 on desktop) on to 91 (92 on desktop).

Through this article, we will share how we improved our WordPress website speed. Nevertheless, do no focus too much on scoring 100 because at a certain point it could be at the expense of the user experience on your website.

PageSpeed insights webable

PageSpeed Insight Criteria 

When you build your WordPress website, the site speed should be one of your priorities. If from the start you focus on that aspect, it will allow saving time for other aspects of your website. Because in any case, you will have no choice if you want to improve the ranking of your website. Google takes into account the site speed as a parameter to rank websites. Based on studies users might leave the website if it does not load within 4 seconds. In this article, we will explain how you can improve your WordPress website speed by following the recommendations of the Google PageSpeed Insight.

Thus, Google wants to push website owners to improve the user experience by improving speed. There is nothing more annoying than when you want to visit a website but it takes to much time to load. Since the web offers a lot of alternatives, you might lose potential users. Which means that they will never get the chance to read your awesome content.  

In order to improve the page speed, Google focused on 10 elements:

  1. Avoid landing page redirects
  2. Enable compression
  3. Improve server response time
  4. Leverage browser caching 
  5. Minify resources
  6. Optimize images
  7. Optimize CSS delivery
  8. Prioritize visible content
  9. Remove render-blocking JavaScript
  10. Use asynchronous scripts

We did not focus on all, we focused on the most important ones. We had to find a balance between scoring high and the user experience of our website. Nevertheless, we managed to score 91 which is way above the benchmark. Which plugin should you use for each element?

1.Optimize your images

The first aspect of the speed of a website is the optimization of images. Otherwise, it will hurt your page performance. Even though there are a lot of image optimizers plugins, we recommend Wp Smush. It will automatically optimize the images you upload. The only thing you have to do is to activate the feature in the settings of the plugin. There are other image optimizers such as ShortPixel Image optimizer. Nevertheless based on our criteria to select the plugin to activate, “Smush image compression and Optimization” is the best fit.

You have also the ability to optimize all the image you have on your computer before uploading them on the website. In our case, we use “Imageoptim” which is a free small software that you download on your computer. The advantage of this software is that the optimization does not impact the quality of the image

imageoptim

2.Social media sharing plugins

If you read most of the documentation, it states that by implementing social share plugins it improves your ranking. Because if users share your content Google will consider that you have pertinent content and thus, might rank you higher. However, some of the plugins might actually negatively impact the performance of your website. Thus, when you want to implement a social media sharing plugin, have a look at their features to see if there are SEO friendly.

Examples: 

  • WordPress Social Share, Social Login and Social Comments Plugin – Super Socializer 
  • Social Media Share Buttons & Social Sharing Icons (Ultimate Sharing)
Social Share pluging seo optimised

This is also the case when it comes to Facebook page feed in the widgets. A lot of blogs share in their widgets (sidebar) their social media such as Facebook page posts or Twitter. The implementation of those channels through plugins hurts the site speed. There is a workaround to that by implementing them manually in a few clicks.

3.Wordpress Caching plugins

For some of you who might not be familiar with computers, you might wonder what is a cache? 

A cache is a place in your computer’s memory where data is stored temporarily. The purpose of the cache is to speed up your computer. In the case of a website, it a small local memory. When a site visitors interact with your website, they request your website’s data from your hosting provider. More specifically, they ask your hosting provider’s server for your website’s image, JavaScript and CSS, request it to be constructed into readable HTML files, and deliver it to your site visitor’s browser screen perfectly displayed as your website. In other words, when a user clicks on your website, they send a request to your host to display the page.

Thus, to speed the process up part of your website is temporarily on the user browser. Especially for your website’s static content, such as published posts that rarely change over long periods of time. 

The purpose of caching your website reside in five factors. First, deploy website data that rarely change in a readable format infraction of times. Secondly, speed up the entire site loading process. Thirdly, provide a better user experience to all site visitors. Fourthly, Rank higher in search engine results thanks to the faster load times. Fifthly, reserve server resources and reduce crashing, especially on shared hosting plans.

We recommend you to use the WP Super Cache based on the criteria we mentioned in our article on how to select a plugin.

4.Fix render-blocking Javascript and CSS with Autoptimise plugin

Render blocking means that it is keeping the page from loading as quickly as it could. Google speed insight recommends to “remove or defer javascript that interferes with loading the above the fold content” of your webpage. There are already a few elements that need to be clarified. As mentioned in one of our articles, Javascript is responsible for the interactivity of your website. Above the fold means what a user see initially on their screen (phone, iPad, desktop or whatever the user is using to see your webpage). 

Thus, when you defer the javascript, it means that you actually prioritize the content of your website especially on the section that the user sees the first. Which in the end will improve the speed of your website. 

How to do it on WordPress? 

The only thing you have to do is download the Autoptimise plugin and activate the following elements.

Autoptimise wordpress plugin
autoptimise css wordpress plugin

5. Leverage Browser Caching in your WordPress website

When you use the PageSpeed insight and you get this recommendation, you use this plugin in order to solve the issue.

What the plugin does:
“As it’s name, it will fix Leverage Browser Caching issues in your WordPress website. Also, it improves page speed score in website testing tools like: Pingdom, GTmetrix, PageSpeed, Google PageSpeed Insights, and YSlow.
About Leverage Browser Caching
Leverage Browser Caching means storing static files of a website in visitor browser. And then retrieving them from browser quickly instead again from the server. Actually it uses to speed up each page of a website.
How  Leverage Browser Caching Works?
When you visit a web page, your browser downloads all content of the particular page as well as common static files like css and js files. And when you visit other page of same website, your browser downloads them again. But if you have enabled Leverage Browser Caching, then all statics files will serve from your browser instead server. Now when you will visit any page of the particular website, it will only download unique contains of the page and static files will serve from your browser. in this way, it speed up each page of a website.
Benefits of Leverage Browser Caching
Primary benefit is speeding up website because static files will serve from your browser. it saves internet data of website visitor. it also saves bandwidth of website server and decrease load of server. Simply it decrease HTTP requests.”

6 & 7 Cloudflare & CDN

Cloudflare for wordpress website

Cloudflare which is a content delivery network (CDN), helps to improve the speed of your website. The  CDN is a system of distributed servers (network) that deliver pages and other web content to a user, based on the geographic locations of the user. However, it would be too heavy to explain everything in this article. Thus, we will cover the topic in another article. The only thing you have to retain for the moment is that it improves the site speed and the security of the website. Cloudflare is not the only CDN available on the market. It advantage resides in the fact that it is free.

In order to speed up your website, you are able to minify the source code of your website. Which is one of the criteria of the GoogleSpeed Insights.

CDN enabler plugin
Recap table: plugins to optimize the speed of the website.

GoogleSpeed Insights

WordPress plugins that you could use

1.Optimize Image

Smush image compression and Optimization

2.Defer  render-blocking JavaScript

 Autoptimise plugin

3. Optimize CSS delivery

4. Prioritize visible content

5.Leverage browser caching

Leverage Browser Caching plugin

WP Super Cache 

Social media sharing plugins

6. Enable compression

WP Super Cache (advanced settings)

7. Minify resources

Cloudflare

It is important to keep in mind that the PageSpeed Insight test gives your recommendations regarding how you can improve the speed of the website. Nevertheless, it is not mandatory to score 100.