Accelerated mobile pages
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.
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.
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:
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.
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.
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 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.
- 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.
- 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.
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 email@example.com