AMP makes it simple to create great web experiences, whether you’re a publisher, e-commerce company, storyteller, or advertiser. You can use it to offer user-first experiences for your website visitors, which helps with improving Google rankings and ROI. But first, what is AMP, and how does it affect you?
What is AMP?
So an Accelerated Mobile Page, or AMP, is a project by Google designed to make really fast mobile pages. It’s basically a stripped-down HTML, fundamentally designed to be super lightweight.
Formally, AMP is an open-source HTML framework optimized for mobile web browsing and intended to help webpages load faster. It was developed by the AMP Open Source Project and Google created it as a competitor to Facebook Instant Articles and Apple News. Accelerated mobile pages began appearing in Google mobile search results in February 2016.
AMP pages can be cached by a CDN, such as Microsoft Bing or Cloudflare’s AMP caches, allowing pages to be served more quickly.
To Contents ↑What is the goal of AMP for websites?
Accelerated mobile pages aim to improve the user experience by delivering content quickly, sometimes almost instantly. For a long time, Google has been focusing on page load time; the faster your page loads, the higher it might rank on Google’s SERP. So AMP improves page speed drastically but with some drawbacks.
The 3 main elements of an AMP page
AMP pages are built with the following three center components:
- AMP HTML
The AMP HTML is essentially a watered-down HTML with some adjustments to ensure consistent performance. The majority of the tags in AMP HTML are standard HTML tags, but some are replaced with AMP-specific tags. These custom tags are known as AMP HTML components, and they make it simple to implement common tag patterns in a performant manner. The HTML tag allows search engines and other platforms to find AMP pages.
- AMP JS
The AMP JavaScript library ensures that AMP HTML pages are rendered quickly.
Rendering is a web development process that turns website code into the interactive pages users see when they visit a website.
The JS library uses all of AMP’s best performance practices, such as inline CSS and font triggering, to manage resource loading and provide custom HTML tags for fast page rendering.
- AMP Cache
Google AMP Cache (commonly known as Content Delivery Network or CDN) serves cached AMP HTML pages. The CDN is responsible for grabbing AMP content and caching it for faster delivery.
AMP Cache loads the document, JS files, and images from the same HTTP 2.0 origin to maximize efficiency. And an internal validation system ensures a page is guaranteed to work and does not rely on external factors that could slow it down. The validation system checks that the page’s mark-up conforms to the AMP HTML specs.
AMP’s three core components work together to speed up page loading. Following are the seven optimization techniques that make AMP pages so fast.
To Contents ↑How does Google use AMPs?
Google uses AMP to serve content quickly on mobile devices without requiring users to visit the actual website. If you’re on a mobile device, you can see an example of AMP in Google’s search results here.
Pages with valid AMP versions will appear in a carousel above the rest of the results for a given topic.
Above both the news and regular results for that query, Google’s top stories section displays AMP versions of related news stories so publishers who create AMP versions of their content have a huge advantage over those who don’t.
What type of websites need AMPs?
Initially, AMP focuses on online publishers’ news stories, which users see as AMP pages in mobile search results. Other types of businesses can also benefit from AMP’s results carousel and other features.
Setting up AMP in WordPress
- The first step in setting up accelerated mobile pages in WordPress is by installing the AMP plugin. Learn how to install WP plugins in our step-by-step guide.
- After you’ve activated AMP, go to the Appearance > AMP page to see how your site looks on mobile devices.
On this page, you can change the background and text color of the header. Whatever color you choose for the header background will also be used for links. If your theme allows it, the plugin will also use your site’s icon or logo.
- Save your changes.
You can customize your AMP pages with related posts, footer widgets, and even social media icons using a variety of plugins. However, after installing any additional plugins, you have to validate your AMP pages.
To Contents ↑How to see a webpage’s AMP version
To see a stripped-down AMP version of a webpage, go to the URL bar and add /amp/ at the end of the URL.
http://example.com/2022/10/blog-post/amp/
When viewing the source code of the original post, you’ll see this line of code in the HTML:
<link rel=”amphtml” href=”http://example.com/2022/10/blog-post/amp/” />
This line of code instructs search engines and other AMP-consuming apps/services to look for the page’s AMP version.
Troubleshooting AMP pages
If you get a 404 error when trying to view the amp version, follow these instructions.
Go to Settings > Permalinks in your WordPress admin and click Save Changes. You don’t need to edit anything here; just click the save button to refresh your website’s permalink structure.
How to view AMP performance in Google Search Console
The Google Search Console makes it simple to see how your AMPs are performing in Google Search.
- Log in to your Google Search Console account and select Search Appearance » Accelerated Mobile Pages.
Google may take some time to index and display data from your Accelerated Mobile Pages in Search Console, so don’t worry if you don’t see anything.
Getting accurate analytics on AMP Pages
The global site tag manager allows you to install Google Analytics, Google Ads, and related products on AMP pages. The Tag Manager installation sets up an AMP container and gives you the ability to create advanced configurations and deploy third-party tags from the Tag Manager interface. One drawback with AMP is that it can distort your Google Analytics data. Visitors to your AMP pages are not accurately tracked and may be counted twice.
What are the pros and cons of AMP?
AMP Pros:
- Improved website loading time: AMP speeds up content delivery by removing non-essential elements. This is critical because a growing percentage of the world’s population relies solely on mobile devices for internet access.
- Improved search rankings: While AMP was never a factor in search rankings, speed is. This means that making your pages load faster could help you rank higher in Google.
- Simple to set up on WordPress: AMP is also simple to set up on WordPress websites.
AMP Cons:
- It can be challenging to implement outside WordPress. You’ll need coding experience and help from your developer to create an AMP page.
- Lower ad revenue: AMP pages have fewer ads, which is great for speed but not so great if ads are your significant source of income.
- Limited analytics: Because the page is hosted on Google servers, you can’t use standard analytics tags on AMP pages. This makes it difficult to see how your changes affect traffic.
- Less control over content and design: While AMP removes many “unnecessary” elements, this can include branding and traffic-driving features.
- Limits lead capture: AMP also removes lead capture forms and downloadable assets, reducing the ability of websites to collect leads.
- Limits social sharing: Because most social share buttons are built with JS, they may not even display correctly.
What does AMP mean for Core Web Vitals?
Even though AMP pages appear to be a separate category, they are subject to the same search ranking criteria as any other page. However, because of the way they’re built, they’re more likely to perform better than regular pages.
AMP pages are more stable, load content faster, and don’t have to process Javascript because they use limited CSS, no third-party Javascript, predefined images, and minimal embeds. While AMP itself is not a ranking factor, it can help you meet the Core Web Vitals’ recommended performance targets.
Let’s take a look at how AMP is built to meet each Core Web Vital performance requirement.
To Contents ↑First Input Delay (FID)
AMP only supports asynchronous JavaScript by default. Thus when the page loads, the browser’s main thread isn’t occupied with slow, heavy operations that prevent users from interacting with the website. The response time is typically less than 100 milliseconds which is well below the ‘Good’ threshold for first input delay.
- Chunked processes
Long tasks delay user interactions because the page is locked until these tasks are completed. AMP uses process chunking to split long tasks into small-sized versions to break up these long tasks (over 150ms). Because there are so many small tasks, if the load is interrupted by user input, the browser can instantly perform the new task rather than wait for a long task to finish. This is why AMP pages respond so quickly to any interaction.
- Sandbox Widgets
Code-heavy widgets won’t prevent users from interacting with the page because AMP runs external code in a separate container.
- Deferred layout
Core Web Vitals usually score the first viewport impression time. So to save time, AMP uses a deferred layout to delay the rendering of unnecessary elements further down the page.
To Contents ↑Cumulative Layout Shift (CLS)
Any element on the page that can cause the layout to reload or shift must be triggered by user interaction. Because CLS is measured before the user interacts with the page, you shouldn’t have a widget appear when the user interacts with the page or clicks on something.
AMP ensures stable layouts because the framework infers the size of resources before they’re downloaded. Built-in components with a specified height and width are used to load images, videos, and iframes.
AMP recognizes the container’s height and width when the page first loads and reserves the appropriate size before downloading the actual element. Having them in place ahead of time prevents unspecified sizing elements from shifting the other elements.
To Contents ↑Largest Contentful Paint (LCP)
AMP pages are designed with minimal JavaScript and CSS, allowing content to load quickly. Furthermore, the content that the user sees first is prioritized, so images and advertisements are only downloaded if they’re above the fold.
Limiting the resources fetched during page load by prioritizing the content that users can see first makes the page feel faster.
Google Cache also pre-loads and pre-renders AMP pages. For example, when a user visits a pre-rendered page, the browser has already downloaded the content, which appears to be instant.
Conclusion
While using AMP is a surefire way to improve your Core Web Vitals score, several factors can prevent pages from meeting the requirements. Slow server response times, unoptimized images, and large files can slow any page down. Additionally, you cannot give every page an AMP version: The menu and home pages.
If you have a blog with articles like Medium, Patreon, then you need AMP is your theme. And if you have a designer portfolio, it hardly helps. You also need to be careful when using AMP with pages that have a lot of video content.
