In order to comprehend why AMP matters, we must first understand what AMP is and how it works. A deep understanding of these concepts will help explain why this is an important part of the mobile web’s future and needs to be on your radar.
Let’s get started!
What Is AMP?
You know that frustrated feeling you get when you click on a mobile web link and the page takes twenty seconds to load? And the even more frustrating feeling when you realize it took so long to load because the site was loading pop-up ads and offers before loading the content? This is the struggle AMP aims to solve.
The AMP Project, or Accelerated Mobile Pages, was developed by Google with the desire to improve user experience across the mobile web by increasing the load speed for mobile webpages. That’s the simple explanation, we’ll get into the details in a minute. The project originally launched in early 2016 and has quickly gained momentum over the past year and a half. Chances are you’ve interacted with an AMP since then whether you realized it or not. The page format was primarily adopted by media and content publishers at first, but is beginning to spread to other industries as well.
It’s important to note that AMP protocol is designed for mobile pages, it’s in the name, and while it may work on desktop browsers the page would look parsed down and flat. So it’s not advised to use the protocol when your site is being accessed on anything but mobile.
How does it work?
The AMP Project at its core makes the mobile internet faster. Great! But how does it do that? Simply put, AMP removes the clutter on a mobile webpage and loads what’s important to the user: content. AMP improves load speed so much that the pages appear to load almost instantly. But let’s look at how that happens.
- AMP JS controls the entire load chain and prioritizes certain elements over others. This usually means that third-party elements and anything “below the fold,” meaning lower on the page than the user will initially see, are loaded only after the primary content at the top of the page.
- AMP’s custom properties also require that aspect defining ratios like width or height are set explicitly. This allows AMP JS to know the layout of your page before any of the assets are even loaded and the page can be laid out in advance. Additional layout calculations are then eliminated which prevents the frustration of a half loaded page and screen jumping as additional elements continue to load.