Google's Accelerated Mobile Pages is a new initiative meant to speed up the web on mobile devices. Google AMP allows the pages of participating publishers to load significantly faster on all smartphones and tablets, using customized HTML code optimized to work on resource-limited mobile devices. By taking a simplified approach to coding, Google AMP does away with many of the root causes of increased latency when loading mobile web content.
Here are 5 takeaways on the project:
1. Speed is king
While providing a faster experience for mobile web searchers, Google AMP gives publishers several avenues to create interactive content and pull in revenue from advertising. At the same time, AMP could decrease the demand for ad blocking software by helping to alleviate slow-loading digital advertising on mobile devices.
"The reality is that content can take several seconds to load or, because the user abandons the slow page, never fully loads at all," Google says in the user notes for AMP.
The new program is meant to create an overall better web experience for both consumers and publishers on mobile devices. The added speed keeps more user eyeballs on mobile sites, which in turn increases the potential revenue the site can earn.
"Users love fast pages, and with AMP, they often get instant loading," says Google engineer Malte Ubl, technical lead on the project. "When you know that clicking a link will only take you a few seconds, people tend to click more of them because they don't have to be afraid of waiting a long time to see whether the click was worth it. This is great for users. It is also great for publishers because they get more page views. It is, of course, also great for Google, because those same users are now much happier with their search results."
AMP code is currently open source and available on GitHub. The project is still in an early proof-of-concept stage, and Google has not yet worked out potential pricing models for publishers. For those wanting to take advantage of the company's research, there are several key best practices for getting started with AMP.
2. Know the restrictions
"The core technology behind the AMP project is AMP HTML," says Ubl. "It is just HTML that renders in all modern browsers, but [it] comes with special rules." In developing AMP, Google took the essential parts of HTML and shed aspects that decrease speed, like arbitrary JavaScript libraries. In fact, AMP does not allow any developer-written or third-party JavaScript on the primary page, nor input elements of any kind.
"AMP is able to provide performance boosts in large part because it enforces certain restrictions on developers," notes Ryan Chenkie, technical writer for developer-focused startup Auth0. "Probably one of the most notable restrictions is that you can't use any kind of input elements on the page, meaning no tags like input or textarea."
AMP also doesn't allow external style sheets or inline styles to format web pages, and developers can use only one style tag in the document head. Overall, style rules cannot exceed 50Kb. Since most content sites are focused more or less on displaying text and images, Google's thinking was that many of the JavaScript and CSS tags mobile users are forced to download are arbitrary and can be done away with altogether.
"This limitation might be a nonstarter for some sites," Chenkie says, "but I think that because AMP is geared towards content sites, they are making the bet that you can either do without the need for input elements or you can find ways around the limitation. For instance, if you needed to provide a sign-in for your site, you could have the sign-in page be a regular HTML page that redirects to an AMP page."
Another possibility is to outsource some of the input elements by linking to other services that are optimized for AMP. Auth0, for example, provides user authentication for sites that require it, like the subscription content services Google is championing with AMP. "Auth0 can be helpful for authenticating AMP sites because we offer hosted login boxes," according to Chenkie. "This means you don't need to worry about AMP not supporting input elements if your site requires user authentication."
3. Make it interactive
With all the restrictions around AMP, it might seem like Google wants to force mobile web developers back to the Web 1.0 era. But that thinking is wrong-headed. While the limitations declutter web pages, AMP's components allow for an engaging user experience by supporting features like video and image carousels.
"The HTML components that AMP provides are all pretty expressive," Chenkie says, "and things like amp-img, amp-lightbox, amp-youtube, etc., generally do what you expect them to quite easily."
Developers should note that AMP's components require a different approach than normal CSS coding. "Some configuration is required for things like amp-lightbox, where you need to define some CSS for the lightbox itself," Chenkie adds. "Others, like amp-youtube, are very simple and just require you to set an attribute for the YouTube video ID, and it will be brought into the page automatically."
AMP also supports components like dynamic animations, tweets, and Instagram embeds, so designers should have plenty of leeway to get creative. "Quizzes, polls, and other interactives elements are coming in the future," Ubl says. "We'll heavily invest in this ourselves and are hoping for community contributions to make AMP a solid tech base for many types of content."
4. Use the validator
Fortunately, Google provides a validator to understand if AMP will understand your code that it is easy to use. The validator will show you exactly where and how any code breaks AMP's rules.
To activate the validator, browse your AMP HTML code with #development=1 appended to the end of your site's URL after you finish or as you are in the process of coding.
"The things we validate are the best practices that ensure documents will load fast," Ubl says. "If a document is valid AMP HTML, it is also fast."
The validator ensures that your AMP HTML code does not include things like third-party JavaScript on the primary page or a CSS script that is too large. Ubl outlined the tech specifics of these optimizations in a slide presentation he recently gave to a group of developers in San Francisco.
5. Keep your advertisers
While AMP was built to speed up the mobile web, it doesn't mean that Google is completely shunning digital advertising, the bread and butter of most content websites. The company has been very clear, though, that an AMP website's content will load before any advertising. It is also committed to supporting the paywall and subscription systems of content sites.
"AMP currently supports five ad networks: A9, AdReactor, AdSense, AdTech, and DoubleClick," Chenkie notes.
Still, the advertising aspect of AMP remains very much in development. "The ads piece is one area that still has to be built out," a Google spokesperson says.
While third-party ad tools will be allowed, Google is pushing publishers to utilize advertising that provides the best user experience and keeps latency low. Chenkie says that advertising on AMP sites should, therefore, focus on that goal by keeping image size down, for starters.
"Everyone should go to their agency and ask them to follow modern best practices in web development," Ubl says of content sites that use outside ad agencies. "Things like GPU optimizable animations, usage of requestAnimationFrame, and advanced image compression can produce great looking ads that use fewer resources on mobile devices."
Keep learning
Take a deep dive into the state of quality with TechBeacon's Guide. Plus: Download the free World Quality Report 2022-23.
Put performance engineering into practice with these top 10 performance engineering techniques that work.
Find to tools you need with TechBeacon's Buyer's Guide for Selecting Software Test Automation Tools.
Discover best practices for reducing software defects with TechBeacon's Guide.
- Take your testing career to the next level. TechBeacon's Careers Topic Center provides expert advice to prepare you for your next move.
