In this blog post we’re going to look at how you can optimize the page experience of your AMP pages by running AMP Optimizer in a Cloudflare Worker.
A great user experience on the web means more than just having a website that loads fast (although that continues to be a critical part of the user experience). There are many factors that contributing to a great experience, such as:
Loading speed
Responsiveness
Content stability
Traditionally, these have been hard to measure, but with Core Web Vitals we now have a new way to measure user experience on the web. The key is: Core Web Vitals are based on real world user data. To score well on Core Web Vitals you need to make sure that your website performs well - for all your users around the world.
This becomes even more important soon, as Core Web Vitals are also going to be a signal in the upcoming page experience ranking update in Google Search. You can find more details in the page experience FAQ.
AMP is an open source web components framework that has been developed with page experience in mind. AMP ensures a good page experience by providing guardrails that help avoid common performance pitfalls. For example, AMP features a static layout system, which avoids content shifts by design.
However, AMP pages can still fail Core Web Vitals. The reason for this is clear: some performance best practices required for performing well on Core Web Vitals can’t be implemented at client-side. For example, image optimization, fast server-response times and effective font-loading are all critical for a good user experience, but need to be done on the server. Even AMP documents themselves can be further optimized. For example, AMP’s layout system can be pre-rendered at build or serving time which greatly improves page load times while still ensuring that there are no content jumps.
The good news is, if an AMP page is surfaced in Google Search or Bing, it’ll be served from an AMP Cache which performs all these optimizations for you. But when someone visits your AMP page directly, for example through a link shared on social media, they won’t get the same experience. In order to ensure that you are getting great Core Web Vitals scores for all your users, it is very important to optimize your AMP pages on your origin as well!
To help with this, the AMP team has created AMP Optimizers, which will automatically perform common performance best practices for you. Using AMP Optimizers combined with Cloudflare Workers makes it super easy to serve optimized AMP pages on your own origin.
We are happy to announce a new AMP Optimizer integration for Cloudflare Workers. So far, there are two AMP Optimizer versions available: one for NodeJS and one for PHP. Both take an AMP HTML document as input and turn it into an optimized AMP HTML document. Depending on when your pages are created, one of these needs to be run either as part of your build system or in on your backend as part of your rendering pipeline. However, integrating an AMP Optimizer is not always straightforward, for example if you’re not using PHP or NodeJS in your backend or when you don’t control the hosting environment.
With the Cloudflare Worker integration for AMP Optimizer you can seamlessly optimize all your AMP pages. You can find installation instructions on the Github repository.
Let’s dive into how the Cloudflare Worker works, so that we can get a better understanding of where it optimises things.
Whenever a request comes in for an HTML file (1), the Worker will first check in the global cache if an optimised version has already been generated (2). If that is not the case (3), the Worker will request the version of the file from your origin (4)(5), optimize the document if it is using AMP (6), and return that to the user (7). Only after the response has been fully streamed to the user will we start saving the generated version in the cache (8).
For subsequent requests, in a Worker anywhere else in the world, the result will be retrieved from the global KV cache, cached locally in that data center and returned straight away.
Because the AMP Optimizer parses the HTML document, it will discover what other resources are used, and will add preload tags for external resources such as fonts and hero images.
Images are often the biggest contributors to the total download size of a web page. Customers on the Business or Enterprise plans can automatically make use of the Cloudflare Image Optimization functionality. For those customers, the AMP Optimizer can automatically generate image source sets with links for the Cloudflare Image Optimizer.
Image sourcesets give the browser different options to pick the most appropriate image size for that particular browser viewport. This can greatly reduce the size of the image downloads for, say, a low end mobile phone, which needs much smaller images than a 4K desktop monitor.
While most of the requests will be handled very quickly, even the ones that need optimising, the optimisation of large files can take more than 50ms of CPU time. Which is why Workers Unbound is a perfect match for the AMP Optimizer Worker.
Workers Unbound allows Workers to execute for up to 30 seconds, so that even if it does take a bit longer than 50ms to optimize a document, your users will never see any errors.
Web performance is much more complex than any synthetic test can prove, so you should absolutely do your own performance testing on your own sites. But here is an example of a regular AMP page with and without the Cloudflare Worker AMP Optimizer in front of it. This is tested on a simulated Moto G4 on a fast 3G network.
Here is the full WegPageTest data if you want to explore this example further.
There is also an example benchmark script you can adapt if you want to run performance tests on your own site.
Cloudflare Workers offer a simple way to prepare your AMP pages for Google’s upcoming page experience launch. They offer a seamless integration that doesn’t require any changes in your CMS or server. Even better — with the new Cloudflare Workers Unbound, it becomes possible to perform even more advanced optimizations. Check out the cloudflare-amp-optimizer repository for more details on how to get started.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。