Optimize your WordPress website with Google PageSpeed Insights tool

 I will walk you through the Google PageSpeed Insights tool. I will use  My  channels  website webhostingforbeginners.net for this tutorial. Webhosting for beginners.net  is the website where I post the Tutorial steps and commands for each and every Video tutorial I’ve done on my channel. Do Check it out…it’s a great resource.

I will go through the PageSpeed report for the website and see how we can optimize based on recommendations by the Pagespeed tool.

Google PageSpeed Insights Tool: https://developers.google.com/speed/pagespeed/insights/

Type in the URL for your WordPress site. I will type in https://www.webhostingforbeginners.net and Click on Analyze

Once the results are generated, you will see two tabs at the top 1) MOBILE and 2) DESKTOP

The scores will be different for both. I’m guessing the recommendations will also be different. But we’ll take a look at just the Mobile results and recommendations in this video as those will likely apply to Desktop as well.

Let’s take a look at the Lab Data section. I’ll try to briefly explain what each of these mean. Now just to note that for websites built with WordPress some of these metrics and further down recommendations will not be directly under our control because we use plugins and themes made by others and we have to depend on those developers to ensure they have coded the plugins or themes optimally.

First Contentful Paint – this is the time when the first text or image is rendered on the page. This measures how long it takes the browser to render the first piece of HTML content after the user requests the page.

Time to Interactive – This is the amount of time it takes for the page to become fully interactive to allow the visitor to engage with the website.  Having JavaScripts files load correctly on the page will be a big part of this. As well as making sure those are optimized as well.

Speed Index – This is the time it takes for the content to be visible to the end user.

Total Blocking Time – This is the time that a page is blocked from user input like mouse clicks, screen taps etc. This is again impacted by Javascript files that are loaded as part of plugins/themes etc.

Largest Contentful Paint – This measures the render time for the largest content block like an image or text block within the viewport.

Cumulative Layout Shift –  This measures unexpected movement of content on your page causing user experience issues for your visitor. Here is a sample of this here. We’ve all experienced this when content jump as the browser loads other components like buttons or menus.

Now let’s look at opportunities or suggestions as per Google to help improve the overall performance score of the website.

1. Serve images in next-gen formats – so since the tool detected that my website was built with WordPress it has suggested I look at using a plugin that will convert the images I upload to optimal formats. Image formats like JPEG 2000, JPEG XR or WebP provide better compression than PNG or JPEG. As a result they are faster to download and hence make the website faster. For these next-gen formats to be supported under WordPress, you will need a plugin and here are some options.
2. Let’s move on to the 2nd opportunity – Properly Size Images. So here the suggestion is to ensure that the images I use on the website should be uploaded through the Media Library so that WordPress generates optimal image sizes and then insert those images in your blog posts or pages. It also suggest avoid using Full Size images which makes sense.
3. Remove unused Javascript – From a WordPress prespective this seems to be a little less under our control as I mentioned earlier since majority of the times it is the Themes and Plugins that insert Javascript files and if those are not coded properly then likely we will see issues here. Pagespeed is recommending to limit the number of plugins. Code coverage is another tool that will highlight and identify bad coding issues and identify which plugins might have issues. I’ve never used it but seems like a promising tool so maybe I will look at that in another video so make sure you subscribe to the channel.
4. Next is Eliminate render-blocking resources – This is probably another area caused by Plugins and Themes however here it does suggest that there are plugins that will help deliver JS/CSS more efficiently by deferring the loading of JS/CSS. You may want to test first as they may break plugin features or theme features. Here they list plugins like Autoptimize or W3 Total Cache for this. So you may want to try these and see which ones work better for you
5. Next is to minify Javascript – this is a method to reduce the file sizes sent back to the browser as a result your website will load faster. Here they suggest WordPress plugins that can help minify or compress your scripts. As you see here. the W3 Total Cache plugin which we just talked about is a popular one and can do other optimizations as well.
6. Next is Defer offscreen images – this is also called lazy-loading of images that do not show initially on the screen or above the fold. The ability to defer those will result in faster load times for your visitors. They suggest this can be done by a plugin. There are several here so see which one works best for you.
7. So this one on optimizing images or Efficiently encode images we’ve already looked at and the plugins suggested here that will help with this.
8. Finally Remove unused CSS – this may be not in our control however you can use the code coverage tool to help you identify and see if there are options to remove CSS for themes/plugins you are using etc.
9. This diagnostics area is likely more of the same issues and can be addressed with the items we just talked about. However this first item seems we should set explicit width and heights on images that will help improve the Cumulative Layout Shift that we taked earlier in the video.