Reading Time: 4 minutes
Google AMP (Accelerated Mobile Pages) is making waves by rendering static content as quickly as possible on mobile devices, ensuring faster load times. With a few simple extensions and adherences to select restrictions, AMP is an extremely effective tool for reliable performance and an optimal mobile user experience.
WDG technology experts break down how to easily implement Google AMP for your website.
What is Google AMP?
Google-backed AMP is an open-source initiative that works to enable websites with the ability to have pages load quickly on mobile devices. As a framework for creating mobile web pages, AMP has three components: AMP HTML, AMP JS, and APM CDN.
Google has provided a helpful demo of what an AMP feature will look like inside search engine results.
How does it work?
By using AMP HTML, the only styles allowed are those that stay inline, removing HTTP requests from the rendering path. While the inline sheet of style has a threshold of 50KB, the developer should still be careful in inputting the CSS in the proper manner.
What considerations need to be made for AMP?
Recalculations can be expensive as the web browser continually needs to adjust the entire page layout. Since the DOM readings happen before anything is written in AMP, the maximum of a single recalculation of styles per frame in AMP is ensured.
External resources must state their size within the HTML of the page so AMP can determine its size and position before all resources are downloaded. This is because AMP loads the entirety of the page layout before resources have been downloaded, working to disconnect document layout from resource layout with a single HTTP request.
Multimedia requires specific considerations, such as the amp-img element for images which must include an explicit width and height. Animated gifs require a separate amp-anim extended component. Custom tags must be used to embed locally hosted videos via HTML5 and YouTube, and extended components must be used for each social media platform.
AMP controls the priority when downloading resources. Advertisements and images are downloaded only if they have a high view chance by the user, and AMP will prematurely fetch any resources taking a long time to load. Therefore, items will load quickly, and the CPU is used only for what is viewed.
Optimizing webfonts in articles is a key element to page performance, and can be controlled by adding the proper style customizations in CSS. You can specify font subsets, deliver optimized font files per browser, allow preloading of certain font resources, and more. See more information here.
How do analytics work within AMP?
AMP offers analytics tracking to prevent multiple sources from slowing down the site. You can either enable the Amp-Pixel element or the Amp-Analytics extended component. The first is a tag that tracks page views using a GET request with variables for tracking. The latter is a slightly more advanced analytics tool allowing the site manager to implement greater levels of configuration for analytics interactions. You are able to configure Google Analytics as well via specific implementations.
How do you implement AMP?
It’s easy to get started on a CMS like WordPress, where the Automattic/WordPress team has already developed a plugin that is regularly updated on GitHub.
- From the amp-wp GitHub page, download the ZIP file and install the plugin as you would normally. Once installed, simply append “/amp/” to an article page.
- The Google Search Console will begin picking up on the AMP version of your articles, allowing you to validate articles in bulk as needed.
- You will also need to have a valid schema markup on your pages, which you can test using Google’s Structured Data Testing tool.
- Enable the amp-analytics and/or Google Analytics with the WordPress plugin.
For a thorough breakdown of how to implement AMP, check out this helpful guide from Search Engine Land.
As an extremely accessible framework for creating fast-loading pages, Google AMP enables content managers to improve speed, reduce load time, and possibly reduce bounce rate for an improved mobile user experience. These optimizations are easily enabled with a few easy extensions without altering the primary mobile web experience. The added bonus of Google integrating this directly into its juggernaut of a platform doesn’t hurt either.