At the AMP 2019 conference held on 17 April in Tokyo, Google unveiled several new features concerning its AMP (Accelerated Mobile Pages) mobile page format, three of them major. The first concerns the signed HTTP exchange technology, which makes it possible to display a page’s canonical URL on an AMP page. The second concerns the introduction of a carousel dedicated to AMP stories in the search engine results page. And the third, which is the subject of this article, concerns the unveiling of a tag allowing custom JavaScript to be inserted into an AMP page. Before talking about custom JavaScript in AMP, we will also cover the new UI features brought to AMP.
JavaScript, a language kept at arm’s length by AMP
As you may suspect, this article concerns Google’s open-source AMP page format. If you are not yet familiar with this technology, we advise you to read our article on the subject. If, on the other hand, you have been following AMP’s roadmap, remember that when Google made AMP available at the beginning of 2016, the use of external scripts was not possible. Today, Google still takes the same line on its support site. And it is completely right! The JavaScript language is certainly a powerful technology, remarkable for its ability to manipulate the elements of a page, but its use can sometimes be a brake on the construction of the DOM. You only have to look at the Virtual DOM offered by React (a framework delivered by Google, as it happens…): from a search engine’s point of view, you cannot say that it is very SEO-friendly. Since no content is present in the DOM when Googlebot passes through, the intensive use of JavaScript in this kind of case is indeed a big problem for indexing. In any case, it was not for SEO reasons that custom JavaScript was ruled out of AMP pages. That decision was simply intended to ensure the almost instantaneous page loading of this particular format, and perhaps to guarantee a standardised and optimised user experience on all AMP pages.
Remember too that the maximum weight of an AMP page was set at 50 kB. Perfectly logical! Once again, if you want efficient page loading, the page has to be light (thank you, Captain Obvious). Yet with the ability to add GIFs and even videos to AMP pages, the storage capacity of those pages can quickly reach the maximum threshold. So if you wanted to use a JavaScript library or framework, which, incidentally, can sometimes weigh more than 20 kB — not to mention the AMP directives — we can conclude that it is likely to be rather complicated.
New JavaScript features native to AMP
Even before talking about the tag, it is important to highlight the new native features unveiled by AMP on 17 April. Some of them had in fact been expected by the end of 2018. In any case, these new features may seem contradictory to what was said above, since they are handled in JavaScript. You will find each of these new features presented in the video below.
Images loaded with lazy loading
Lazy loading is an asynchronous loading technique that makes it possible to call content in the background. Through this mechanism you can prioritise and manipulate the order in which the content on the page appears. Why? Because naturally the content of a web page is loaded according to the order in which it is written. In practical terms, with lazy loading you will prioritise the calling of lighter resources such as text over bulkier files such as images or videos. And that is what AMP now offers! Don’t worry, the result is well controlled.
If you were expecting to see a wild image burst into a gap-filled text after 2 seconds of loading, that’s not it! In reality, a preview image is generated by Google’s CDN, ahead of your page loading. The purpose of this image is to be much lighter than the original image, and to remain only for a brief moment while the original image loads. When a user loads your page, this preview image is therefore loaded at the same time as the rest of the page, and asynchronously in the background the original image will be called and will gradually replace the substitute image.
`Element level infinite scroll
Awaited for several months already, infinite scroll (endless scrolling of pages) is a feature similar to lazy loading that makes it possible to load a list of content asynchronously. This feature is particularly well suited to mobile. It allows a user to scroll through the items on a page (product catalogue, photos, etc.) without having to go through pagination. This is notably what social networks offer in order to load the news feed as you browse the page. Infinite scroll thus makes it possible to save server resources by calling content from the database only if an event has first been triggered by the user. In the end, the page’s loading time is broken up and the page therefore loads more quickly. Bottlenecks are avoided and the web browser can thus display the first elements of a web page without having to wait for the rest to be loaded! You can, for example, use this technique to generate the display of an article’s comments. That way, the comments will only be called if the user has finished the article.
A lightbox for displaying images at full size
Nothing too exceptional: it will now be possible to click on an image on an AMP page and access a viewer! In other words, you will be able to see the image in question at full width!
New image carousels
AMP will shortly be making 5 new forms of image carousel available. Each of these forms has been designed with the aim of showcasing your content according to its “purpose”. You will thus be able to:
- showcase your articles with a slider that includes a caption (1)
- create a “home page” version of a slider (2)
- illustrate your products more meaningfully (3) and (4)
- scroll several elements horizontally (suited to mobile) (5)
3 new loaders
A new feature that is more of a UI measure: AMP will now offer three different loaders. With these new animations, the user will be better able to understand and guess the nature of the content that is loading. The first loader, which seems the most natural, is associated with AMP components. These components may therefore be images, iFrames, lists or even carousels. The second loader is associated with advertising content. And the third makes it possible to give a hint about the content that is loading.
amp-script: its possibilities and its limits
JavaScript is coming to AMP!
With ‘amp-script’, custom #JS can operate within AMP Documents. Don’t believe us? The animation below was built using AMP Script!
Tune into #AMPConf April 17-18 to learn more and see how it’s done.
More info here…
— AMP Project (@AMPhtml) 11 April 2019
On 11 April, Google teased its conference by posting the above tweet from AMP’s Twitter page! Suffice to say that this news was unexpected — the AMP community had given up on the idea that one day AMP might accept custom JavaScript!
amp-script: the tag capable of running an emulator
To test the limits of its tag, Google asked one of its collaborators to embed a JavaScript emulator (created in an external script) inside that very tag. It was Aaron, from the AMP dev team, who designed this emulator. And guess what — it worked! If you wish, you can see this demonstration at 4 minutes 20 in the video presented above. This example was designed solely to uncover the limits of the tag and of using custom JavaScript in AMP. After highlighting its feat, AMP is keen to stress that this example represents a concrete case of what should not be done. It would indeed be invalid AMP code, and if you tried to do the same thing, your script would not be accepted. Speaking of testing: sorry to disappoint you, but the tag is not yet available in production. If you wish, you can nevertheless take part in the improvement phase for the tag by registering your domain name in order to obtain accreditation to test this feature.
React, Vue.js and Preact compatible with amp-script
The video that follows (below) is much more technical and will delight the most curious among you! The first 20 minutes of the video are devoted to explaining why custom JavaScript should be used and how. An important point to remember: an AMP page will only be able to support a maximum of 150 KiB of custom JavaScript. This limit has been set in order to avoid certain excesses, such as the emulator presented above. Don’t worry — according to the AMP team, 150 KiB should be enough for you to use JavaScript “wisely”.
To find out more about using the compatible JavaScript frameworks, you will need to go to 23 minutes 50 in the video! There you will find examples of tests carried out with these frameworks, including in particular a comparison between Preact and Vue. If you are not familiar with Preact (the purple logo), simply remember that it is a React-like library that weighs just 3 little kB! Impressive, isn’t it?
Unfortunately, there is no miracle for squeezing the React JavaScript library into 3 kB — compromises had to be made! We will let you take a look at its capabilities through the video above. Nevertheless, if you are looking for an efficient, super-light JavaScript framework with well-stocked documentation, we advise you to take a look at Mithril JS.
