The goal of the Core Web Vitals initiative is to provide unified guidance on quality signals that are essential to delivering a great user experience on the web. Core Web Vitals are the foundation for how Google measures the new page experience ranking signal, which brings user experience to the set of ranking factors used in Google Search.
Building and maintaining sites that meet the criteria of a great page experience requires accounting for and addressing a wide range of factors. To make it easier to achieve this we can leverage the capabilities of measurement and automation tools to guide and support our efforts as site owners. There are a variety of tools to measure the Core Web Vitals of our site. And other tools, such as AMP, make it easier to build websites that perform well by providing access to a wide range of performance optimizations and best practices out of the box. If you are creating and publishing content using the WordPress platform, the official AMP plugin for WordPress enables the seamless use of AMP on your site.
In this post we take a look at the performance of a website built using the official AMP plugin for WordPress, discuss further aspects to consider when optimizing sites for Core Web Vitals, and provide pointers to the AMP plugin support channels to get guidance.
The AMP Plugin in Action
The AMP plugin landing page, amp-wp.org, was built taking advantage of the AMP plugin itself. This means that the site benefits from all the optimizations and best practices the plugin provides outofthe box. For example, AMP avoids content shifts by design, so optimizing CLS is something you usually don’t have to worry about. Let’s take a look at how this site performs in regards to page experience by using the AMP Page Experience Guide.
Step #1: Running the analysis tool
We first go to amp.dev/page-experience and enter the URL of our site and click “Analyze”:
And we wait a few moments while the tool runs an extensive set of performance tests on our site. It will check all aspects of your page as they relate to page experience.
Step #2: Analyzing the results
After all the tests are finished, the AMP Page Experience guide notifies us and provides a brief overview of the status of our site. As we can see, the tool tells us that amp-wp.org is doing pretty well in terms of page experience.
Scrolling further down on the results page, we can see details about each Core Web Vital metric:
This is great news because as publishers, we did not have to invest resources on incorporating all the performance optimizations and best practices that AMP provides, and our site performs pretty well!
Further Optimizations for CWV
It is important to understand what to expect when we leverage automation tools to help us address many of the factors influencing Core Web Vitals. In our research, we have found that developers have headroom to further optimize how they serve their AMP pages. This means that tools like AMP will take us a long way towards achieving our goals, but we may still have to do some additional work to further optimize our site.
Some examples where further optimizations may be required are:
- Our pages may not be identifying the hero elements on our pages properly, preventing some optimizations from happening.
- In some scenarios, Ads may introduce inefficiencies and extra loading times, affecting the CWV of our pages. We need to be aware of this and use ads solutions that perform well.
- We may be using heavy embeds that appear within the first viewport, causing the initial load of our pages to slow down
- We may be lacking key image optimizations that are necessary in our site
In the case of amp-wp.org, notice that in spite of scoring well, the AMP Page Experience Guide gives us two recommendations to make our site even better. For example, to improve on loading speed (LCP), the tool tells us to ensure the hero image on our pages is marked properly.
We can easily achieve this by ensuring the hero element (e.g. image) in our pages has the data-hero attribute. Once we do this, the AMP plugin will automatically render the hero image on the server, improving the Largest Contentful Paint (LCP) metric and therefore the CWV score of our pages.
Where to get help
If you are taking advantage of tools such as the official AMP plugin for WordPress and your page doesn’t perform well in terms of Core Web Vitals, you can reach out to the extraordinary team supporting the plugin in the WordPress.org support forum, engage with us there and ask your questions, share your results, and we will do our best to guide and help you.
To learn more you can check the sites for AMP and for the official AMP plugin for WordPress. Also, to get more details and insights on the whole story behind the AMP for WordPress plugin please take a look at this video series. And if you want to learn more about performance and Page Experience in general, please dive into the documentation on Google Search Central, as well as on web.dev, which contains tons of useful information on the technical side.
Posted by Alberto Medina, AMP and WordPress Developer Advocate, Google