Most of you are probably familiar with PageSpeed Insights, which is a free tool that’s provided by Google. The tool is a performance measurement tool, which works to analyse the content of web pages for desktop and mobile devices.
The result of the measurement is a single number score from one to one hundred, which offers a summary of several metrics used to measure a site’s or page’s performance. PageSpeed Insights is a free tool that all site owners should use. You’ll see how Google scores and ranks your site and why your website or web page is maybe not ranking as high as you’d like.
The tool creates a report that shows issues that are causing a page to load too slowly. In this article, we’ll look at how you can solve the four most common issues that PageSpeed Insights points out. You may be surprised to learn these issues deal with images.
Google SEO Rankings are Based on Performance
Remember that Google’s ranking of your site is not only based on SEO. It’s also based on performance. So while SEO, relevant content, backlinks, and domain authority are important, performance is now a more critical factor when it comes to ranking in the search engines.
What’s more, performance is making a huge difference when it comes to making the edge over a competitor’s pages. Therefore, performance is even more important than keywords and other SEO methods.
PageSpeed Insights Relies on Core Web Vitals Metrics
PageSpeed Insights is tied to a specific set of performance metrics called Core Web Vitals. Just in case you’re not familiar with these, here’s a short description of each one:
- Largest Contentful Paint (LCP): this metric measures the time it takes to render the largest image or block of text on a page, compared to when the page first starts loading. The largest image is most often found at the top of a page.
- First Input Delay (FID): this metric measures the time a user begins to interact with the page to when the browser begins processing event handlers in response to this interaction.
- Cumulative Layout Shift (CLS): is a metric that measures the layout shift that happens any time a visible element changes position from one rendered frame to the next.
Main Problems are Usually with JavaScript & Images
When you run PageSpeed Insights, you’ll find it’s very helpful in breaking down issues into categories based on how they impact the Core Web Vitals metrics. However, when it comes to the most common issues, the tool usually finds problems with images and JavaScript.
When it comes to JavaScript problems, you can usually count on the issue being with code that blocks or slows a page from loading. To avoid this issue, you may want to avoid using third-party JavaScript libraries to manage image loading. This is because the libraries are known to break a browser’s built-in image loading features. What’s more, above-the-fold images may load slower due to lazy loading, which may occur when the browser begins the download later because it first must execute JavaScript.
Another problem with JavaScript can come when the code is too large or even unnecessary for a page. This is usually referred to as code bloat.
However, when it comes to images, they are the most often implicated when it comes to poor performance. Consider that the average website payload is 2MB in 2021, and 50% of that is images. Wow! Most of the time, images are larger than they need to be. However, images can be optimised for size without impacting quality if you choose the right solution.
Image Issues Most Often Found by PageSpeed Insights
When it comes to image issues, the worst culprit is the Largest Contentful Paint. PageSpeed Insights often offers these four pieces of advice in regard to fixing LCP issues:
- Ensure images are correctly sized
- Serve images in next-gen formats
- Avoid large network payloads
- Ensure images are efficiently encoded
The PageSpeed Insights tool even offers guidance on how to deal with images, including:
- Ensure that the right file format is selected
- Use the right image compression
- Render the image
- Apply the right display size
- Write responsive image code to choose the right variation of the image
These methods work best for websites that are static, where new pages aren’t generated often, and images are not changed out frequently. However, for large, dynamic sites, there’s a better approach.
How to Develop High-Performance Images
Here, instead of using the other method, we’ll show you how to use an automated image CDN, which can fix all of the image problems found by PageSpeed Insights.
1) Detect mobile devices: detecting the site visitor’s mobile device model and its technical capabilities. This method detects the device’s OS version, browser version, screen pixel density, screen resolution height and width, support for next-gen images and video formats. This is where an image CDN can help.
2) Optimise images: an image CDN can also help utilise the device’s parameters to resize, compress, and convert large images to optimised images that are in next-gen formats, such as AVIF and WebP. As a result, an image CDN may reduce image payload up to 80%.
3) Deliver by CDN: image CDNs have servers all around the world. When using optimised images closer to the site user, it’s possible to deliver the images faster and independently from the cache. This method can speed up a page by about 50%.
By using a combination of these techniques, you’ll find that your site’s score is higher in the PageSpeed Insights tool and that the site ranks higher in the search engine results.
Summing It Up
When you follow the recommendations of Google’s PageSpeed Insights, too, you’ll find a big improvement in your score.
Remember that performance of pages now is the main factor when it comes to ranking higher in the search engines. By following the steps in this article, your website and web page images will load faster. The end result is more sales, conversions, and lower delivery costs when using an image CDN.