CYBOSOL InfoTech

The Case for Accelerated Mobile Pages (AMP)

AMP  

Smartphones and tablets have revolutionized the way we consume news, transact and connect. The uptake of phones continues to grow in double digits--BI Intelligence estimates the global market will hit about 2.1 billion smartphone units shipped in 2021. In tandem, mobile internet penetration is expected to grow to 61.2 percent by 2018. Zenith’s forecast in 2016 indicated that by end of 2017, 75% of US’s online content consumption will be mobile.

It’s exactly two years since the Accelerated Mobile Pages (AMP) project was launched. AMP is an open source project that aims to make a better mobile web by building content pages that render fast. A Google statement, a key partner to the AMP project at the launch of AMP in 2015 said in part:

“We want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously. We also want the same code to work across multiple platforms and devices so that content can appear everywhere in an instant—no matter what type of phone, tablet or mobile device you’re using.”

In this post, we provide an overview of how to implement AMP pages and then share benefits of AMP based on recent case studies.

How AMP Works

AMP uses AMP HTML, an open framework built entirely out of existing web technologies, which allows websites to build light-weight webpages in the following ways;

1. Execute all AMP JavaScript asynchronously

2. Size all resources statically

3. Don’t let extension mechanisms block rendering

4. Keep all third-party JavaScript out of the critical path

5. All CSS must be inline and size-bound

6. Font triggering must be efficient

7. Minimize style recalculations

8. Only run GPU-accelerated animations

9. Prioritize resource loading

10. Load pages in an instant

Here is a short 7 mins video to illustrate how AMP works

 

AMP consists of three primary parts:

• AMP HTML: Certain tags have equivalent custom tags, for instance the image tag while other tags like conditional HTML comments are prohibited.

• AMP JS: This is a JavaScript framework dedicated to mobile pages that manages asynchronous loading. Author-written JavaScript is not permitted with AMP.

• AMP CDN: A proxy-based content delivery network, that serves only valid AMP pages, allows AMP pages to be preloaded efficiently and safely and deliver performance optimizations.

AMP implementation calls for developing two versions of article pages—the original and the AMP version. These two versions are "paired" together, information about the AMP page is added to the non-AMP page and vice versa, in the form of < link > tags in the < head >.

Implementation requires adding the following to the non-AMP page:

< link rel="amphtml" href="https://www.example.com/url/to/amp/document.html" >

And this to the AMP page:

< link rel="canonical" href="https://www.example.com/url/to/full/document.html" >

Some HTML tags have restrictions for AMP, so you need to rewrite your site template to accommodate the restrictions. Detailed implementation can be accessed here.

Evidence-based Benefits of Implementing AMP

Mobile page load speed is an important factor for any website. Recent studies have reported that close to 50% of people expect a web page to load in two seconds or less. The number of page elements and the images are mainly responsible for affecting page load speed. Modern publishers produce rich media content like images and videos to make their stories more interactive and engaging. AMP delivers a better mobile experience for content consumers who need to access new stories quickly across geographies and devices. This helps publishers to build bigger audiences and in turn monetize their content. A recent update to AMP is the AMP preconnect API that can be used to serve HTTP requests faster—a page can be rendered before a user decides to navigate it.

Thrillist, a US based online media brand that is reported to have converted all of its article and venue pages, representing 90 percent of the site to AMP. Overall, Thrillist reported a 70 percent growth in traffic, with 50 percent attributed AMP. You can find this case study here.

At the 2017 SMX Advanced conference, a Google’s executive confirmed that websites all shapes & sizes are now doubling-down on AMP, citing Terra, an online news portal in Brazil which had seen AMP pages load 2X times faster than non-AMP, mobile pages 2X time spent on AMP pages than on other mobile pages (BR) 3,175% increase in total clicks (all countries).

As organic digital marketing channels like social media and Search Engine Results Pages (SERPs) become increasingly competitive, many organizations are looking to paid channels to attain their growth objectives. Mobile advertising is on the rise globally with many brands looking to invest this year and the coming years. Optimizing advertising landing pages for the mobile web leads to better Ad performance from consumers. Here is a guide on how to use Google AdWords and other platforms for AMP pages to get better results.

Slow loading pages hurt the user experience and often lead to traffic bounces. In the past few years Google incorporated site speed as a ranking factor in Search Engine Results Pages (SERPs) in part to get websites to deliver fast loading websites. Therefore by having fast loading mobile pages is an up-vote in Google search enabling content discovery in a critical channel where most searches are now happening on mobile than on desktop.

E-commerce websites more than any other category depend on rich media formats to fully communicate product features and functions or illustrate a service. A common belief is that AMP is only meant for news websites and blogs, however, AMP now supports to build many aspects of an e-commerce site.

In conclusion

Website speed is a critical aspect of any website to deliver a great experience and enable monetization. AMP is still a relatively new technology but has positively impacted websites performance and traffic based on some of the case studies cited here.

Are you a publisher or operate an ecommerce store and looking to get started with AMP implementation or a custom web development project? Schedule a free consultation with CYBOSOL.