Are You AMPed? Get Hyped to Learn This Quick-Loading, Open-Source Framework

Thinking of trying AMP? We’re not talking about the energy drink.

The AMP we’re talking about stands for Accelerated Mobile Pages, an open-source framework to enable websites to load faster and distribute content quicker. Essentially, it’s a faster version of HTML called AMP HTML, and a ton of businesses are jumping on the AMP bandwagon.

According to ampproject.org, over 1.5B AMP pages have already been published. How do you know it’s an AMP? Every AMP page has an AMP logo in search results to indicate a faster, better mobile experience.

It sounds easy, but we’ve found that there are a few key components to this framework.  Here’s a little about each one – and how they’ll help you implement
AMP on your web page:

  • Speak the AMP HTML Language.
    The AMP HTML is like a usual HTML document, but with custom AMP properties. For example, <amp-img> replaces <img> tags.  Here’s the full list of components and tags on AMP.
  • The AMP JavaScript Library Delivers Your Page Super-Fast.
    Thanks to resource loading and adding custom tags to your HTML, the biggest advantage is asynchronous external source loading. Meaning, nothing on the site can block anything else for loading.
  • Use the AMP Cache to Serve Up the Best User Experience.
    Google’s AMP Cache is a proxy-based content delivery network placed on Google, which enables faster website rendering. Once you visit an AMP page, Google caches its contents and publishes it to the web. This way, every person who visits the same page will have the optimized digital experience that’s loaded straight from the Google AMP Cache. On top of that, AMP Cache includes a validation system to verify whether the page is working properly and meets all AMP requirements. All you have to do to publish to AMP Cache is use the right URL format.

AMP is best suited for mobile pages that have some sort of feed incorporated on their page, such as a blog or content publisher.


TESTING WITH AMP

There is an AMP component that allows you to conduct user experience tests on an AMP page called <amp-experiment>.

There are three steps to conducting an experiment on your AMP page:

  1. Configure the experiment.
  2. Implement variations.
  3. Collect the data.

<amp-experiment> is a custom element in which you specify all experiment behaviors through  a JSON configuration. Here is a code sample that configures an experiment called “recommendedLinksExperiment.”

As you can see, you can implement code on how the variants should behave.

In the example below, the control variant of recommendedLinksExperiment that has elements with the class of extra-links will not be displayed for the user to view.

For collecting data, AMP-experiment has a couple of reporting features that are extremely helpful.

One thing is for sure – AMP sites provide faster content delivery while browsing on a mobile device. But there is no need to rush to implement Accelerated Mobile Pages if you aren’t a blogger, content publisher or news portal.

 

Jason Schmitt, Optimization Engineer
As a web developer, Jason has a passion for creating web solutions for partners around the world. He holds a bachelor’s degree in Software Information Systems with a concentration in Software Engineering from the University of North Carolina at Charlotte.

 

Categories Technology & DevTags , , , , , , , ,