Accelerated Mobile Pages are fast, and websites should benefit for using it. But is yours fast enough?
AMP is supposed to be fast out-of-the-box. It has runtime which is optimized to deliver faster loading speed to all valid AMP pages. However, there are things you can do to make a little improvement in the performance.
But is it necessary? After all, AMP documents are already served using AMP cache that already performs all of these optimizations. Well, this is true but only to cases, such as AMP documents that are surfaced in Google or Bing search results.
In other cases, like when AMP documents are served from the origin, performance can be compromised.
"For these cases, where you are serving AMP pages from your own servers, it is important to make sure that your AMP pages offer the optimal loading performance," explained AMP.
The first thing to know is that AMP runtime must first be loaded so AMP specific elements, such as amp-img or amp-video can work. What this means, those elements will only start downloading once the AMP runtime has been loaded.
To make AMP pages load faster, there are two opportunities:
- Make sure that browsers download the AMP runtime as soon and as quickly as possible.
- Tell browsers to start downloading important assets such as images, even before the AMP runtime is available.
The key to achieving this, is by using resource hints such as the rel=preload to prioritize the download of critical resources. Others include preloading hero image (the image size/encoding itself has not been changed), and using optimized custom fonts (in this case, Google fonts).
You can also consider using a service worker. But before using it, "it's a good idea to evaluate whether it makes sense to add a service worker to your site," explained AMP.
Read: Google Search Starts Using 'Service Worker' To Speed Up Repeated Searches
It's also possible to make AMP pages load even faster by reducing rendering and scrolling junk.
Because the AMP runtime implements a static page layout system, the way it works is that the AMP Boilerplate code initially hides the document until the AMP runtime is loaded. Once it’s loaded, the runtime will then calculate the layout and shows the whole content.
There is a disadvantage to this, as it causes visitors to see a blank page until the AMP runtime is loaded. It also doesn't support progressive rendering.
However, users can negate this negatives by improving AMP server-side rendering. This makes it possible to remove the AMP Boilerplate so that the AMP document can be painted without running the AMP runtime JavaScript.
Conclusion
AMP can certainly make web pages to load faster.
However, the fact about AMPs is that AMP pages are not always served from an AMP cache. A website may decide to show AMP pages from their own servers for other traffic sources, for example.
There are ways to make AMP pages load faster, even if those pages are served from the origin. And AMP is advising that websites should implement the opportunities to make their AMP pages faster to ensure best performances from other platforms linking to non-cached AMP documents.
According to AMP on its post, "these changes are trivial, but can significantly improve loading performance without breaking AMP validity."