What is Google AMP?
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.
The first is a markup language with custom tags and properties. Adapting from HTML to AMP HTML is quite simple, as it’s a subset of HTML commands focused specifically towards authoring news content. More information can be found about these adaptation requirements here. AMP JS is a framework designed to optimize against JavaScript’s worst practices that hurt download times. Much of its design is focused around features like asynchronous loading of scripts; resource download optimizations, and isolation of third-party scripts to prevent performance issues during page loads. AMP CDN is an optional Content Delivery Network which caches AMP-enabled pages with automatic performance optimizations.
Google has provided a helpful demo of what an AMP feature will look like inside search engine results.
How does it work?
AMP requires you to maintain two versions of any article page, the original and the AMP version. In AMP pages, some standard news article elements — such as on-page comments — aren’t available due to usage restrictions on form elements and inline third-party JavaScript. AMP HTML further limits the usage of certain tags to avoid performance issues on page load. A full reference list is posted here.
AMP-enabled pages achieve their performance gains by making sure JavaScript loads asynchronously, or independently, in relation to the rest of the page content. Certain elements, like audio, video, and images must be marked up with AMP-specific customizations to take advantage of the AMP JavaScript runtime, which then uses features like lazy-loading, above-the-fold element render ordering, and pre-fetching of assets to optimize page download times.
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?
The only third party JavaScripts allowed are restricted to iframes, and any recalculations of style and layouts is restricted by the DOM size. This means any calculations within iframes are rapid in comparison to page style or layout recalculations.
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.
AMP-enabled pages, by loading JavaScript independently from the page content and by interpreting in-line styles only, are designed to avoid making HTTP requests to the server until fonts have started downloading, further optimizing page download times by reducing the amount of back and forth between your browser and the web server.
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.
Want tailored recommendations for optimizing your site’s responsive performance on mobile devices using tools like Google AMP? Contact our expert development team or email us at [email protected].
