Directed by Google in the Page Experience as a ranking signal (Core Web Vitals), on October 13, 2020, a post was published from the official AMP Project blog where they presented the new free online tool “AMP Page Experience Guide” designed for developers to improve the performance of their AMP pages on these metrics.
We're your Core Web Vitals Developers!
We will fix the core web vitals issue on reported URL's then submit them until they are in the 'Green' section..
The tool, once the amp URL parsing is done, provides practical AMP-specific feedback to improve those metrics. It also allows you to navigate between the different ways of collecting statistics to see in detail: lab or field analysis.
Unlike other tools such as those already available to measure Core Web Vitals metrics (and in general Performance): Lighthouse, Chrome DevTools, PageSpeed Insights, Search Console’s Speed Report, and Chrome extensions such as Web Vitals. This new tool becomes more complete and shows you specific recommendations for AMP pages, such as using AMP Optimizer or making sure that resources such as the AMP are preloaded ( preload function ).
So in this article, we are going to learn How to fix AMP CWV errors with the Page Experience tool.
AMP Page Experience Tool
The use of AMP Optimizer solves that the AMP pages that you serve from your domain have the same optimizations as those that Google serves from its cache.
Let’s say that the Google cache has X ready-made optimizations that make the AMPs load faster, and so you can take those improvements to your server if you decide to do an AMP first or similar, mainly the improvements are applied concerning the preload of certain resources by improving the LCP metric.
The tool, in its recommendations, focuses mainly on improving the LCP and FID (or TBT ) metrics that are directly related to the loading speed and the response of the browser to user interaction with the page.
How to fix AMP CWV errors with the Page Experience Tool
Let’s dive into some most common AMP CWV Errors and how to fix them.
1. Improve LCP and avoid content shifts using “font-display: optional”
We do not recommend using ‘font-display: optional’ because, for the first 100ms, Fonts will not load. And as you know the first impression on users matters a lot.
Font-display: optional is very aggressive if we talk about rendering rules. Browsers first display invisible placeholder text. It is then given 100 milliseconds to render the Webfont. Beyond the first 100 milliseconds, the next font in the CSS font stack will be used.
So we recommend using ‘font-display: swap’ instead of font-display: optional.
2. Serve appropriately sized images
When it comes to image sizes, smaller is better, as long as the quality is not compromised. Although WordPress helps you with the use of srcset, there is more you can do to minimize the size of images, especially by resizing and compressing images.
Scaling is especially useful if you use stock images on your WordPress blog. These images are often disproportionately large to account for all uses, including print media. On the web, it is highly unlikely that you will ever need to use its full resolution. With some plugins, you can automatically scale large images to a maximum height or width when loaded.
Scaling is complemented by compression, which optimizes image size without sacrificing quality. With lossy compression, you can reduce image space by up to 80%. This applies not only to original images but also to images rescaled by WordPress.
To serve properly sized images, You can use the WP Rocket plugin. This media optimization section will solve your Core Web Vitals issues like Serve images in next-gen formats and properly size images. Or follow our WP Rocket Configuration guide to get the best results of WP Rocket.
3. Ensure initial Server-response time for the page is short
Server response time is the time it takes for a server to respond to a browser request. It doesn’t matter how much you’ve optimized your web page to load fast; If the server where your page is hosted responds slowly, there will always be an extra wait time, which will affect the total load time.
For users to perceive your page as fast, it is essential to reduce the response time of the server as much as possible. According to Google guidelines, a good server response time should be under 200 milliseconds.
Here is a guide to Reduce Server Response Times in WordPress.
4. Ensure there are no intrusive interstitials
It is a set of guidelines that ensures that content is easily accessible to users when they click on a website from search results. A new algorithm update in 2017 has started penalizing websites that use intrusive interstitials when a user visits a website on mobile devices.
Prevents websites from ranking higher in search results that prohibit a user from accessing content through intrusive interstitials. Some examples of intrusive interstitials are pop-ups or ads that block some of the content on a landing page that can affect a user’s interaction and experience on a web page.
Conclusion
So this is how you can tackle AMP Core Web Vitals Errors with the AMP Page Experience tool.
Google’s Core Web Vitals are the central metrics for measuring user experience. They launched three main metrics for cargo:
- LCP: painted from the largest element.
- FID: site interactivity.
- CLS: visual stability.
In addition, Core Web Vitals will be merged with ranking factors that already exist, such as compatibility with mobile devices or having the HTTPS protocol. All this to create a completely new ranking factor: the page experience!
I hope this helped out to fix AMP Errors to improve your Core Web Vitals. If you have any questions then don’t hesitate to share your thoughts in the comment box.
