Improve your page experience with AMP and Cloudflare Workers

Improve your page experience with AMP and Cloudflare Workers

Improve your page experience with AMP and Cloudflare Workers

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.

Towards a better user experience on the web

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

Looking under the hood

Let’s dive into how the Cloudflare Worker works, so that we can get a better understanding of where it optimises things.

Request Flow

Improve your page experience with AMP and Cloudflare Workers

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.

Automatic preloading

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.

Responsive images out of the box

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.

Peace of mind with Cloudflare Workers Unbound

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.

What are the performance gains?

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.

Summary

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.

Source:: CloudFlare