Since Google announced AMP in 2015 to increase page load speeds and enhance the overall mobile user experience — the open-source framework has continued to grow in popularity.
Not only that, the framework has updated significantly to support a vast array of on-page elements, better features and options, and improved interfaces — all to continue improving the user experience.
Here are some of the latest new AMP updates.
9 AMP updates you may not be aware of yet
1. Signed exchanges
When AMP originated, Google made trade-offs to deliver privacy-preserving instant loading web content. One was that the URLs displayed in address bars began with “google.com/amp” rather than the domain of the publisher:
This was one of the most prominent AMP criticisms. Businesses didn’t want Google to display the AMP URL in place of the domain the content actually comes from since domain names are essential for branding and publishing content.
In April 2019, Google announced a solution — a way to show the content’s original URL while still retaining instant loading capabilities. That solution is signed exchanges.
Google states:
A signed exchange is a file format, defined in the web packaging specification, that allows the browser to trust a document as if it belongs to your origin. This allows you to use first-party cookies and storage to customize content and simplify analytics integration.
Most importantly, though, signed exchanges display the publisher’s real URL when people use Google Search and click on an AMP link, instead of an “http//google.com/amp” link:
This is a big deal for two reasons:
- Domain name is a core part of brand identity
- It’s easier to get AMP analytics with your own URL
(Note: Google only links to signed exchanges when the publisher, browser, and search context all support it. That means you’ll need to publish both the signed exchange version and the non-signed exchange version of your content.)
2. Server-side rendering (SSR)
Server-side rendering (SSR) is a technique you can apply to AMP pages to make them load even faster — up to 50% faster as a matter of fact.
SSR works by improving first-contentful-paint times (FCP) for frameworks rendering the page client-side. The downside of client-side rendering is that all JavaScript necessary to render the page needs to be downloaded first, which delays page content load time and could potentially increase bounce rates.
As a solution, AMP SSR removes the AMP boilerplate code and renders the page layout on the server.
(Note: The AMP boilerplate code exists to prevent content jumps during page load, hiding content until the AMP framework has been downloaded and the page layout is established. That’s why AMP pages suffer from the same problem as other client-side frameworks — rendering is blocked until the JavaScript is downloaded.)
By removing the boilerplate code, AMP SSR results in 50% faster FCP times.
SSR’d AMP optimizations break the rules of the AMP spec, which makes the document invalid. However, as long as it’s indicated with a flag during setup, the AMP validator will still treat SSR’d AMP as valid AMP.
Currently, there are two tools available for AMP SSR:
- AMP Optimizer — A NodeJs library for producing optimized AMP
- AMP Packager — Ago command-line tool, usable with serving signed exchanges
3. Input masking
Completing forms online can be so cumbersome that they prevent users from doing so. This is truer on mobile devices where the screen is smaller and navigation more difficult. But as you know, forms are vital for collecting leads and completing sales.
To help make the form-completion process easier and more time-efficient, AMP enabled input masking. This feature allows developers to add formatting like spaces and interstitial characters, which is especially convenient when users are filling out dates, payment details, phone numbers, etc.:
With more and more people submitting their information online in today’s digital world, having an easier, faster system can make all the difference.
4. Video optimization
Several video improvements have been introduced to increase the many benefits of AMP.
Docking
Videos on mobile web pages often obstruct the user’s view if optimization isn’t implemented properly. This could easily lead to a poor user experience and deter them from viewing any future content.
This new dock attribute minimizes the video currently being watched when users scroll down the page, allowing them to view content and videos simultaneously, without any obstruction:
You can also customize where and how the video docks to find the best way to present your video to the user.
Video player
Another new update is the <amp-video-iframe> which lets you install a custom-built video player that includes all the AMP Video Interface features you may desire (autoplay, dock, etc.)
Video ads
Video advertisements can also be integrated and optimized into AMP — from any video ad network that supports the IMA SDK so you can track both ads and revenue.
5. Optimized lists
AMP recently added two new components to optimize lists on web pages:
Resizing
The <amp-list> allows you to specify when you want the list container to resize on user interaction, to better fit different kinds of content (e.g., when the <amp-list> contains an <amp-accordion> that a user taps).
Infinite scrolling
Infinite scrolling is now available, so when users reach the end of a list of items (search results, product cards, etc), the list is automatically populated with more items:
This provides users with seamless access to more content from a single page instead of having to click a “next” button and visit another list page.
6. Third-party integration
Cookies and data collection are essential for brands to record user information. However, with the GDPR, rules on data consent and privacy have become stricter and regulated across all sites. This led to many publishers relying on third-party Consent Management Platforms (CMPs) to collect data per GDPR.
With this in mind, AMP launched <amp-consent>, so CMPs could easily integrate with AMP. Meaning, AMP-enabled websites can now continue using CMPs to collect and manage user data without compatibility issues. They can also integrate data consent UI and prompt users before they provide their information.
7. Lightbox mode
Viewing images through a lightbox — expanding an element to fill the screen until it’s closed again by the user is increasingly common. Yet, it can be difficult for developers to deliver a smooth transition into lightbox mode, as it involves interpolating between two images of different positions and sizes.
This led to the AMP UI Working Group optimizing lightbox transitions and improving image viewability:
Now, <amp-lightbox-gallery> provides advertisers the opportunity to experiment with different sizes for their website and optimize how they want users to view their images.
8. Availability of custom JavaScript
One of the newest Google AMP updates is the availability of <amp-script> — providing the option to run JavaScript in a separate worker thread so advertisers can add custom JavaScript to their AMP page while still retaining its fast loading speed.
The new <amp-script> lets you cover use cases that weren’t possible with previously-existing AMP components. It also lets you share code across your AMP and non-AMP pages, and use a JavaScript framework.
Some examples the AMP team have built for <amp-script> include:
- Todo MVC using Vue
- A password checker
- Data visualization in an article using D3.js
- Multi-page forms where each section needs validation before proceeding to the next section:
To preserve AMP’s performance guarantee, though, there are some constraints:
- Content jumping — To avoid unexpected content jumping, <amp-script> requires user interaction to change the page content.
- Page load — Since <amp-script> doesn’t change page content without user interaction, it doesn’t modify content on page load either.
- Script size — The script used in a single <amp-script> must be smaller than 150kB.
- API support — Not all APIs are supported inside a Web Worker, and some DOM methods and properties are not yet implemented
(Note: <amp-script> is compatible with frameworks you may already be using such as React, Preact, Angular, Vue.js, jQuery, and D3.js.)
9. AMP Toolbox
AMP Toolbox is a collection of command-line tools and JS APIs to simplify AMP page publication. Each tool within the toolbox can be downloaded and used individually:
AMP CLI
A command-line interface available for most features included in AMP Toolbox, that can be installed globally via NPM.
AMP Linter
The new toolbox-linter checks your AMP documents for common mistakes and best practices.
AMP Optimizer
AMP Optimizer server-side enhances the rendering performance of AMP pages by implementing AMP performance best practices.
AMP Cache URLs
It’s a good idea to check whether an AMP page works on all AMP caches, and you can use the toolbox-cache-url component to do this, as it translates an origin URL to the AMP Cache URL format.
AMP Cache List
This provides a list of all official AMP Caches, which can be useful when quickly updating or removing AMP documents from an AMP Cache.
AMP CORS
Many AMP components (such as amp-list or amp-state) take advantage of remote endpoints by using CORS requests. AMP CORS is a connect/express middleware that will automatically add all CORS headers required by your AMP pages.
AMP Validation Rules
This is simply a JavaScript library for querying AMP validator rules.
Get an Instapage AMP post-click landing page demo
Since AMP has become commonplace in mobile optimization, consistent updates like these are vital and beneficial to developers, publishers, and advertisers. The newest updates above are all perfect for improving user experience and providing brands with more options to experiment with and test out to enhance their website’s features and on-page engagement.
For AMP post-ad-click experiences, get a customized Instapage AMP demo to see how you can create fast-loading pages in minutes, using a designer-friendly builder, built-in validator, advanced analytics, and more.