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.
Speed Index – This is the time it takes for the content to be visible to the end user.
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.
- 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.
- 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.
- 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
- 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.
- 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.
- 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.
- 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.
All videos tutorials on the website as well as the YouTube channel aim to provide a simplified process for a specific scenario; there could be many different factors and unique use cases you may have. The tutorials may not cover every situation; so treat is as a starting point or learning concept to apply to your unique situations, and consider this inspiration but not prescription or explicit direction.