What is Google AMP and how does it work?

Google AMP

AMP stands for Accelerated Mobile Pages. It is an open source project designed to help web publishers create mobile-optimized content that loads instantly on all devices, according to Google. “We want webpages with rich content like video, animations and graphics to work alongside smart ads, and to load instantaneously,” Google wrote in a blog post. “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.”

When a page isn’t optimized for mobile use, you risk the chance of increased bounce rates—30% of users leave a page if it does not load within 3 seconds. The end product of AMP drastically improves the performance of mobile websites on the internet—so much so that the load time is often appearing to be instant. It relies on existing technologies and works in collaboration with the Internet’s biggest names. AMP is not a totally different technique for creating pages—it actually consists of normal HTML with a few restrictions and added specialized tags and does not require a lot of additional work. AMP JS works to make sure that the most important content is loaded quickly and clearly, while third party content such as ads are not at the forefront so that users will see their preferred content as soon as possible. AMP has discovered that content that loads quickly leads to faster reading, and in turn that results in more consumption.

Rudy Galfi, Google’s AMP product manager, said at a recent marketing conference that the median load time for AMP-coded content is 0.7 seconds. In comparison, the median load time for non-AMP pages is 22 seconds, or “the time it takes for you to leave the site and never come back,” Galfi said.

On February 23, 2016, Google officially integrated AMP-powered web pages into its mobile search results. AMP-coded pages appear in a mobile search results “carousel,” and they feature an AMP icon that looks like a thunderbolt, as well as the acronym “AMP.”

 

How does Google AMP work?

AMP started as a Google and Twitter project. By now, other companies have rolled out AMP websites to help their websites load quickly on mobile. Why? The internet – from fiber internet to 4G mobile data and more – offer customers faster and faster access. Consumers have gotten used to this trend and have grown to expect that level of speed in all their dealings. Businesses don’t want to miss out on possible conversions because a customer gets frustrated waiting for a mobile page to load.

So how exactly do companies create websites that load faster? It all comes down to coding. AMP pages are made from a combination of less-complicated code and extreme caching (the technology that allows web pages you’ve accessed before to load faster). AMP sites traditionally feature:

  • Stripped down HTML – this is the most important component, and the criteria for the AMP page to be mobile-valid features very strict HTML guidelines
  • Streamlined CSS
  • Almost no JavaScript

These websites are designed less with readability in mind, though it is possible to incorporate responsive, sleek, modern design elements into this lightened-up code style. Images and other graphic elements don’t load until a user scrolls to the part of the page where the image would appear. These new coding rules allow for much faster response times.

When put into action, AMP consists of AMP HTML, the AMP JS library, and the Google AMP Cache.

  • AMP JS

The AMP JavaScript (JS) library uses all of the best performance practices, is managing loading resources, and gives the user their custom tags—all to make sure that your page is rendered as quickly as possible. One of the biggest advantages is that is has every element, even those from external sources, synchronized so that nothing within the page may be blocked from rendering.

Other techniques used for performance include pre-calculating the layout of all elements on page before the resources can be loaded, disabling slow CSS selectors, and sandboxing all iframes.

  • AMP HTML

This is HTML that has a number of restrictions related to dependable performance and a few extensions for putting together rich content that is more than just the basic HTML. The AMP JS library works to help render AMP HTML pages in a speedy manner, and Google’s AMP Cache works to aid the cache of AMP HTML pages.

In short, AMP HTML is standard HTML that incorporates custom AMP properties. Most of the tags in AMP HTML are standard tags, but some of them are replaced to fit with the AMP components. These custom elements work to ensure that common patterns are simple to use.

  • Google’s AMP Cache

Google’s AMP Cache is a delivery network that is proxy-based, used to distribute all valid AMP documents. It transmits AMP HTML pages, then caches them, and then automatically improves upon their page performance.

 

How Does AMP Benefit Your Website?

There are several ways having a faster website can help your business. Faster AMP mobile websites can help your business:

  • Have higher mobile rankings, so you can appear sooner on search
  • Impress customers with a faster experience
  • Convince users to stay on the page longer and interact with content
  • Increase conversion rates

 

AMP Constraints

  • No custom JS/Plugins allowed
  • All CSS in AMP Page should not be more than 50 KB
  • Multiple Versions required (AMP and No-AMP)
  • Increased development time to implement AMP and Non AMP layouts
  • Strict validation rules
  • Inline CSS styles

 

Conclusion

The future of AMP as a long-term coding and design solution isn’t clear, but for the time being, websites that are built AMP compliant do receive a whole host of benefits, including higher quality traffic and even increased revenue.

If you’re building web pages for your business, it makes sense to consider AMP as a technique for reaching more customers and providing a better customer experience. With so many people consuming content primarily through mobile, optimizing that experience is something that no business can afford to ignore.

No Comments

Leave a Comment

Please be polite. We appreciate that.
Your email address will not be published and required fields are marked