What Is AMP

What is AMP? A Guide to Accelerated Mobile Pages

AMP is quite a buzz word these days with the developers as well as SEOs. What is AMP you ask and how it affects you? Let’s begin with simply defining Accelerated Mobile Pages widely known as AMP. It was ideally introduced  for mobile phones to load pages faster. You might have noticed a little AMP sign underlining some Google results when searching for something on your phone. It used to look something like this

serp result

Now to understand why it is needed, researches show that there are seven billion people in this world andOut of these 7 billion, 6.3 billion have smartphones.

smartphone stats

With such a massive population, it is understandable why most traffic on the internet comes from these smart devices.

Another study by NST.com states that 4.32 billion people access the internet through mobile phones. So, it is evident that most searches on the internet are being made through them.

To improve the experience of  surfing on their handheld devices, Google launched Accelerated Mobile Pages (AMP).

What is AMP

As the name implies, AMP or Accelerated Mobile Pages is faster loading web pages on mobile phones. These are the lightweight version of your HTML pages with certain specifications to load faster on handheld devices.

AMP is a web component framework to design pages websites can use this framework to create AMP web pages.

These version of web pages contains the least possible information required to load a webpage. For example, assume you are going on a trip with your friend. Your friend packs a heavy bag with all sorts of useless stuff that you won’t even need on the trip.

So, you sit and start to remove items from your friend’s luggage to ease your travel Just like your friend’s luggage, AMP Pages remove videos, animations, and ads and only leave the content with images.

AMP keeps the SEO community divided over its importance and benefits that come with it. Initially, when Google launched the AMP, all the major websites switched to it.

Google also showed a “lightning bolt” symbol next to the AMP pages in the search results to tell users which page would load faster. However, that symbol is now gone.

AMP came in response to the Facebook instant article and Apple news.

So, is AMP still effective in 2021? Should websites put effort into creating AMP pages? What are the advantages or the disadvantages of having an AMP version of your HTML pages?

How AMP works

AMP works by rendering web pages with an optimized HTML code. It removes the HTML code tag manager aspects that slow down a page.

But a simplified HTML version is not the only reason why AMP pages load fast. This secret – or not-so-secret ingredientlies somewhere else.

See, websites are hosted on servers chosen by the developers. These servers can be anywhere and have different speeds. Non-AMP webpages are hosted on these servers.

But pages created with the AMP frameworks are sent to be hosted on Google’s servers. This allows Google to prerender pages before the user even enters a query. It also saves a cached version of the webpage to load it faster.

But faster load times are good for users. So why are there voices against AMP?

It is not as simplified as ‘Oh! AMP means faster loading pages’.

With AMP pages, Google controls what is visible on the page. So, in a way, Google controls how the websites are built and what ads will appear on the web pages.

In a way, it is ‘shaping the internet’ as per its liking by Google. That’s where the contention lies about AMP pages.

According to Google, AMP loads faster pages. Fast load time is considered a ranking factor by this behemoth search engine, so naturally, AMP pages have considerable advantages.

Which sites should implement AMP

Statistics show that 1.9 million websites use AMP webpages. Here is the breakdown of the industries that use AMP pages the most:

amp stats

Several top websites use the AMP feature to speed up their load time and appear higher in mobile phone search results. Yahoo, Reddit, Washington Post, CNN, BBC, and ESPN are big names with AMP-optimized pages.

How to Optimize AMP Pages

AMP pages are not entirely optimized by default. They give higher speed only if the webpage is loaded from the AMP cache. If a website wants to launch AMP from its servers, then the load speed will depend on other optimization factors as well.

These pages load fast by default, but you can implement other performance optimizations on your web pages to load your AMP pages even faster.

Use an AMP Optimizer

If a webpage is served from the AMP cache, it is fully optimized. But with webpages hosted on other servers, some of the AMP cache optimizations aren’t implemented by default.

To compensate lack of optimization, web pages can link with an AMP Optimizer. It gives the webpages AMP cache-like optimization even if the origin is from the developer’s own servers.

According to amp.dev, there are three ways to integrate an AMP optimizer:

  1. Use a site generator or CMS with a built-in optimizer integration.
  2. Integrate an AMP Optimizer into your build-system or server.
  3. Integrate an AMP Optimizer into your hosting environment.

Preload banner image

Image tag for an AMP page amp-img differs from the ordinary HTML tag img. For the AMP, the page’s runtime has to be loaded before the image download can begin. However, this is not possible in many cases.

To overcome this issue, annotate the images with the data-hero attribute. Here is an example for this attribute:

<amp-img src=”hero.jpg” data-hero …>

It allows the AMP caches to render img files at a faster speed. You can also preload image to ensure that the browser quickly starts to download the image. Here is a code snippet to implement preloading of images:

<head>

  <link rel=”preload” href=”/images/elephants.png” as=”image”>

</head>

<body>

  …

  <amp-img width=”404″ height=”720″ layout=”responsive”

           src=”/images/elephants.png” alt=”…” >

  </amp-img>

</body>

While preloading images, it is important to consider bandwidth limitations and only \ preload  critical-images. Otherwise, the entire bandwidth can be consumed in preloading the images.

Optimize the fonts

With the AMP pages, you can use the font-display determinator. It determines how a font is displayed based on when it is downloaded. It will only use the font if it is there in the AMP cache. This cuts down the time required to load custom fonts that are not in the system.

However, if you are using custom fonts, you can preload them. Like images, you can modify the code to enable the preloading of the fonts.

link rel=”preload” as=”font” href=”/bundles/app/fonts/helveticaneue-roman-webfont.woff2″ >

To maximize your AMP pages’ optimization, limit the number of custom fonts and use system fonts instead.

Optimize images

Like SEO for ordinary pages, image optimization also works for AMP pages. It increases the load speed and reduces the bandwidth required to load images.

To optimize images in the AMP pages, choose the right format PNG, JPEG, or WebP based on your image. After choosing the right format, optimize the compression level for the images and make them responsive.

If you are using animated GIFs on your webpage, replace them with videos. Animated GIFs are very large, and by converting them into video format, you can considerably reduce the bandwidth required to load them.

Advantages of AMP Pages

Faster load time

AMP web pages load faster than normal HTML pages. Naturally, faster load time cuts the bounce rate and increases the session length on your web pages. AMP itself is not a ranking factor, but the page load time is considered as a vital ranking factor by Google.

Google says that AMP pages load in less than a second. It is not only about the improved page loading speed. It also leads to other advantages like prolonged stay on web pages by the users, higher conversion rate, improved CTR, and lower bounce rate.

Landing into Google’s good books

Google is quite a big fan of AMP, and it doesn’t make much effort to hide its liking for the thunderbolt pages.

amp results

AMP pages get preferential treatment by Google while showing the search results on a mobile phone.

It also improves the CTR as the URL structure for webpages has .amp in it. In the past, AMP pages had a thunderbolt sign next to them to indicate these pages load faster than the other. It considerably increased the CTR for AMP-optimized pages.

Disadvantages of AMP pages

A cutdown version of your web

Using AMP to generate web pages increase the load speed, but it comes at a cost. You have to sacrifice certain UX elements of your webpage to prop up the page’s loading speed.

So, if your webpage has engaging graphics, pictures, and other visuals to complement the text content, it will have to be scaled down or even removed completely to make it AMP-optimized.

This can considerably decrease your web pages’ aesthetics and visual appeal that might be a big part of the overall experience on your web page.

Cut on the advertisement revenues

Since AMP is a project by Google, the content that appears on AMP is determined by Google. The limit on heavy visual content leads to a cut on advertisements that appear on AMP. So, to increase the loading speed of your webpage, you have to let go of the ad revenue.

Also, the framework of AMP is quite limiting. Therefore, implementing expandable ads is not possible on these pages.

Increases coding complications

To create an AMP for your web pages, you will need help from a web developer because it involves writing a separate code.

However, it isn’t an issue if you have WordPress CMS because it has a plugin for AMP pages. But these plugins are quite basic and often fail to keep up with the evolving AMP framework. So, it will come down to your developer for writing a separate code to appear higher in mobile phone search results.

Another optimization burdens

AMP itself is not a ranking factor. Thus, by default, do not guarantee a higher SERP ranking. After creating AMP for your website, you will still have to optimize your page to rank these higher in SERPs.

Basically your work might get double when you have to do on-page SEO, and also have to modify the technical elements of website with technical SEO. It creates an added SEO burden, and the results might not be as positive as your hope.

Final word

AMP was launched with much fanfare. People were curiously seeking an answer to ‘what is AMP’. The developers readily adopted it in a bid to appear higher on mobile phone search results. But, with time, the efficacy of AMP pages is diminishing due to the added complications attached to them.

If this effort is worth it or not is for the SEOs to decide. A January 2021 case study by Kinsta showed that leads generated by the AMP pages dropped by 59%. The study even suggested to ‘disable Google AMP’. However on the otherhand a study conducted by Womp Mobile concluded that Overall, 22 of the 26 websites (77%) experienced organic search gains on mobile. SERP impressions and SERP click-through rates were also improved due to it. It is now businesses choice whether they want to opt for AMP pages or simply optimize their site speed and put effort into making it a responsive website. What are your thoughts about AMP and its benefits

Image Source:

https://www.statista.com/statistics/330695/number-of-smartphone-users-worldwide/

https://www.similartech.com/technologies/amp

Leave a Comment

Your email address will not be published. Required fields are marked *