Core Web Vitals are an important step forward in helping site owners understand where and how to improve user experience on their websites, and Google’s page experience signals will incentivize a focus on these objective metrics. Not only will they help developers improve and maintain great user experiences today, but they will also keep developers informed about the latest performance expectations on the web as they are updated in the future.
AMP Project contributors around the world are dedicated to ensuring site owners are getting a great start toward a performant experience when creating AMP pages. However, like many other frameworks, AMP can’t implement all web development best practices. In this blog post we will share what developers should be doing to ensure that AMP pages served from both the publisher’s site or via an AMP cache are optimized.
Pushing your AMP pages further to meet Core Web Vitals
AMP intends to make creating a great user experience easy. However, there are a few development practices that our team believes to be essential to a great user experience that might require additional steps.
Understanding AMP traffic
The Core Web Vitals metrics for a page are determined by observing real user interactions with web pages. In the case of AMP, this means that pages could be served from either the publisher’s domain or via an AMP cache, depending on how users encounter the content. Many sites see a significant portion of their AMP visits (over half or more) occurring on their own domain. AMP developers can measure Core Web Vitals metrics on and off AMP caches by following this guide.
Implementing web development best practices
In our research, we have found that developers have headroom to further optimize how they serve their AMP pages. The most common opportunities include:
- Addressing slow server response times: If your server is slow or far away from end users, then almost everything will be slow. AMP caches help optimize delivery, like a CDN, but nearly all AMP sites have some traffic outside of an AMP cache. That means making sure your server is fast and responsive is critical for a great user experience.
- Avoid using oversized images: For your site to be as fast as users expect, you should avoid using images that are larger than the display of the devices your users are using.
- Avoid layout shift caused by fonts: Layout shifting occurs when an element or multiple elements on a web page change dynamically, resulting in a “shift” of content. Fetching and rendering web fonts can directly cause layout shifts. Our current recommendation is to combine font preloading and
font-display: optionalfor all critical fonts used in the first viewport. We are working on additional guidance with standards committees since this layout shift is universal to all web pages. - Markup hero images using
data-hero. Hero images are a critical part of many webpages and should load as fast as users expect. Marking up hero images using thedata-heroattribute helps AMP Caches and Optimizers identify and optimize hero images resulting in up to 50% faster image rendering times:<amp-img data-hero src="…">.
Tools to make AMP even better
To get the strongest possible user experience on your AMP pages, we highly encourage all site owners to implement a number of additional optimizations you can perform yourself. Using the latest AMP Optimizer is the easiest way to automatically benefit from any new server-side optimization for AMP. We also launched the AMP Page Experience Guide (shown below) last year. Since launch we have added even more actionable feedback to the AMP Page Experience Guide making it even more useful. This has been driven by websites testing their AMP pages using the tool. For example, it will now give you custom font loading recommendations to help you optimize LCP and CLS.
If there is no actionable path to getting an AMP page to pass these criteria, we would like to hear from you and support you directly. You can file a request from within the AMP Page Experience guide as seen below or connect with us directly on Github.
Conclusion
The AMP Project is laser-focused on our vision to create a strong, user-first open web. You can use the AMP Page Experience Guide to see how your AMP page is performing on Core Web Vitals and we encourage you to take action on the optimizations recommended on publisher’s domain and AMP caches.
Our thanks go out to you, the AMP development community, for your feedback. As always, please let us know if you have any issues or feature requests.
Posted by Naina Raisinghani, Product Manager, AMP Project