30 second recap:
- There has been a gradual increase in Google’s impact of page load time on website rankings
- Google introduced the three Core Web Vitals metrics as ranking factors to measure user experience
- The following steps can help you get a better idea of how your website is performing through multiple tests
A fast website not only provides a better experience, but can also increase conversion rates and improve search engine rankings. Google has introduced the three Core Web Vitals metrics to measure user experience and uses them as a ranking factor.
Let’s take a look at what you can do to test and optimize the performance of your website.
Get started in Google Search Console
Want to know if optimizing Core Web Vitals is something you should think about? Use the page experience report in Google Search Console to see if any of your website’s pages are loading too slowly.
Search Console shows data that Google collects from real users in Chrome, and this is also the data used as a ranking signal. You can see exactly which page URLs need to be optimized.
Run a website speed test
Google’s real user data will tell you how fast your website is, but it won’t provide an analysis that explains why your website is slow.
Run a free website speed test to find out. Just enter the URL of the page you want to test. You will receive a detailed report on the performance of your website, including recommendations on how to optimize it.
Use priority suggestions to optimize for the largest, most content-heavy painting
Priority Suggestions is a new browser feature released in 2022. It allows website owners to indicate how prominent an image or other resource is on the page.
This is especially important when optimizing for Largest Contentful Paint, one of the three Core Web Vitals metrics. Measures how long it takes for main page content to appear after the page is opened.
By default, browsers assume that all images have low priority until the page begins rendering and the browser knows which images are visible to the user. This way bandwidth isn’t wasted on low priority images at the bottom of the page or in the footer. But it also slows down the important images at the top of the page.
Adding a fetchpriority=”high” attribute to the img element which is responsible for the largest painting with content ensures that it is downloaded quickly.
Use native image lazy loading for optimization
Lazy image loading means loading images only when they become visible to the user. It’s a great way to help the browser focus on the most important content first.
However, lazy loading images can also make images load slower, especially when using a JavaScript lazy loading library. In that case, the browser must first load the JavaScript library before it starts loading images. This long chain of requests means that the browser takes some time to load the image.
Browsers today support native lazy loading with the loading=”lazy” attribute for images. This way you can get the benefits of lazy loading without having to download a JavaScript library first.
Remove and optimize render-blocking resources
Render-blocking resources are network requests that the browser must make before it can display any page content to the user. They include the HTML document, CSS style sheets and some JavaScript files.
Since these resources have such a big impact on page load time, you should check each one to see if it’s really necessary. The async keyword on the HTML script tag allows you to load JavaScript code without blocking rendering.
If a resource should block rendering, check if you can optimize the request to load the resource faster, for example by improving compression or loading the file from your main web server instead of a third party.
Optimize with the new Next Paint metric interaction
Google has announced a new metric called Interaction to Next Paint. This metric measures how quickly your site responds to user input and is likely to become one of your Core Web Vitals in the future.
You can already see how your website is doing on this metric using tools like PageSpeed Insights.
Constantly monitor the performance of your site
One-off site speed tests can identify performance issues on your website, but they don’t make it easy to track test results and confirm that your optimizations are working.
DebugBear continuously monitors your website to check and alerts you when there is a problem. The tool also makes it easy to show the impact of your work to clients and share test results with your team.
Try DebugBear with a 14-day free trial.
