List of WordPress plugins to improve PageSpeed

How to achieve full score on Google PageSpeed Insights tool?

PageSpeed Insights and GT Metrix are two of the most popular web performance tools out there. They produce great results, but what do they actually tell us? You know your site’s performance is optimized when it loads fast in your browser, but what happens when you take into account the rest of the user experience? Does your site load same for a user in Canada and a user in Australia? Is your banner image taking too much time to load and users are bouncing back?

Recommendations from these tools can help you find where all you need to make changes and make your website load well under 3 seconds.

Before we start, these setting can be implied only in a WordPress website. Any other CMS will require you to get assistance from a web developer. Below are the scripts that are present in the page before starting the optimizatons..

• Universal GA Code
• Tag Manager
• Chatbot script
• Local Business Schema
• Google Map & Youtube Embed

After adding your URL in PageSpeed tool, it will show you various suggestions on how to improve your website speed. Below are some of the suggestions from PageSpeed Insights tool you will encounter while trying to improve your score.

Eliminate render-blocking resources

Install Autoptimize Plugin, and enable JavaScript, CSS optimize options in the first page. This will reduce the size of JavaScript and CSS files that are responsible for the design of our website.

Alternative: WP Super Cache by Optimole. A bit more complicated, you have to set it up through Cloudflare but the plugin is lighter than Autoptimize and does the job.

Downloads: Autoptimize , WP Super Cache

Properly size images

Use TinyPNG plugin to compress 500 image free in a month. Install plugin, sign up with email and activate your account to get the credits. The tool uses Lossless compression method to compress your image without compromising its quality. So it will help reduce the overall size of your website and improve page load speed.

Alternative: WP Compress – We have full version access that compress upto 250k images in a month.

Downloads: TinyPNG , WP Compress

Defer offscreen images

This can be fixed using lazy-loading images. Lazy loading is a method in which the images are only loaded when the user reaches that section of the page. So if you have a 3000 word article having 20 images throughout, only the first one or two image will load, last image will only load if the user scrolls down to last section.

This can be enabled in the website by installing a plugin by WP-Rocket team called Lazy Load – Optimize Images.

Install the plugin, enable these options an you are good to go.

Downloads: Lazy Load – Optimize Images

Minify CSS & Minify JavaScript

This will be enabled when you turn on the settings in Autoptimize plugin

Serve Static Assets With An Efficient Cache Policy

Cache helps to serve websites faster in the browser. There are different types and levels in cache. If we adjust how our website cache is served, it will help improve our pagespeed.

1. Use Cloudflare CDN

A CDN is a type of service which save the cache of your website in different servers in various locations. When a user opens your website, the files are served from the server which is closer to the user. This reduces the server response time and helps improve our pagespeed. Couldflare is a free CDN service that you can setup fairly easily.

Setup Cloudflare in your domain and set the browser cache expiration to 6 months. Caching -> Browser cache TTL

You can also setup Cloudfare to enable SSL and get https for free, lifetime.

Resource : Cloudflare

2. Install a cache plugin

You have already installed Autoptimize for JS & CSS optimization which is an excellent caching plugin. Alternatively you can also use WP Rocket, W3 Total Cache, LiteSpeed Cache etc. Each plugin have their own features like inbuild image compression, CDN integration etc but for caching, all plugins does the same.

3. Load google fonts locally

Most predefined theme templates comes with Google fonts by default. The fonts usually load from google’s cdn which will consume some extra seconds from out pageload speed. This can be reduced if the fonts are loaded locally from our server itself. OMGF is a WordPress plugin that lets you do it easily.

Identify the fonts that your website uses and select the font and size that need to be optimized. In my home page Quicksand is the font that loads first. You can identify the font size and family using Fontanello chrome extension. After hosting fonts locally, make sure your cache expiration is set to 180 days, mentioned earlier.

Downloads: OMFG

Serve images in next-gen formats

You should be familiar with jpeg and png image formats. They have been around for quite a long time. There are newer image file formats like webp or jfif which are modern file formats. These are better than older formats and helps to load our images faster in a browser.

Flying Images is a must have plugin which does this and much more. Its totally free and can be installed directly from plugin directory. They offer free image CDN, webp conversion, responsive images, compression(like TinyPNG) and Lazy Loading (Lazy Load – Optimize Images).

Enable everything except lazy loading because we have already enabled Lazy Loading with Lazy Load – Optimize Images plugin. This one plugin will fix all you image related problems in PageSpeed recommendations.

Downloads : Flying Images

Other Recommendations:

They also have all these free plging that fixes some or the other pagespeed issues. So its recommended to install these plugins and test out your speed.

Reduce unused JavaScript

When we use 3rd party scripts, it will take some time to load and reduce our pagespeed. This includes Collect chat codes, Youtube video embeds, Google Map embeds, Analytics or tag manager codes etc. We cannot remove these codes because it will affect the functionality or we cannot get any data from the website.

In the image you can see YouTube script is taking 2.1 seconds of our load time. Removing the video can affect our rankings.

You can enable these options in Lazy Load – Optimize Images plugin which will make necessary changes to the video in all pages and helps reduce the page load time.

You can also Install WP Youtube Lyte Plugin and enable these settings which will help us optimize our YouTube embeds further.

Downloads : WP Youtube Lyte , Lazy Load – Optimize Images

Conclusion

All these plugins are developed by different developers. You might see same options available inside different plugin settings like Flying Images and Autoptimize lets you lazy load images. So there are chances of fluctuations and compatibility issues when we use all these plugins together. So it is important to check all pages in your website and make sure everything loads correctly. It is also recommended to have a backup before adding these plugins.

Installing these plugins and applying these configurations will help you achieve 100 score in pagespeed insights. Do note that in order to get this score your basic theme should be have a lighter layout. If yours’ or your client website is using too much animations or other design elements, even after these much optimizations, the score will be low. Some websites are build using page builders like Elementor, Visual Composer, DIVI or WP Bakery which makes it easy to build the website but are very heavy on browsers and affect our page load speed. It is recommended to use WordPress default builder, Gutenberg to get high pagespeed scores.