Accelerated mobile pages
Mobile traffic has surpassed desktop traffic in overall reach. While conversions remain a sore spot for mobile commerce, they are increasing over time. For example, mobile conversions increased by 47% year-on-year during Cyber Week and amounted to 39% of all conversions in 2020. From this, it’s clear that mobile commerce is here to stay.
However, users are changing how they make mobile purchases. App usage is declining, with 53% of worldwide shoppers using a retailer’s mobile website rather than their app. Consumers want the most engaging experience on mobile, directly from their browser, Speed of page load is a major reason for this preference.
According to data collected by Google, 40% of consumers leave a page that takes longer than three seconds to load.
Three seconds!
That’s all the time you have to keep the attention of a user who liked your ad and clicked it. And if your webpage fails to load in that time, you created the ad, regardless of how compelling it was, in vain. The bad news is the fact that according to data, most retail mobile sites take around 7 seconds to load, that’s more than double the amount of time 40% of users wait before abandoning the page. That’s not all, users will not only abandon the page, but, research suggests 60% of users won’t come back once they’ve had a slow experience on a webpage.
What is AMP?
Google launched the Accelerated Mobile Pages open-source project to ensure that mobile webpages operate at optimal speed. The AMP project allows developers to create web pages and ads that are consistently fast and high-performing across devices, and distribution platforms.
More than 1.5 billion AMP pages have been created to date.
When you create mobile pages on the AMP format you get:
- Higher performance and engagement: Pages created in the AMP open-source project load almost instantly, giving users a smooth, more engaging experience on both their mobiles and desktop.
- Flexibility and results: Businesses have the opportunity to decide how to present their content and what technology vendors to use, while maintaining and improving KPIs.
The reason why AMP pages load instantly is because AMP restricts HTML/CSS and JavaScript, allowing faster rendering of mobile web pages. Unlike regular mobile pages, AMP pages are automatically cached by Google AMP Cache for faster load times on Google search.
Google reports that AMP pages served in Google search typically load in less than one second and use ten times less data than the equivalent non-AMP pages. CNBC reported a 75% decrease in mobile page load time for AMP Pages over non-AMP pages, while Gizmodo reported that AMP pages loaded three times faster than non-AMP pages.
How does AMP work?
AMP pages are built with the following three core components:
AMP HTML
The AMP HTML is essentially HTML just with some restrictions for reliable performance.
Most tags in AMP HTML are regular HTML tags, however, some HTML tags are replaced with AMP-specific tags. These custom tags are called AMP HTML components and they make common tag patterns easy to implement in a performant way. AMP pages are discovered by search engines and other platforms by the HTML tag. You can choose to have a non-AMP version and an AMP version of your page, or just an AMP version.
AMP JavaScript (JS)
The AMP JS library ensures the fast rendering of AMP HTML pages. The JS library implements all the AMP’s best performance practices such as inline CSS and font triggering, this manages resource loading and gives you the custom HTML tags to ensure a fast page rendering. The AMP JS makes everything from the external resources asynchronous so that nothing on the page can block anything from rendering.
AMP Cache
The Google AMP Cache is used to serve cached AMP HTML pages. The AMP Cache is a proxy-based content delivery network used for delivering all valid AMP documents. The Cache fetches AMP HTML pages, caches them, and improves page performance automatically.
The three core components of AMP work in unison to make it possible for pages to load quickly.
The next section will highlight some optimization techniques that combine to make AMP pages so fast.
- All AMP JavaScript is executed asynchronously
JavaScript can modify every aspect of the page, it has the power to delay page rendering – and slow page loading. To ensure JavaScript doesn’t delay page rendering, AMP only allows asynchronous JavaScript.
AMP pages don’t include any author-written JavaScript, instead all interactive page features are handled by custom AMP elements. These custom AMP elements may include JavaScript, but they’re carefully designed to ensure they don’t initiate any performance degradation.
- All resources are sized statically
All external resources such as images, iframes, and ads have to state their HTML size so AMP can determine each element’s size and position before the page resources are downloaded. AMP loads the layout of the page without waiting for any resources to download.
- All third-party JavaScript is kept out of the critical path
Third-party JavaScript uses synchronous JS loading, this tends to slow down your load time. AMP pages allow third-party JavaScript but only in sandboxed iframes, by doing this the JavaScript loading can’t block the execution of the main page.
- CSS must be inline and size-bound
CSS blocks rendering, it also blocks all page load, and it has the tendency to cause bloating. AMP HTML only allows inline styles, this removes 1 or mostly multiple HTTP requests from the critical rendering path to most web pages.
- Font triggering is efficient
Web font optimization is critical for fast loading as web fonts are typically large in size. On a typical page that includes a few sync scripts and a couple of external style sheets, the browser waits to download the fonts until all scripts are loaded.
The AMP framework declares zero HTTP requests until all the fonts start downloading. This is only made possible because all the JavaScript in AMP has the async attribute and only inline sheets are allowed, there are no HTTP requests blocking the browser from downloading the fonts.
- Resource loading is prioritized
AMP controls all resource loading, it prioritizes resource loading and it loads only what’s needed and pre-fetches all lazy-loaded resources.
When AMP downloads resources, it optimizes the downloads so the most important resources are downloaded first. All images and ads are only downloaded if they are likely to be seen by the user, if they are above the fold, or if the visitor is likely to scroll them.
AMP also has the ability to pre-fetch lazy-loaded resources, these resources are loaded as late as possible, but are pre-fetched as early as possible. This way things load very fast, but the CPU is only used when resources are shown to users.
- Pre-rendering pages
The new AMP pre-connect API is used heavily to ensure that HTTP requests are as fast as possible as soon as they are made. Because of this, the page is rendered before the user explicitly states they would like to navigate to it, the page may be available by the time the user actually sees it, making the page load instantly.
Significant business benefits
Increased mobile browser visibility for content marketers: Google has started displaying AMP results in organic listings. You can identify these results by the AMP symbols, in green. These green AMP symbols will definitely lead to an improved click-through-rate because these mobile search engine results stand out from the rest.
Mobile search engine users will then begin to look specifically for AMP plugin pages since these pages load up quicker than the typical mobile pages.
Improved mobile search engine rankings
Since sites that are mobile-friendly are rewarded with higher rankings in organic mobile search results, pages developed with AMP will most likely rank higher than non-AMP pages, in the mobile results pages (MRPs).
Improved Advertisement visibility
Most people started a website or blog in order to make money. But the websites currently seem to have too many distractions. E.g. header image, navigational menu, sidebar, social share buttons, forms, popups, and other unnecessary elements.
But, with AMP, you can get rid of distractions on your mobile browser pages. When displaying ads from a third party on your Accelerated Mobile Pages, you deliver ads that load quickly but also grab the user’s attention.
User tracking made simple
Tracking users and site performance is pretty easy on AMP because there are analytical tools in place, where you can study your AMP versions in greater detail.
Publishers can utilize tag manager analytics to choose from two tags. These tags help to automatically track essential data, such as clicks/conversions, video and link tracking, visitor counts, new vs. returning visitors and more.
Technology companies, such as WordPress, Parse.ly, Chartbeat, LinkedIn, Adobe Analytics, Pinterest and, of course, Twitter, are also already supporting AMP.
Conclusion
AMP is truly powerful. As an upgrade to mobile-friendly pages, it helps you meet user’s expectations for speed and simplicity along with publisher’s expectations of reader engagement and monetization. To understand this further or discuss feel free to contact Quantian Technologies at contact@quantiantech.com