Advanced Guide to AMP (Accelerated Mobile Pages)
To begin with, let’s figure out what AMP (Accelerated Mobile Pages) is and who needs to use them to optimize their website.
Introduction
Fast loading has become an important factor in promoting not only for SEO but also for user behavior on your website. Back in 2016, Google conducted a study that showed that 53% of users surfing on smartphones leave a website if the page takes longer than 3 seconds to load. If you want the fastest loading speed for your website pages, welcome to outsourcing with us!
Based on the Global Digital 2023 report, 92.3% of internet users access it through smartphones. This clearly suggests that your website should be perfectly optimized for mobile devices, including page loading speed.
For instance, we can consider the study of a large Australian e-commerce store, Adore Beauty. After successfully speeding up their page loading time to the yellow level in PageSpeed, the website’s conversion rate increased by 16%.
What is AMP (Accelerated Mobile Pages)?
Accelerated Mobile Pages (AMP) is a framework that significantly speeds up the process of loading pages on mobile devices after clicking on a search result.
In simple terms, it is a special set of tools that disables almost all unnecessary elements on a mobile page, leaving only important content to load. A little insight right away is a must-have tool for news sites and blogs.
Why specifically for news websites? It’s simple. Accelerated pages can only be used on static pages, such as news pages and blog articles.
The history of AMP technology is relatively simple. After two digital giants, Facebook and Apple, released their own fast page technologies in their applications (Facebook articles and Apple News), Google responded by developing its own HTML framework, which almost any author can use without being tied to a specific application.
Here is an example of what it looks like on Facebook, using the Washington Post’s post as an example.
Before we move on to the technical part of setting up AMP, let’s remind you of what AMP pages used to look like in search results and what they look like now.
On the left side of every AMP page, there was a small lightning icon that indicated accelerated pages in the Top Stories section. After an update in May 2020, Google decided to remove the icon and lower the priority of AMP pages in search results. On the right side, it is noticeable that AMP pages are no longer distinguished in search rankings.
The principle of AMP pages
As we have already mentioned, the AMP technology works by simplifying web pages for faster loading. How does it do this?
The page loads faster because some page elements are simply disabled during loading, such as JS libraries and most CSS. And some classic HTML tags are replaced with AMP HTML tags that enhance performance.
The content creator prepares the source HTML and then prepares it for the AMP version. Then, all of this is cached on Google servers for quick loading when the end user clicks on the page in search results.
Now, a little about the user path. There are two options for a user to see your AMP content:
1. Your news is well indexed and displayed in the Top Stories section of Google News. In this format, the main domain belongs to Google’s service.
2. The second option is to use SXG (Signed Exchange). In this case, the AMP file, in our case a news article, connects to our URL using digital signatures and is displayed as a separate page. It also appears separately in search results.
The advantages of AMP technology.
Increased page loading speed
To be clear, using AMP does not necessarily improve the effectiveness of your SEO efforts. However, a properly configured accelerated page has an increased loading speed, which in itself can affect your ranking in search results.
According to LittleData, the average mobile page loading speed throughout 2022 is 4.5–5 seconds. All loading times under 3 seconds are considered the benchmark. If your results are above 3 seconds, all other factors being equal, you will already be in the top 20% of sites in terms of page loading speed.
The image above indicates that the highest performance with accelerated pages can only be achieved through the Google search engine. This is because the caching technology on Google servers — AMP Cache — is only used when accessing a page through the “native” search engine for the technology.
Low bounce rate
Another experiment showed that after page loading time increased from 1.5 to 3.5 seconds, the bounce rate on the website’s analytics system increased by 32%. Therefore, loading speed will directly affect your SERP results.
Low data consumption
AMP pages use significantly less mobile data, which is sometimes very important for people in roaming. The page renders much fewer visual elements and loads almost instantly even with a weak signal. Most mobile news aggregator apps cannot boast the same.
Increased visibility in search results
Again, we emphasize that the technology itself is not a critical factor in improving your positions in SERP, but it certainly affects the trust rating of your site, which directly affects your positions in the search results.
And an additional pleasant point is the possibility of an extended search result with the correct markup of the accelerated page that is understandable to the search engine.
This is what your extended search result will look like with proper page markup.
Top Stories section
Despite Google’s cancellation of the privilege of ranking AMP pages in the Top Stories section, data suggests otherwise. As of February 22nd, almost 70% of pages in Top Stories were in AMP format in the US, UK, Canada, Australia, Germany, and France.
This literally means that if you want to promote your news resource in these countries, you simply must use AMP.
AMP technology drawbacks
Despite all the advantages of the technology, it also has its drawbacks.
Limited functionality
The technology is constantly evolving and does not stand still, but for now it remains limited by functional requirements.
You will have to use ready-made AMP templates that may differ significantly from your brand’s style. CSS is limited to 75 kB, and JS scripts are limited to 150 kB.
Limited updates
The latest information updates on the amp.dev website were a year ago. Google rarely talks about its plans for the technology, but still continues to support it. On the AMP YouTube channel, you can find many guides and educational videos on the technology.
Additional costs
Have you decided to try AMP? Great, but be prepared for additional costs. After all, now you need to adapt not only regular responsive pages, but also accelerated ones.
And don’t forget that after the start of indexing your accelerated page, you still have to optimize it for SEO, just like any other news page.
Additional tools
In addition to regular accelerated pages, the amp.dev team is developing additional products that are also aimed at maximum performance on mobile devices. These include Web Stories, AMP Ads, and AMP Email.
Web Stories
If you are familiar with Instagram, you will immediately understand what is being discussed. The format of a page with full-screen visual content that can be viewed on the web without additional applications.
Below is a cool case of using this tool in the social Japanese network Ameba.
Here are some examples of using Web Stories from reputable publications: BBC, Washington Post, PCGamesN.
What can you do with stories?
● Deliver branded content to your audience using video materials in a familiar format;
● Great format for native advertising on your site;
● Place your call to action similar to Stories in other social networks;
AMP Ads
A technology for placing advertising blocks in the AMPHTML tag, which significantly increases the speed of site loading. Relevant only for AMP pages, but really works and increases the revenue of webmasters and site owners.
Here’s a great example of AMPHTML vs HTML — just compare the speed of displaying the ad block in the first and second videos.
AMP e-mail
A brilliant tool for e–mail marketing. It allows you to send emails with dynamic elements, such as a selection of products that can be purchased directly from the email or a registration form for an event within the email itself.
Here is some good example of dynamic emails: LINK
Выше вы видите динамическое письмо с NPS формой.
Here’s another example, with a booking form: LINK
Using AMP Email significantly increases the likelihood of user interaction with your email.
Interesting Cases
We’ll show you the most interesting growth cases using AMP technology among major news outlets.
RCS MediaGroup
RCS MediaGroup is a major network of publishers in Europe, which includes the Corriere della Sera, La Gazzetta dello Sport, and El Mundo newspapers, as well as Oggi, Amica, Io Donna, Living, Style Magazine, Dove, Abitare, Sette, and Sport Week magazines.
What was done:
In 2018, the company’s own team of developers worked for six months to implement AMP technology in all their digital resources. Then, the company decided to use Progressive Web App (PWA) technology mainly for notifications, bookmarks, and offline access, so that users could read their content from anywhere.
Results:
The number of unique users increased by 98%, page views per session increased by 119%, and page load speed increased by 72%.
Times of India
India’s largest digital news platform with 180 million unique visitors per month.
What was done:
TOI (Times of India) was one of the first digital publications to partner with Google to implement AMP technology on their website on a large scale. They underwent a major digital transformation and fully adapted all their news pages to AMP.
Results:
Total traffic increased six-fold, resulting in a 1.5-fold increase in the publication’s revenue, and page load speed increased 3.6 times faster, even on a regular 3G network. This optimization is extremely important for a large country like India, as TOI was able to reach a large segment of the population.
Asahi
Another interesting case is the Japanese news publisher Asahi.com, which decided to use a paired approach in optimizing only free news articles. For reference, only 30% of the articles on the website are free and exist through advertising revenue.
What was done:
● Based on Lighthouse metrics, they decided to optimize the size and format of images on pages to increase traffic through SEO optimization;
● They implemented AMP advertising to increase ad revenue per page view;
● They optimized design components using Google Optimize to improve key metrics.
Results:
Page views increased by 240%, CTR for free articles increased by 201%, and ad revenue increased by 344%.
Ameba Blog:
Another great example of using AMP technology from Japan is Ameba. It is a Japanese social network and blog, where more than 20 million accelerated pages are used to understand the scale of AMP usage.
What was done:
● Used ready-made AMP templates for quick implementation;
● Republished all existing pages in AMP Stories format;
● Used auto-advance-after technology — works as automatic viewing and flipping of stories, similar to the principle of viewing stories on Instagram;
● Conducted A / B testing on different templates for large publications to verify KPI.
Results:
CTR inside Stories increased by 20%. Story completion rate increased by 53% — meaning that more than half of users read the content until the end. The average time on the page also increased by 1.5 times.
Conclusion
If after reading the article you have a question whether to use AMP on your site, the answer is YES.
In addition to technical implementation issues, a truly creative approach is required, for example, Ameba or Asahi cases will be excellent examples.
You have 4 unique tools at your disposal: AMP Website, AMP Ads, Web Stories, AMP Email. By using them comprehensively, you can increase not only your results in SERP, but also other marketing metrics.
In the next article, we will together review an example of using AMP in several CMS systems.
