Accelerated Mobile Pages had a significant contribution in improving the mobile web experience. It has made mobile web pages lighter, faster, and easy to use. For publishers, it’s been a convenient way to increase traffic. If you’re one of the early AMP adopters, there’s a great chance that you implemented it because Google preferred lighter AMP pages over your regular heavy ones. But that’s not the case anymore.
We will prioritize pages with great page experience, whether implemented using AMP or any other web technology, as we rank the results.
Why is Google doing so? Probably because antitrust investigations are going on against Google. And many people think that AMP is the company’s unfair way of forcing publishers to adopt the framework. But that’s a debate for another day. What’s important here is that Google will “prioritize pages with great page experience.” That’s where Core Web Vitals come in. You’ve to keep your Core Web Vital scores high for better rankings, no matter if you have AMP or not. AMP won’t help if your CWV scores are low.
Table of Contents
AMP is CWV Friendly
Before we begin our discussion about optimization, you should know that AMP considers CWV in its implementation. It means AMP is supposed to help you perfect your CWV metrics with ease. AMP pages are five times more likely to pass CWV than non-AMP pages. Indeed, AMP restricts publishers from offering a customized user experience, but if speed and rankings are most important to you, then AMP is a great bet.
As an out of the box CWV solution, AMP has many provisions. For First Input Delay, AMP offers a deferred layout so that the browser prioritizes the elements likely to be seen and interacted with first. It only allows asynchronous JavaScript and splits up time-consuming processes to keep the pages light and responsive. Also, it loads all the necessary external codes in iframes to prevent them from hindering the page loading.
For Cumulative Layout Shift, AMP has efficient font loading and strict re-layout rules. To improve Largest Contentful Paint, AMP pages are cached by Google and other content servers like Cloudflare and Adobe so that the largest element of the page appears as fast as possible. In other words, AMP has already done half of the work. If you wish to bring further improvements, AMP Devs have suggested some measures that we’ll discuss next.
How do you know if your AMP pages are performing?
Implementing AMP isn’t the end of the story. You’ve to make sure that you pass CWV with the best scores after AMP is live on your site. Also, periodic checkups will help you keep a consistent page performance. So, how can you do that? You can use the Page Experience Guide from AMP itself. Enter your URL, and the tool will give you actionable advice for improvements.
How do my AMP ads impact Core Web Vitals?
AMP loads external codes in sandboxed iFrames. The iFrames are asynchronous, so they don’t have any negative impact on your page loading. It’s better to optimize your ads for CWV instead of doing the same for AMP.
5 Tips to Optimize AMP for Core Web Vitals
Invest in the best server
Choosing the best server is one of the best tips to optimize AMP core web vitals. You want to make sure that your content is delivered as fast as possible; it doesn’t matter who is serving it. While Google, Microsoft, and other similar companies have scaled up operations to deliver your cached content, you need to make sure that your servers are up to the mark too. Ensure you work with the best hosting providers. It should be capable of catering to your traffic without stress even when there are sudden surges.
Consider a content delivery network
Your content delivery time depends on the geographical distance between your server and the user. When the server is closer to the user, the content request and response are faster because they travel a short distance. On the other hand, long-distance means slow request and response.
A content distribution network retrieves your content to its servers distributed around the world. For example, if your server is in the US and a user requests your site in the UK, the CDN will deliver the content from its UK server. It’ll drastically improve your response time while decreasing the load on your US server.
Use AMP optimizers
AMP optimizers enable you to serve AMP pages just like Google-served AMP Cache pages. It keeps your performance intact even when you’re delivering content from your own servers. Another benefit is that they’ll optimize your pages automatically. There are three ways to use AMP optimizers:
What are the different tools to optimize AMP for Core Web Vitals?
- You can use a CMS with built-in AMP Optimizer support using frameworks like WordPress, Next.js, Node.js, etc.
- You can build your custom integrations on Node.js, PHP, Python, etc.
- You can do custom integrations with your hosting providers as well.
Preload key elements
How does preloading AMP elements improve Core Web Vitals?
Preloading can always help you improve your CWV scores when you use it prudently. For example, you can preload your cover images and fonts so that they are not causing a content shift. Preloading cover images is easy with AMP; you have to annotate them with attribute data-hero. This attribute informs AMP that it’s a hero image, hence it should be prioritized. Here’s how you do it:
<amp-img src="hero.jpg" data-hero ...>
Use rel=”preload” for fonts. Here’s an example:
<link rel="preload" as="font" href="/bundles/app/fonts/helveticaneue-roman-webfont.woff2" >
Use optional font display
In our article about optimizing cookie banners for CWV, we discussed how styling elements like fonts are not top priorities for loading. It can cause delayed rendering and content shift. To overcome this problem, you can use the font-display descriptor, and set it to optional. This will only use the font if it’s already in the cache and falls back to the system font if your custom font has not been loaded yet. You can read more about font display on Mozilla’s site.
Related Articles
What’s Next?
AMP framework is a great tool to pass Core Web Vitals, but it isn’t enough to complete the job. You can use the above tips to improve your CWV scores further with AMP. However, remember that CWV’s consider the overall page experience, and AMP isn’t the only way to improve it. So, don’t hesitate to implement other solutions if they are better AMP.
Are you confused about where to start? No worries, try our 7-day free consultation where we provide CWW and page speed optimization along with complete ad optimization for your site.
