AMP’lify Your Website: Google AMP 101

Edward
Drupal Developer
Apr
04
2016

AMP’lify Your Website: Google AMP 101

AMP’lify Your Website: Google AMP 101

Google just recently released a new open-source initiative called the Google Accelerated Mobile Pages (AMP) Project. The AMP project aims to implement a performance baseline to provide a better mobile web experience for all users. Its goal is to prioritize speed and increase page loading performance - which is essential for any organization interested in retaining an audience in today’s dynamic, fast-paced culture.

WHAT IS AMP?

So, what is AMP, exactly? AMP is an extension of Google’s growing “mobile-first” approach toward loading web pages faster (about 85% faster, according to Google) through a limited set of allowed technical functionality defined by the AMP spec. The AMP project relies on AMP HTML, which is essentially HTML extended with custom AMP properties - and has a strictly defined set of pre-processing tags such as amp-ad, amp-embed, amp-img, amp-pixel, and amp-video. To ensure fast rendering of AMP HTML pages, the AMP JS library is used to implement all of AMP’s best performance practices.To further increase performance, the Google AMP Cache is available as an optional proxy-based content delivery network that delivers AMP documents and fetches all content—including images, the document, and JS files—from the same origin through HTTP 2.0.

AMP is currently being adopted as a protocol by an increasing list of organizations and publishers including Google, Twitter, and Hearst.

HOW CAN AMP HELP MY COMPANY OR WEBSITE?

Now that I’ve explained the basic concept of AMP, you may already see how AMP can help your company or website. According to research, the bounce rate can be as high as 58% for web pages that take up to ten seconds to load. With AMP, mobile web pages are rendered faster, resulting in more pageviews. Increased pageviews usually correlate in an upward trend with ad views, which leads to a higher revenue stream.

Mobile advertising has been a part of the problem of mobile experience expectations being unmet - this is especially true as a result of slow content load, accidental clicks, and irrelevance of banner ads. Digital marketers are aware that these user experiences lead to better ad engagement and happier customers. The introduction of AMP as a mobile standard strives to fix those issues and will also likely challenge the hot issue of ad blocking by delivering higher quality ads that do not negatively impact mobile user experience.

As if speed and higher page views weren’t big enough incentives to switch over to AMP, digital strategists and marketers will be excited to know that AMP-enabled articles will rank higher in SERPs for improved SEO.

AMP SOUNDS FANTASTIC! ARE THERE ANY CAVEATS?

AMP is still a relatively young project and as a result, updates and implementation of new features are still expected to be made. This has been a recent topic of conversation here at Mediacurrent. Dawn AlyMediacurrent’s Director of Digital Strategy, is intrigued by AMP and its potential, “We know how AMP impacts SEO because we know how speed impacts SEO.” Knowing this, she adds that "AMP is a relatively new standard, we currently don’t know the nuances for SEO between AMP and really fast mobile websites.”

Another issue for debate is whether or not Google is getting too much control in today’s “open web” movement to publish content and web applications in open standards (versus proprietary and non-standard web solutions). Zack Hawkins, Theming Manager at Mediacurrent, believes that even though AMP offers performance and convenience, the idea of building web pages in Google AMP’s non standard HTML format in order to rank higher certainly contradicts the definition of the “open web.” He adds that while AMP provides one method, you don’t necessarily have to use that method to make a fast page.

While AMP does allow styling using custom CSS, it disallows the implementation of custom Javascript. Optimized to the AMP spec, AMP JS manages resource loading for all documents and because it is asynchronous, the tradeoff of using it is to prevent synchronous Javascript, which may block rendering during page load.

My take is that AMP is still not the perfect solution for every organizations’ needs, but as an open-source project, the evolution of features and compatibilities are limitless. A good example of a recent update is the integration of AMP with Analytics in February 2016, which is key to integrating AMP pages to an organization’s analytics vendor.

If you are not convinced about AMP just yet, it is perfectly fine to wait a few months to see how this project matures, but it definitely worth considering - especially if SEO and user experience is a priority for your organization.

I AM A DEVELOPER. WHAT DO I NEED TO KNOW?

As a developer, the main question that comes up is, “How do I AMP’lify my website?” Depending on the website platform, the way to approach it may vary, but the final result will be an AMP HTML website. 

1. All AMP HTML pages start with the AMP boilerplate (note the last script in <head> that loads the AMP JS library:

2. <img> tags are replaced with <amp-img>

3. Styling is done in an inline stylesheet in the <head> (there is a 50,000 bytes limit).

4. After previewing and validating (there is no preprocessing or build step required), you’re all set to go!

The best way to find more technical documentation on AMP is on the AMP Project Docs Page. For developers who wish to look into converting their CMS pages to AMP, there is a WordPress plugin and Drupal module available to accomplish this.

Stay tuned for an upcoming blog post on working with AMP in Drupal!

Additional Resources
Drupal Strategy Tactics and Tools | Blog Post 
Much Ado About Mobilegeddon | Blog Post 
Leveling up With SMACSS and BEM | Blog Post  

comments powered by Disqus