- What Is AMP
- Advantages and Disadvantages of AMP Technology
- How to Implement AMP Pages on a Website
- How to Check AMP Pages
- Is It Necessary to Use AMP Technology
User experience has a significant impact on a website’s ranking in search results and domain name rating, and one way to improve it is by optimizing page load speed. Global companies continuously implement new technologies to ensure web resources load as quickly as possible, especially on mobile devices. One of the most effective technologies is AMP, which helps create pages with instant loading on smartphones and tablets. However, despite its many advantages, Accelerated Mobile Pages have certain limitations that may negatively affect your online project.
What Is AMP
AMP (Accelerated Mobile Pages) is a technology for accelerating the loading of HTML pages on smartphones and tablets, developed by Google in 2015. In February 2016, user testing began when such pages started appearing in mobile search results. Google immediately began actively promoting accelerated mobile pages, for example, by marking them with a special "lightning" icon and giving them a slight ranking advantage.
AMP pages differ from standard ones due to the absence or replacement of classic HTML tags. For example, instead of the standard <IMG> tag for images, AMP uses <AMP-IMG>. Standard JavaScript is also prohibited, but there is an AMP JS library with a limited set of functions that ensures optimized rendering. Another factor that contributes to acceleration is Google AMP Cache: the caching of website pages occurs directly in the search engine. As a result, pages load within 0.3-0.5 seconds, even for users with slow internet connections.
Read also: Bounce Rate on a Website — How to Analyze and Reduce It
Advantages and Disadvantages of AMP Technology
In 2024, mobile traffic accounted for over 62%, while in many countries, only 3G access is still available at best. This highlights the main advantage of AMP pages—instant loading. The PageSpeed Insights score often reaches 95-98, and content loads in just a few seconds. In other words, the technology levels the playing field for all users, allowing them to instantly access valuable and engaging content regardless of their internet speed.
Other important advantages of AMP pages include:
- Improved user experience. Users primarily access text-based content, without distractions like forms, pop-ups, or interactive ad banners.
- Lower bounce rate. Fast page loading and the absence of heavy interactive elements increase the likelihood that visitors will spend more time on your web resource.
- Simplified SEO promotion. Search engine algorithms favor fast-loading sites. With this technology, web pages load instantly, increasing the chances of ranking at the top of search results.
- Possibility of automatic implementation. Manually creating and editing AMP pages can be challenging, but free CMS plugins simplify the process.
However, AMP technology creates simplified versions of web pages, thereby restricting website functionality. As a result, AMP pages have several disadvantages:
- specialized JS — limits the number of functions that can be implemented;
- CSS size limit of 75 KB — requires minimizing styles, which often complicates design;
- restricted monetization — interactive ad banners frequently malfunction or fail to display, causing website owners to lose up to 20-30% of ad revenue compared to traditional mobile pages;
- reduced branded traffic — users share a cached version of the page hosted by Google, not your domain;
- risk of content duplication — proper rel="canonical" configuration is crucial, otherwise, search engines may index the AMP version instead of the main page;
- dependence on Google — page caching occurs on Google’s servers, giving the company greater control over your content.
In 2017-2018, website owners were willing to invest extra time in creating and managing AMP pages with reduced functionality because it helped them achieve better search rankings and stand out. Today, Google no longer considers AMP a key ranking factor, and the characteristic AMP icon has been removed. Therefore, the benefits of implementing this technology should be assessed based on the specific needs of your web project.
Online stores and portals with high interactivity typically rely on traditional mobile optimization methods because AMP severely limits their functionality. However, content-heavy websites (magazines, blogs, news portals) with a large volume of articles actively use AMP to improve mobile accessibility.
How to Implement AMP Pages on a Website
When implementing AMP technology, you need to create both a regular and a simplified version of a page. To ensure that search engines correctly understand their connection, a special tag must be added to the <head> section of each page.
In the code of a regular page add:
<link rel="amphtml" href="https://example.com/article-amp.html">
In the AMP version code insert:
<link rel="canonical" href="https://example.com/article.html">
We will now look at this process when creating simplified pages both manually and using plugins. However, always check that these tags are present, as search engines may otherwise consider an AMP page a duplicate of the original content.
Method 1 — Creating AMP Pages Manually
Manually creating each Accelerated Mobile Page makes sense for small websites or when you need complete control over specific pages, such as news articles or blog posts. In this case, you use a ready-made template and replace standard HTML, CSS, and JS elements with their AMP equivalents.
A detailed step-by-step guide is available on the amp.dev website, but here, we will cover the key points for a better understanding of how to implement AMP on your site.
Start with the basic structure of a simplified AMP page:
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
</head>
<body>
<h1 id="hello">Hello AMPHTML World!</h1>
</body>
</html>
Pay attention to the <html amp lang="en"> tag. The <html amp> part tells search engines that this is an AMP page. If your website is not in English, replace "en" with the appropriate language code (e.g., "uk" for Ukrainian). Also, remember to edit the <link rel="canonical" href="$SOME_URL"> tag so that the href attribute points to the main version of the page.
To add an image, use the <amp-img> tag instead of the standard <img> tag. Example:
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400"></amp-img>
One advantage of AMP technology is simplified adaptive image usage. To make an image responsive, simply add layout="responsive" to the <amp-img> tag:
<amp-img src="https://source.unsplash.com/Ji_G7Bu1MoM/600x400" width="600" height="400" layout="responsive"></amp-img>
A complete list of special AMP tags is available on this page of the amp.dev website.
In AMP, external CSS files cannot be used, so styles must be written inside <style amp-custom>:
<style amp-custom>
h1 {
margin: 1rem;
}
body {
font-family: Arial, sans-serif;
padding: 20px;
background-color: blue;
}
</style>
If needed, you can include custom JavaScript using the specialized <amp-script> component. This allows you to write and execute custom JS while complying with AMP requirements. You can also manually add common widgets, unique web elements, promotions, and events—the code for each function is available on amp.dev.
When creating a simplified AMP version of a page, don't forget to add the AMP link on the standard HTML page:
<link rel="amphtml" href="https://example.com/article-amp.html">
Finally, test your AMP page using the Google AMP Validator (we will discuss this tool in detail later).
Method 2 — Creating AMP using Plugins
Manually creating a simplified mobile version of each page is risky, complex, and time-consuming, especially for large online projects. For website owners using content management systems, this technology is much easier to implement since there are free AMP plugins available for CMS:
- WordPress. The official AMP for WP extension can automatically generate simplified mobile versions of website pages and posts.
- Joomla. wbAMP automatically creates AMP versions of your pages, supports Google Analytics, and allows design customization. JAMP enables AMP versions for articles and blogs.
- Drupal. The AMP Module helps convert standard pages into simplified ones.
- Magento. Plumrocket AMP creates simplified versions of products, categories, and other pages. Magefan AMP Extension performs the same task.
Let's go through the process of creating AMP pages on a WordPress website. Go to the admin panel, navigate to the "Plugins" section, and click "Add New." Enter the plugin name in the search field, install, and activate the required one.
After activation, a setup selection window will immediately appear. We need the basic solution for beginners.
Now we can configure each aspect separately. You can choose the type of pages for AMP, set up analytics, monetization, and more. Pay special attention to the "Where do you need AMP?" section: you can enable AMP for the entire blog or product pages, but it's better to configure each page manually.
To do this, go to the "Posts" or "Pages" section, depending on the type of content you're working with. For example, let's add a new blog post.
Click "Start the AMP Page Builder".
The builder will immediately open with a convenient system for creating an AMP page. First, drag the required number of columns, then add a module, such as text.
To edit a module, click the gear icon next to it.
You can even use ready-made templates by clicking "Pre-built AMP Layouts".
The free version includes a basic layout, while the paid version offers nine additional ones for $89 per year. The free option is sufficient, and you can edit it as needed.
You can delete, modify, or add any column or module from the selected template. Just don't forget to configure the main version using the classic editor and publish the page.
Results of standard page testing via PageSpeed Insights.
Results of AMP page testing via PageSpeed Insights.
How to Check AMP Pages
The easiest way to ensure the correct functioning of an AMP page is to use Google’s service. Simply insert the link, click “Test page”, and instantly receive a report.
We tested an AMP page created using the official WordPress plugin.
Our simplified version can appear in Google search results without errors.
We also took a standard page from another site and tested it with this service.
Read also: How to Improve Your Website's SEO with Yoast SEO
Is It Necessary to Use AMP Technology
It is not mandatory since various methods exist for optimizing mobile pages to achieve fast loading speeds without strict functionality limitations. For example, choosing a hosting with sufficient resources, caching, removing unnecessary code, image optimization, and Lazy Loading.
Until 2021, millions of website owners implemented AMP because it allowed pages to stand out in search results with a distinctive icon and gain entry into the Google News carousel. At the time of writing, the “lightning bolt” no longer appears in search results, AMP pages do not have priority, and any website can be featured in the news carousel. While AMP improves site speed, similar results can be achieved without such strict functionality constraints.
Like the article? Tell your friends about it: 
