What is AMP? The Complete Guide to Accelerated Mobile Pages

SECTION 1: What are Accelerated Mobile Pages?

The mobile-first mindset is here to stay – the statement holds true from both the business and consumer side.

To say users, consult their mobiles before making a purchase would be a gross understatement. Mobile internet usage has surpassed desktop mobile usage all over the globe. Even countries such as India, Mexico, and Indonesia have more than 4 times higher smartphone vs. desktop usage:

There are 30 billion mobile moments (the moment a customer consults their phone and expects an immediate answer) every day in the US alone. This means every day your brand has 30 billion mobile opportunities to offer something to users that they want.

And still mobile ad spend lags behind mobile media consumption:

There is a reason why users spend more time browsing on mobile instead of buying – users crave instant gratification more when on their mobile devices.

Answer this question – how long do you wait for a mobile webpage to load?

According to data collected by Google and SOASTA 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 the aforementioned 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 6.9 seconds to load, that’s more than double the amount of time 40% of users wait before abandoning the page.

How web page speed impacts bounce rate

Speed is an important factor when measuring bounce rate for mobile web pages. Before we delve into this further it’s important to explain that speed is primarily considered in two facets for mobile site bounce rates i.e. DOM ready time and full-page load time:

1. DOM ready time: DOM ready time is the amount of time it takes for the HTML code of the page to be received and parsed by the browser – it is the greatest predictor of bounce rate. Even though the user may not be aware of when the HTML code is being received and parsed, the code has to be loaded before any page elements such as images can be loaded. If the HTML code takes too long the website loading time is slow. To speed up your mobile web page’s DOM ready time it’s best to avoid the use of JavaScript that blocks and prevents a browser from parsing the HTML code. Page elements that use JavaScript include third party ads and social widgets that have to be fetched from an external server before the page can be loaded.

2. Full-page load time: Full-page load time includes the time it takes images, fonts, CSS codes etc. to load on a webpage. A faster full-page load leads to lower bounce rate:

To ensure that your webpage has a faster full-page load time you should optimize images, fonts, and avoid third-party files that have the potential to slow load time.

Page load time is one of the strongest reasons of page bounce, what’s worse is that users will not only abandon the page, but, research suggests 79% of users won’t come back once they’ve had a slow experience on a webpage.

Consider these startling revelations about page load speed:

• The average mobile site takes 19 seconds to load over a 3G connection, and 77% of mobile sites take over 10 seconds to load.
• Google found that conversions lower by 20% for every additional second a webpage takes to load. To compare, sites that loaded in 5 seconds had 2x more mobile ad revenue than sites that loaded in 19 seconds.
• 61% of users are unlikely to return to a mobile site that they had trouble accessing.

What does this mean?

If mobile page load isn’t instant, not fast enough for the user, they’ll bounce, and probably won’t come back.
To ensure that this doesn’t happen to your mobile web page, it’s important you AMPlify your mobile websites and landing pages.

What is AMP?

Google launched the Accelerated Mobile Pages open-source project to ensure that mobile webpages operate at optimal speed.

The AMP project aims to ‘build the future web together’ by allowing you to create web pages and ads that are consistently fast, beautiful and high-performing across devices, and distribution platforms.

AMP was built in collaboration with thousands of developers, publishers, websites, distribution companies, and tech companies. More than 1.5 billion AMP pages have been created to date, and more than 100 leading analytics, ad tech and CMS providers support the AMP format.

When you create mobile pages on the AMP format you get:

1. 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.

2. 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.

You’ve likely clicked an AMP page before, you just didn’t realize it. The only thing you might have noticed was how instantly the page after you clicked. AMP-built web pages have a lightning bolt indicator in the search result.

Here’s how you can recognize AMP in search results:

This is what an AMP page looks compared to a normal web page:

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.

Users have certain expectations when they’re on their mobile devices, they want meaningful, relevant, and faster experiences – to ensure your target audience’s expectations are met AMP are your best bet.

This guide will take you through everything you need to know about the AMP open-source project. We’ll go through the exact procedure of how AMPs work, and what makes the pages load so fast.

The guide will also feature case studies of how using AMPs helped increase conversions for businesses in varying industries and the benefits you’ll get when you AMPlify your pages. The last section will discuss what Accelerated Mobile landing pages are and why you should create the pages to offer visitors a faster and more relevant landing page.

SECTION 2: How does AMP work?

Google launched the Accelerated Mobile Pages (AMP) open-source framework in February 2016. The framework was built because there was a need for creating optimized, tightly integrated user experiences, instead of the clunky and slow mobile experiences that users deal with on a daily basis.

Google started the AMP project to create a framework that would provide an exact path to creating optimized mobile web page experiences. The AMP open-source project is well documented, easily deployable, validatable, and opinionated about putting the user-first in web page design.

Since its launch almost two years ago 25 million domains have published more than 4 billion AMP pages:

Since its launch not only has the number of AMP pages increased, but so has their speed, the median time it takes an AMP page to load from Google search is now less than half a second.

AMP leads to a 10% increase in website traffic with 2 times increase in time spent on page. Ecommerce websites that use AMP experience a 20% increase in sales and conversions compared to non-AMP pages:

AMP helps businesses create streamlined, clean, and relevant versions of their webpages, giving users a faster mobile web experience.

Chartbeat analyzed data from 360 websites using AMP from June 2016 – May 2017 to find out that a typical publisher who uses AMP pages saw a 16% of all mobile traffic on their AMP content.

AMP pages load roughly four times faster than standard webpages, plus users engage 35% more with AMP pages than with standard mobile web pages:

Now that we know why you should be using AMP pages, let’s have a look at how AMP works, how it compares to responsive web design, Facebook’s Instant Articles and Progressive Web Apps.

The 3 core components of AMP

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. The simplest AMP HTML file looks like this:

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. The JS also uses other performance techniques such as sandboxing of all iframes, the pre-calculation of the layout of every page element before resources are loaded and the disabling of slow CSS selectors.

AMP Cache

The Google AMP Cache is used to serve cached AMP HTML pages. The AMP Cache is 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.

To maintain maximum efficiency AMP Cache loads the document, the JS files and all images from the same origin that is using the HTTP 2.0.

AMP Cache comes with a built-in validation system that confirms a page is guaranteed to work, and that it doesn’t depend on external forces which could slow the page down. The validation system operates on a series of assertions that confirm the page’s mark-up meets the AMP HTML specs.

An additional version of the validation system is available alongside every AMP page. This version is able to log validation errors directly into the browser’s console when the page is rendered, enabling you to see the complex changes in your code that can have an impact on performance and user experience.

The three core components of AMP work in unison to make it possible for pages to load quickly. The next section will highlight the seven 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 block DOM construction and delay page rendering – both factors lead to 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.

AMP does third-party JavaScript in iframes, but it can’t block page rendering.

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.

AMP has the ability to separate document layout from size layout, only a single HTTP request is required to layout the entire doc. Because, AMP is optimized to avoid any expensive style layouts and recalculations in the browser, there isn’t any re-layout when the page resources load.

Extension mechanisms don’t block rendering

AMP doesn’t allow extension mechanisms to block page rendering, it supports extensions for elements such as lightboxes and social media embeds, and while these do require additional HTTP requests they don’t block page layout and rendering.

If a page uses a custom script it has to tell the AMP system that it will eventually have a custom tag, AMP then creates the required the tag so the page doesn’t slow down. For example, if the amp-iframe tag tells AMP there will be an amp-iframe tag, AMP then creates the iframe box before it knows what it will include.

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. Even if the sandboxed iframe JavaScript triggers multiple style recalculations, their tiny iframes have very little DOM.

The iframe recalculations are executed very fast in comparison to recalculating styles and layout for the 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.

The inline style sheet should have a maximum size of 75kb, though this is big enough for very sophisticated pages, it still requires the page author to practice good CSS hygiene.

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.

Style recalculations are minimized

In AMP pages, all DOM reads occur before all the writes, this ensures there is only one recalculation of styles per frame – so there’s no negative effect on page rendering performance.

Running only GPU-accelerated animations

To run fast optimizations you have to run them on GPU. GPU works in layers, it knows how to perform some things on these layers – the layers can be moved and faded. However, when GPU cannot update the page layout it gives this task to the browser and that’s not good for the page load time.

The rules for animation related CSS ensures that the animation can be GPU accelerated, this means AMP only allows animating and transitioning on transform and opacity so that the page layout isn’t required.

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 CPU is only used when resources are shown to users.

Instantly load 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.

AMP is optimized to not use a lot of bandwidth and CPU when pre-rendering web content. When AMP documents get pre-rendered for instant loading, the resources above the fold are actually downloaded, and resources that might use up a lot of CPU, such as third party iframes don’t get downloaded.

You can also use the following video to find out the ‘7 ways AMP makes your pages fast’:

Now that we know how AMP works, let’s see how AMP compares to Facebook’s Instant Articles, Responsive Web Design, and Progressive Web Apps.

AMP vs. Facebook’s Instant Articles

Facebook launched Instant Articles in 2015 to help publishers deliver an incredibly fast and immersive reading experience for people on Facebook. Facebook’s Instant Articles are:

• 10 times faster than standard mobile web articles
• 20% more Instant Articles are read on average
• 70% readers are less likely to abandon an Instant Article

Instant Articles helps publishers create fast and interactive articles on Facebook. They provide you with the following advantages:

• Fast and responsive: Instant Articles load instantly no matter what connection or device the user is on. The Articles are easy to use as they transform for the mobile storytelling experience.
• Interactive and engaging: The immersive experience of the Articles make them more interactive, which is why Instant Articles are shared 30% more often than mobile web articles. The help amplify the reach of your stories in News Feed.
• Easy and flexible monetization: Monetization is an integral part of Instant Articles. To grow your business with the Articles you can extend direct sold ads, and fill available ad inventory with Facebook’s Audience Network, and even create native branded content.

AMP pages and Instant Articles both provide users with a fast loading time, which helps lower page bounce rate and increase engagement. In fact, Facebook’s Instant Articles load even faster than AMP pages:

However, the adoption rate of AMP pages is much higher than Instant Articles and that’s largely because Facebook increasingly prioritizes video over text articles in its News Feed. This has led to several publishers stop using Instant Articles, including New York Times and The Guardian.

According to Parsley, Google has overtaken Facebook as the top source of external traffic for publishers. With Google now accounting for 42% of publishers’ external traffic:

When Facebook launched Instant Articles in surpassed Google as the dominant source of traffic to media and content websites, however, with the launch and success of AMP Google is back in the lead.

The success of the AMP project lies in the fact that it is an open-source initiative, not a business partnership. Instead of keeping users confined to a particular app, like Facebook did with Instant Articles, the AMP project is aimed at changing the way publishers create mobile web pages.

AMP vs. Responsive Web Design (RWD)

Creating mobile-friendly websites has been a priority for marketers since Google launched Mobilegeddon in early 2015. Responsive Web Design aimed at helping create webpages that focused on flexibility. A responsive webpage worked on any device or screen giving a better, more engaged mobile web experience.

At their core, AMP and Responsive Web Design both use almost the same basic building blocks to create a mobile page i.e. HTML and JavaScript. However, they have their set of differences that set them apart, such as:

1. RWD is focused on flexibility: Responsive Web Design adds flexibility to your website. You can create a page that automatically responds to a visitors’ screen size, this allows your page the reach and ability to give users a good mobile experience on a wide range of screen sizes. Responsive Web Design isn’t purely focused on mobile, but works for all devices and all user experiences.

2. AMP is focused on speed: The AMP open-source framework is focused on speed specifically mobile page speed. AMP has introduced instant rendering to mobile web content. By using inline style sheets, lazy loading, prefetching resources and other optimization techniques, the framework is able to load mobile pages instantly.

3. AMP works with a web page, RWD replaces a webpage: Though it is possible to use AMP exclusively on your pages, AMP can also be added to an existing non-responsive or responsive website, without a website redesign. However, to make a webpage responsive you need to redesign the page.

4. AMP provides a better user experience: There are two main factors that determine mobile user experience i.e. page elements being mobile friendly and speed. Though Responsive Web Design does well with scaling page elements to match the user’s screen it fails horribly at speed when compared to AMP pages.

5. AMP has JavaScript Restrictions: Responsive Web Design favors all third-party scripts and media libraries, the same cannot be said for AMP pages. To make the pages load fast the AMP framework has very limited JavaScript and CSS functionalities.

AMP works well for static pages – pages that don’t feature a lot of dynamic content, while RWD can be used for any type of page. However, responsive web pages take a little too long to load which causes visitors to bounce, probably never to return again. If you’re looking to give users a fast, mobile responsive experience you should consider using AMP pages.

AMP vs. Progressive Web Apps (PWA)

Progressive Web Apps is a mobile web app delivered through the web, it behaves like a native app, the main difference between PWA and native apps is that PWA don’t need to downloaded from Google or App store.

Progressive web apps operate inside the web browser, this makes it load instantly, even if your internet connection is not very strong. PWA uses pre-caching to ensure that the app stays updated, so that the user gets to see only the latest version.

The need for Progressive Web Apps arose from the fact that the top 1,000 mobile websites reach 4x more people than the top 1,000 native apps. However, those websites engage users for 20x fewer minutes, on average, than mobile apps do.

Which essentially means while mobile websites are apt at attracting visitors but not engaging them.

PWA are designed to look, feel, and work the way native mobile apps do. Users encounter them in a browser as they would any mobile website. After engaging with that site, the user is prompted to install the web app on their device. If they choose to install, the app downloads on their device in the way a native app would.

PWA are:

• Reliable – They load instantly even in weak network conditions.
• Fast – Respond quickly to user interactions with smooth animations and no janky scrolling.
• Engaging – They feel like a native app on the device, providing an immersive user experience.

When a mobile web app meets the necessary requirements outlined by Google, the mobile web app can be offered as downloadable to users.

These are the key differences between AMP and PWA:

You could choose to use AMP solely to create a fast but simple experience. You could rely on a progressive web app to create a dynamic but slower user experience. Or, you could start fast and stay fast by incorporating both into your web design.

Today, uses of AMP together with progressive web apps are becoming more prevalent, with developers leveraging both in three ways.

1. AMP as a progressive web app

If your content is primarily static and you can settle for AMP’s limited functionality, this option allows you to create lightning fast experiences as a progressive web app. AMP by example, is built like this — progressive web app entirely AMP-charged. It has a service worker, which allows offline access, as well as a manifest, which prompts the “Add to home screen” banner.

2. AMP to a progressive web app

Another way to use AMP and a progressive web app together is by thinking of your AMP page as the hook to your website. It catches the user with an instantaneous load, then reels them into your progressive web application. This allows you to combine the quick-loading AMP pages with a more dynamic PWA than the first option.

3. AMP in a progressive web app

As was the case with AMP vs. PWA, it doesn’t have to be all or nothing. You don’t need to build all your pages with AMP; you also don’t need to separate AMP and PWA’s as hook and rod either. Now, you can actually AMP only a small subsection of a single page, thereby decreasing its size and lowering its load time without the complete trade-off of dynamic functionality.

This involves using another form of AMP called “Shadow AMP,” which allows AMP to nest within an area of a web page. The results is AMP within the shell of a progressive web application.

Washington Post showcases an ideal example of PWA and AMP working together to bring better engagement and faster load times. When Washington Post initially made their website responsive, their speed was 3500 ms. When they adopted AMP, the page load time was reduced to 1200 ms, it was then further reduced to 400 ms with the help of AMP CDN technology.

After they adopted PWA to reduce website burden, users could enjoy lightning fast page load speeds without any interruption, and better user experience.

The Accelerated Mobile Pages project allows you to create mobile pages that load instantly, helping visitors better engage with the page instead of bouncing. The optimization techniques involved in creating AMP pages not only makes the page load time fast, but also gives visitors a good user experience.

The next section will focus on the exact benefits you get when you use the AMP framework on your pages.

SECTION 3: AMP benefits and restrictions

AMP ensures web pages load faster which helps with user experience and keeps visitors to stay longer on the page. AMP uses AMP HTML that helps mobile pages load faster, In fact according to Google’s Gary Illayes, the median load time for AMP pages is 1 second, which is 4 times faster than the average standard HTML page.

We’ve already discussed the link between page bounce rate and page speed, and we’ve seen a detailed account of how AMP works and how it compares to PWA, RWD and Facebook’s Instant Articles.

This section of the guide will focus on the benefits and restriction of AMP, helping you get a detailed account of what you’re instore for when you create AMP pages.

Benefits of AMP

When your mobile webpage loads faster, you automatically improve user experience and your KPIs. Owing to the instant loading of AMP pages, you are able to offer a consistently fast web experience to your users across all devices and platforms such as Google, LinkedIn, and Bing.

AMP offers the following benefits to your mobile pages.

Engages audiences

The median load time for AMP pages is under one second, this means that when a user lands on an AMP page, they get what they were looking for instantly. Because the page loads instantly they engage with the page longer and are more open to learning about your offer, which makes it more likely to perform the action you wanted them to take.

Maximizes revenue

Every additional second your page takes to load your conversions fall by 12%. This means if you want to engage audiences and increase your ROI you need to ensure your mobile page fulfils the speed expectations of your visitors.

The AMP framework allows you to give users a faster experience everywhere – including ads, landing pages, and websites.

Maintain flexibility and control

When you adopt the AMP format you have the ability to retain your own branding while taking advantage of AMPs optimized web components. You are able to use CSS to customize the styling of your web page, and use dynamic content to fetch data where needed.

You can also use A/B testing to test and create the best possible mobile user experience for your customers.

Reduce complexity in your operations

The process of creating AMP pages is pretty simple and straightforward. You have the ability to convert your entire archive especially if you use CMS, including Drupal and WordPress.

You don’t need to have any special skill set to optimize the code for each AMP page, the AMP format is fully portable and the AMP pages are consistently fast regardless of how user gets to them.

Maximize your ROI

Once created AMP pages can be distributed across a wide variety of distribution platforms simultaneously. This allows you to get your ads served on both AMP and non-AMP pages, which means you can build your ads once and deliver a memorable brand experience everywhere.

Create a sustainable future

The AMP project is an open-source initiative that protects the future of the web by helping everyone deliver a better, faster mobile user experience. You can joining the AMP project and build a sustainable future for your business on an open, faster web by joining the AMP project.

Provide a better user experience

Of course, the most obvious advantage of using accelerated mobile landing pages is that they’ll provide much higher user satisfaction. When one in two people can’t be bothered to wait a mere 10 seconds for a website to load, speeding up the process by 15-85% can have a huge impact on visitor happiness.

Get an SEO boost

Google’s algorithm takes page speed and mobile responsiveness into account. The faster your page loads on mobile, the higher it will be ranked on search engine results pages.

All AMP-enabled pages will appear in a carousel format even above paid ads in search results have a green lightning bolt underneath the title.

Though using AMP pages provides you with a lot of advantages, there are some disadvantages of AMP as well.

No third-party JavaScript

Because you don’t have the ability to use third-party JavaScript, you have to bid farewell to analytics and tracking capabilities that allow you to deliver highly targeted advertising experiences.

Not only that but with Google’s lighter version of JavaScript, page elements that require the transferring of data can’t be used on AMP pages.

No Google Analytics tracking

Google uses a cached version of AMP pages to users instead of accessing your servers, this is one of the reasons why AMP pages load so fast. Although the cache allows your pages to load faster, Google Analytics doesn’t track visits from users unless you make configurations to GA and apply separate tracking codes to your AMP pages.

Here’s how you can track AMP pages in Google Analytics with Google Tag Manager.

AMP pages come with their set of advantages and disadvantages, however, if you’re looking to give your visitors a fast and optimized mobile experience then AMP pros definitely outweigh the cons.

The next section will highlight case studies of businesses that used AMP to fulfil KPIs and boost ROI.

SECTION 4: AMP success stories

When we talk about mobile web pages, speed equals revenue. Research by SOASTA shows that even 100 ms delay in page load time can lead to lower conversions:

To highlight the impact AMP can have on mobile webpages Google commissioned Forrester Consulting to conduct a total Economic Impact™ study across publishers and e-commerce websites using AMP.

The research highlights 4 web companies who have been using the AMP format. Looking at the results of the 4 companies, Forrester created a model to forecast the expected return from implementing AMP over a period of three years.

Utilising this model, a website with a monthly site visit count of 4 million and a 10% profit margin could expect to get back the costs of implanting AMP pages and start seeing positive gains in a time of period of less than 6 months:

These are the primary results gleaned from the study:

• 20% increase in sales conversion rate. A/B testing conducted by the two e-commerce websites interviewed for this study demonstrated a 20% increase in the conversion rate on their AMP pages, which would drive over $200K in annual profit, based on the Forrester model.
• 10% year-over-year increase in AMP site traffic. An increase in site traffic results in additional sales and ad views, which would drive over $75K in annual profit for a site in the first year, based on the model.
• 60% increase in pages per visit. AMP pages performed positively for e-commerce and news publishers who both said that there was a 60% increase in people coming to the site and those people spent twice as long on the site with a small increase in return visitors of 0.3%.

AMP is a relatively new format, and obviously, you have to incur some costs with its adoption. However, the payoff of implementing the AMP format outweigh the initial cost.

Gizmodo uses AMP pages to become 3x faster on mobile

Gizmodo focuses on user experience, with half of their traffic coming from their mobile website, ensuring that the website was fast and clear was essential if they wanted readers to engage with their content on mobile.

The blog implemented a number of optimization techniques in order to increase their mobile engagement, such as improving page load times, removing unnecessary page scripts, lazy loading for below the fold page elements, and setting a fallback font for web fonts. Still Gizmodo team thought something more could be done to improve user experience for mobile users.

Head of Gizmodo’s Data Analytics, Josh Laurito felt this was their main challenge:

We delivered the same (large) JavaScript & CSS payloads to users on mobile and desktop, making it difficult to improve one experience without degrading the other.

Gizmodo found the solution to their problem by implementing the AMP framework in May 2016, and is currently publishing all their posts on AMP pages, they are even creating AMP versions of their previous posts.

Gizmodo has now published over 24,000 AMP pages and is receiving 100k visits to these pages daily:

AMP has helped make Gizmodo mobile pages 3x faster than the regular mobile website, and over 80% of Gizmodo’s traffic from AMP pages is new traffic compared to under 50% of all mobile sessions. Plus, the blog has a 50% increase in impressions per page view on AMP.

TransUnion increases conversions with AMP

TransUnion had a problem of slow loading mobile pages that were causing higher bounce rates and lower mobile conversion rates compared to desktop conversion rates. The credit reporting agency wanted to create a best-in-class mobile website on their CMS, HP TeamSite to improve user experience and get the high return on investment.

TransUnion started using AMP with the hope of increasing mobile conversions at an efficient cost per order. As their website was already mobile friendly, TransUnion didn’t need to redesign the content – they went online with AMP pages in a week.

The AMP pages loaded in 1.6 seconds on a 3G connection compared the non-AMP pages that loaded in 7.1 seconds. TransUnion’s AMP pages quickly starting bringing 3% more conversions, bounce rate was lowered by 26% and users spent 2.5x more amount of time on the website:

Implementing AMP pages provides users with a faster mobile experience which leads to a decrease in bounce rates and an increase in conversions.

When engaging mobile visitors, creating AMP pages gives you the highest probability of engagement and conversions.

The next section will highlight the importance of AMP landing pages, and how connecting optimized AMP ad landing pages leads to better landing page.

SECTION 5: Why you should create AMP landing pages

The stats have spoken – fast loading pages lead to a lower bounce rate and higher conversions. The best way to create lightning-fast pages is with the AMP framework.

Though the AMP framework was first developed for news stories and articles, it has since then evolved to include AMP Ad landing pages as well.

To ensure that mobile users experience doesn’t stay restricted to websites, the AMP framework has introduced AMP Ad landing pages – pages created in AMP HTML that load incredibly fast, in less than one second.

The Accelerated landing page or (ALP) loads fast because of the following optimization techniques:

1. Pre-connect to landing page: Typical ads don’t know the URL of the actual landing page. However, ads connected with ALPs always know the URL, this initiates a pre-connect request to the respective landing page, and the page loads instantly.
2. Pre-fetch landing pages: The non-CPU intensive resources that are visible on the first viewport of the landing page are downloaded before the user clicks the ad, so the page loads instantly.
3. Using Google Cache URL: when you input a canonical destination URL for a creative, the ad server can switch it to the AMP version of the URL (with trafficker consent) using the AMP URL API. The ad server can also embed code required by the creative to pre-fetch and pre-connect to the landing page. Ad servers like DoubleClick for Publishers (DFP) are integrating such features over the next couple of quarters to make trafficking of AMP landing pages easy.
4. No redirects: AMP eliminates redirects to the ad server, AMP only initiates redirect requests once the user has landed on the landing page. The format supports the amp-pixel component for third-party tracking redirects which can be performed on the landing page.

AMP-constructed landing pages are designed with the framework to continue the streamlined mobile experience that users initiate when clicking on a mobile AMP ad.

Here’s how AMP Ad landing pages compare to regular ad landing pages:

This is how fast an ALP loads once the ad is clicked, not only that but the user can easily go back to the content they were reading before the clicked the ad:

Accelerated landing pages give a better landing page to visitors because:

• Users will be more willing to click on ads when they know their ad expectations will be met.
• Marketers will benefit from increased user engagement, lower bounce rate and higher conversions.
• Marketers will benefit from boosted revenue with better ads while allowing their readers a way back to their content.

Creating ALPs seems like a no-brainer when you consider the fact that Google looks at landing page experience as one factor to determine ad rank, which ultimately contributes to your click-through rate.

And while publishers have embraced frameworks like AMP to speed up web content delivery on mobile devices, the marketing industry has not yet caught up. As more consumers and B2B buyers spend more time on mobile, marketers and advertisers are forced to adapt with mobile-optimized campaigns.

Businesses that are using AMP pages are already seeing massive ROI, so what’s holding you back from creating Accelerated landing pages?

How to create AMP pages with Instapage

In February 2018 we announced our partnership with Google to develop Accelerated Mobile Pages (AMP) functionality in the Instapage platform. They invited us to speak at their global AMP Conference where we discussed How to Balance AMP Limitations with Optimization Features.

Fast forward to May 2018 and Instapage now empowers marketers with the ability to create landing pages using the AMP framework. The AMP framework allows for faster page load speeds on mobile devices, enabling you to provide a better user experience for mobile browsing.

With this new Instapage capability, digital marketers can create AMP landing pages directly from our platform in a matter of minutes just by following these steps.

Step 1: Create a new page

Select AMP Page from the modal:

The next screen prompts you to name the page. This is different than the standard builder where it asks which template you wish to use (or build from scratch). AMP pages are built from scratch, so no template options are available.

Step 2: Add elements to the page

The second difference you will see is that Timer and HTML widgets are absent from the toolbar, but you still have the remaining widgets:

AMP does not support HTML/CSS or JavaScript so you won’t find those settings in the Instapage AMP builder. You will, however, still see these options:

Note: Collaboration (“Comment”) and Instablocks™ are both functional within the AMP builder. Unfortunately, heatmaps and Global Blocks are not applicable.

AMP landing pages have a 75KB limit, and each widget in the Instapage AMP builder is weighted. As you build a page, a validator operates in the background so that your page doesn’t exceed the 75KB limit. If you reach 80% of the limit, this warning indicator appears near the bottom of the screen:

Step 3: Create a variation to A/B test

Click “Create an A/B Test” and add a new variation or import one of your own:

With the new variation, you can either duplicate, pause, rename, transfer, or delete it at any time:

Step 4: Validate the page

As you continue building and approach the 75KB limit, another indicator appears requesting you validate the page to confirm it is within acceptable limits:

Should the page pass validation, you will see this on-screen message:

After you finish and click Publish, you will be notified if you exceed the 75KB limit:

Once validated, your page is ready to publish.

Step 5: Publish

WordPress and custom domains can publish AMP landing pages in Instapage. You can select either method after clicking the blue publish button:

For WordPress, install and sign in to the Instapage plugin on your website and publish your new AMP landing page to WordPress:

Otherwise, enter your domain and subdomain:

As soon as the page is live, you will see the AMP logo next to the page in the dashboard:

If your mobile pages are experiencing high bounce rates, and low visitor engagement because of slow page load speed, then creating AMP pages is a great solution.

The AMP framework deploys optimization techniques that helps with not only page speed but provides users a delightful mobile experience. Creating AMP ad landing pages helps you deliver optimized, fast, and relevant landing pages to your visitors.

Instapage is currently the only landing page platform that allows you to create mobile-optimized landing pages using Google’s AMP framework.Landing pages created with AMP have near instantaneous loading and smooth scrolling.

Start Instapage 14-day free trial today to create a better mobile browsing experience, improve your quality scores, and generate more conversions.