Accelerated Mobile Pages (AMP)

Google’s Accelerated Mobile Pages (AMP) is an open source project designed to improve the loading speed and readability of content for mobile users. Think of it as an upgrade to mobile-friendly pages. According to Google, AMP aims to improve mobile experience by getting information to load instantaneously, including rich content like video, animations and graphics.

Many major publishers and platforms use AMP on their content, including the likes of Twitter, CNN, BBC News, Buzzfeed, the Guardian and Huffington Post.

According to Google, the average load time for a mobile site is just over 15 seconds. Whereas with AMP, that average speed is around 0.7 seconds.

Whereas AMP in and of itself is not a ranking factor, page speed most certainly is. And, since AMP provides (nearly) unbeatable speeds, by default sites that use AMP have a rankings advantage.

How does AMP work?

AMP enables content to load instantaneously by using a stripped down version of HTML and pre rendering the page. Initially, AMP pages were heavily restricted in what they could contain. Now, however, most website features can be replicated in AMP. This was given a huge boost in 2019, when AMP started supporting JavaScript (to a limit of 150KB per page).

Whereas, in its early years, AMP was heavily criticised for forcing AMP webpages to create boring, stripped down and austere looking pages, now AMP pages are capable of very advanced features. This means that it’s no longer just good to use for mobile first news sites, but is a good option for any website (contrary to myth, desktop sites can also be built – and to a very high standard – using AMP) that wishes to take advantage of the many speed benefits.

Google is able to automatically cache and pre-render AMP-enabled pages, meaning it doesn’t have to fetch content from the publisher’s server each time a user visits the page. This way, pages load instantly upon clicking. To reduce the bandwidth and CPU use to preload AMP content, only the resources above the fold are pre-rendered.

Who needs AMP?

In reality, anyone with an interest in improving their online visibility should consider using Google AMP. Both Google as well as desktop and mobile users will continue to favour websites that offer great user experience, and page loading speed is a major component of this.

If you are unsure on whether you should be implementing AMP, please discuss this with your SEO agency who will be able to advise and point you in the right direction.

How to implement AMP

Firstly, have a look at Google’s helpful guide on AMP. Then, take into account the following five steps:

Step 1: Analyse Your Web Page: Before implementing AMP, conduct a thorough analysis of your web page to identify elements that are critical to your content and user experience. Pay attention to:

a. Content: Determine the most important content on your web page, such as articles, product listings, or news updates, and focus on optimising those elements for AMP. Consider simplifying the content structure and prioritising key information. Look out for any large blocks of text that can be broken down into smaller sections or headings to improve readability. Ensure that your content is concise, relevant, and easy to consume on mobile devices.

b. Design: Review your page’s design and identify any complex or heavy design elements that might hinder performance in an AMP environment. Simplify and optimise the design while maintaining a visually appealing experience. Consider reducing the number of visual assets, such as high-resolution images or complex animations, and using lightweight design elements. Minimise the use of custom fonts and use system fonts whenever possible to improve loading speed. Additionally, ensure that your design is responsive and adapts well to different screen sizes to provide a consistent user experience.

c. Scripts and Third-Party Embeds: Identify any scripts or third-party embeds on your web page, such as social media widgets, analytics tools, or advertising scripts. AMP has restrictions on certain JavaScript and third-party code, limiting JavaScript to 150KB per page, which, although decent, does mean that you need to be careful with its use. So, evaluate the necessity of these elements and consider alternative AMP-compatible solutions. If possible, use AMP components or alternatives provided by the AMP project to achieve similar functionality.

d. CSS and Stylesheets: Review your CSS and stylesheets and identify any heavy or unused styles that can be removed or optimised. Minimise the use of custom CSS and rely on AMP’s predefined styles whenever possible. Ensure that your stylesheets are optimised for performance and load only the necessary styles for your AMP page.

Step 2: Include the AMP HTML Boilerplate: To begin implementing AMP, include the AMP HTML Boilerplate in the <head> section of your web page. The boilerplate provides the basic structure and necessary tags for AMP compatibility. It consists of:

a. Required meta tags: These tags specify the character encoding, viewport settings, and the AMP library version.

b. AMP runtime script: This script fetches and renders the AMP components on your page.

c. Link to the AMP stylesheet: This stylesheet ensures that your page adheres to AMP’s design guidelines.

Step 3: Use AMP Components: AMP provides a variety of components that you can leverage to enhance your web page’s functionality and interactivity. These components include:

a. AMP-img: Optimises and lazy-loads images, reducing their impact on page load time.

b. AMP-video: Enables fast-loading and responsive videos on your page.

c. AMP-carousel: Creates image carousels that users can swipe through on mobile devices.

d. AMP-form: Provides a user-friendly way to create and validate forms within your AMP page.

e. AMP-analytics: Tracks user interactions and performance metrics for analysis.

Select the components that best suit your content and integrate them into your AMP page using the appropriate tags and attributes.

Step 4: Ensure Valid AMP Markup: Validation is crucial to ensure your AMP page adheres to the standards set by the AMP Project. Use the AMP Validator tool, available online, to check your web page for any errors or issues. Address any problems identified by the validator, such as missing or misused tags, to ensure your page is valid AMP markup. The validator will provide guidance on how to fix the issues.

Step 5: Implement Responsive Design: To ensure your AMP page looks great across various devices, adopt a responsive design approach. Consider the following:

a. Media Queries: Use media queries to apply different styles or layouts based on the device’s screen size. This ensures your content adapts well to different devices, maintaining a consistent user experience.

b. AMP’s Responsive Layout System: Leverage AMP’s responsive layout system to create flexible and responsive components, such as grids and responsive images, that adjust based on the available screen space.

By thoroughly analysing your web page’s content, design, scripts, and stylesheets, you can identify areas for improvement and optimisation. Incorporating AMP components and adhering to AMP’s guidelines will result in a fast and engaging mobile experience. With the inclusion of responsive design techniques, your AMP page will look great on various devices, further enhancing user satisfaction.

Step 6: Track Performance: After implementing AMP, monitor your page’s performance using tools like Google Analytics. Track metrics such as:

a. Page Load Times: Measure the time it takes for your AMP page to load fully. Compare this with the performance of your non-AMP version to assess the improvement.

b. Bounce Rates: Analyse the percentage of users who leave your page without engaging further. AMP’s faster loading times can help reduce bounce rates.

c. User Engagement: Track user interactions, such as clicks, form submissions, or video views, to evaluate the effectiveness of your AMP implementation.

Identify areas for improvement based on performance metrics and make necessary adjustments to optimise your AMP page further.

Final thoughts

When AMP first came out, it was great for news sites but had significant drawbacks due to the serious design and functionality sacrifices that were required. Web pages that used AMP simply looked Spartan.

However, AMP has come on leaps and bounds and now comparatively few design sacrifices are required. We would argue that the small design sacrifices that are necessary for AMP are more than made up for by the rankings and user experience improvements seen.

By implementing AMP on your web page, you can deliver a faster and more engaging experience to your users, leading to improved user satisfaction, increased conversions, and better search engine visibility!