AMP, or Accelerated Mobile Pages, is Google’s framework for fast-loading mobile pages. This enables publishers to hit two birds with one stone: increase page load times and improve user experience. And we’re not just talking about Google’s “Top Search” results; Google will display AMP’s anytime it’s detected.
Of course, there are many ways to advance page loads, and experienced developers can leverage a myriad of strategies to get it done. But mobile pages are a bit different.
Publishers move fast and many lack the dev resources required for an optimal mobile experience, which is why these pages will deliver huge benefits.
Three Basic Parts to AMP
- AMP HTML: AMP HTML includes custom tags and a few unique restrictions. You can start here, or edit your regular ‘ole HTML to AMP markup. But take note: there are several required markups that you can’t miss.
- AMP CDN: This one’s optional. It caches your AMP-designed pages for a layer of additional optimization.
The Major Benefits
Readers are glued to their mobile phones and tablets. Publishers try to target them there, but that experience often leads a lot to be desired: painfully slow load times; lost readers; lost revenue. This is the experience Google is seeking to improve with AMP.
- Mobile web pages that work: Content-rich pages, packed with images and video, will load beautifully
- Content that works across platforms: It doesn’t matter what kind of phone; pages will load instantly.
- Buy-in from more than 30 publishers around the globe: It’s expected that other Google products, like Google News, will eventually adopt AMP. It’s already in use by big name brands like Pinterest, LinkedIn, and WordPress.com.
- An open-source framework: Shared components and shared input came together to create a great mobile experience. You can see it all on GitHub.
- Free cache servers. Readers experience a seamless mobile delivery, from anywhere, with Google’s free, worldwide content delivery network (CDN).
- Support for ads: Sites can stay true to their choice of ad networks. AMP supports many ad formats and technologies, without compromising speed.
- A/B testing functionality: What would digital marketing be without testing and iterating? As of two weeks ago, AMP now allows for experimentation, including specifying the flow of traffic and the ability to review analytics reporting.
Tips on Using Accelerated Mobile Pages
There are several things to keep in mind if you’re planning to implement these pages. At the very basic level, using AMP means you need two versions of any page: the regular version and the accelerated version. This isn’t necessarily something you need to stress over—but you do need to be prepared to manage it all.
A few other points of interest with implementations:
- Images must adhere to the amp-img. You’ll need to note an exact height and width. Slideshows, image lightboxes and social media embeds have their own extended components. For videos that are hosted locally, use the amp-video custom tag. But, for YouTube, use the amp-youtube extended component.
- CSS must be in-line, less than 50KB. Check your site template – does it need rewriting?
- No form elements and third-party JS are allowed.
- Your original blog articles will need modifications.
Each version must include this tag: <link rel=”amphtml” href=”http://www.example.com/blog-post/amp/”>
Don’t forget about Google’s AMP Viewer
One final tip. When Google links to an AMP page, readers will see it in a Google-hosted viewer. This preview tool shows anyone how the pages will look. The experience on Google is that it opens in a new page, with a blue bar across the top. In fact, you can try it on your phone now.
Notice how you can swipe through AMP content galleries, or return back to your original search results. For viewers, this gives them the benefit of seeing a preview before making a commitment to going to the full web page. This certainly puts more pressure on publishers to create a compelling AMP, but it’s hard to argue that it’s not a great experience for viewers.