I am a developer and while developing my website I came to know about a new term that is Google AMP so I started researching about it.
But I couldn’t find much about it. As it was something new to the industry so I decided to learn how to develop an AMP page for my website and while developing and even after developing. I got to know some facts about Google AMP pages.
Which I May tell you, so that if so that you must know whether you should go for Google AMP or not.
Whether your website demands an AMP page or not!
What is an AMP page?
Amp page are known as Accelerated Mobile Pages. This set of the framework was developed by Google in response to Facebook instant articles and Apple news.
AMP is optimized for mobile web browsing and is intended to boost up the speed of loading of a web page in a user’s mobile. Amp can really boost the SEO scores of a page as it really reduces the loading speed of that page.
Why Amp pages over normal HTML pages?
AMP page generally uses the async loading of the DOM layout. Which boosts up the speed of your webpage. Indeed makes the webpage load faster, eventually reducing the bounce rate of the webpage which in return helps in SEO.
When should I choose AMP pages?
If you are having a news website or a website which has got dynamic changes of content and it’s too frequent then it’s suggested to go for Google AMP page because in that genre the competition is really high, and you want to users to get the expected results that they are searching for within the minimum time. so, in that case, you should go for amp pages.
Even if your website is about hot topics or a very competitive niche. It is really recommended for you to go with Google AMP pages in that case, your website may rank better if your content supports your webpage. I mean if your content is really good!
How AMP Works?
Asynchronous Javascript load
AMP doesn’t support any third-party JavaScript or the conventional JavaScript and has its own set of JavaScript tags and JavaScript methods to use.
The conventional JavaScript that we use is not loaded asynchronously on the pages, and generally blocks the rendering pathway of the web page which indeed results in the long loading time of a webpage.
AMP really eradicates this problem.
AMP asynchronously renders any script present on the webpage which boosts the speed of the web page loading time and helps in SEO which eventually helps in getting a good position in Google is SERP.
The static load of DOM Layout
In the Normal HTML layout, the sizes of the resources are dynamically loaded, and they are loaded during the web page load. So that’s why whenever normal HTML pages are loaded it takes more time.
At the initial point of the HTML page load, the resource size is not known by the DOM so it has to dynamically allocate size as it loads the resource.
AMP solves this problem, as AMP can determine each element’s size and position before the resources are even downloaded.
At the initial state of the HTML page load, AMP loads the layout of the page without waiting for any resource to be downloaded.
AMP un-couples the DOM layout with the resource layout.
AMP is optimized to avoid the style recalculation and layout while the client loads the web page.
It eradicates the re-layout when the resources are loaded.
AMP doesn’t let any extension block the rendering flow.
Iframes or any such heavy tags take time to load on a normal HTML page.
These tags imports data from different websites generally. So, these tags are heavy in nature and are time taking tags.
AMP solve this problem by having their own set of Tags.
But before having those tags in your amp page you need to import the respective amp library for it!
For example :
For using an Iframe in amp page you have to use an
<amp-iframe> But this won’t work until you import
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>As soon as you import the iframe library the amp-iframe tag would be validated and then the Google AMP library will take care of the iframe.
AMP only allows inline CSS with size limitations
Generally in a normal HTML page, CSS blocks every rendering path of every resource. This means that until the CSS is fully loaded the other resources get bloated.
In AMP, the CSS can’t be imported by an external file and has to be included in the page itself which reduces the HTTP request on the server and reduces the loading time of the web page.
Moreover there is a maximum size limit to CSS that can be included on the page. so you cannot have unnecessary CSS codes over on your webpage.
AMP does not allow loading of third party libraries or JavaScripts
In the case of a normal HTML page, you can load a third-party library.
But in case of loading a third party library, the whole library is imported on the webpage. Even if you need a tit-bit of the library still you have to load the whole library on your web page which requires high demand HTTP requests.
And normally the more HTTP request the page will have, the more time it will take to load. As it has to connect the server every now and then to load a resource.
that is why AMP does not allow any third party libraries to be imported on the page.
And AMP only allows custom JavaScript only under sandboxed iframes as they are restricted and they cannot block the execution of the main path in AMP.
AMP Focuses on Font Load
AMP generally provides the client with Font as a priority. So that the Client doesn’t have to sit idle while the other resources are loaded asynchronously on the page.
Moreover the AMP does not allow any HTTP request until the fonts are loaded properly.
As the JavaScripts in AMP are called asynchronously and the CSS is included in the page itself, it doesn’t have to wait for the outer HTTP request to load the font.
AMP supports minimized style re-calculations after the page load
AMP loads the DOM structure statically once at the initial point of the web page load and does not believes in re-calculation of the style after page load which is really good and optimizes the page speed and helps in good SEO ranking.
AMP Does not allow custom animations
AMP does not allows normal custom JavaScript animation and only allows its own sets of animations which are specially designed to boost the speed of a web page.
AMP basically focuses on the GPU accelerated animations that enhances the web page loading time and SEO scores.
AMP sets Priorities to the resource downloading
AMP generally prioritizes the resource download. As it does not support the resource to create a bloater in the rendering process.
It usually loads the resource which is easier to load and are more important than others.
AMP has control over every element or resource that are to be downloaded over the AMP page. It knows which resources are to be prioritized and downloaded first and is important for the AMP page.
AMP page focuses on Instant Load
the AMP focuses on instant load which means the amp page will download all the resources that are at the instant required for the client viewport.
Focuses on the new pre-connect API which insurance HTTP requests as fast as possible when they made.
AMP supports lazy loading which ensures that it doesn’t undertake the usual heavy loading of the full page, AMP generally loads resource data required at that instant.
How AMP affects SEO (SERP)?
AMP really boosts up the position in the SERP of Google.
Amp pages are generally faster than normal HTML pages. So the bounce rate of amp pages is generally lower than HTML pages which is a plus point for SEO of an AMP page.
Suppose if your normal HTML page rank on 26th on the Google SERP mobile search.
The same content with Google AMP enabled may rank above than that for the Google mobile SERP. It may even rank on 13th or above 13 for an amp page with the same content.
This is just a hypothetical comparison between a Google AMP Page and a normal HTML page.
The real-life situation may vary with content quality as nothing is fixed in SEO and everything is a variable.
How to Implement Google AMP Pages
Google amp pages can be implemented in two ways
You can either convert the existing HTML page of your website into the Google amp page.
Or can implement and link a new Google amp page to your existing HTML page.
the second method would be less of a burden and would be less of hectic because in that case, you don’t have to manipulate the old original HTML page that you already possess.
In the second method, the users searching for results would be referred directly to your amp page in the Google SERP and you don’t have to manually redirect the users to the AMP page.
To avoid duplication of content a canonical tag would be added to the amp page that would be referring to the original HTML page.
I have a blog on How to implement amp in PHP? Without WordPress.
If you are not sure with PHP, then comment down and I may help you out!
And if you are building a brand new website and want to implement AMP page into it or want to have just one single page and that is the AMP page then you may check
Step-by-step | Convert Dynamic Amp Page in PHP
Google AMP Benefits:
- Helps in good rank over Google SERP
- It helps in attaining less bounce rate.
- It helps in gaining good page speed scores.
- Runs fairly good even on the average network.
- Reduces the pressure on the initial page load.
Cons of Google AMP Page:
- Google AMP works for only Google SERP.
- It might not help users from Bing and Yahoo search engine.
- Many AD networks still don’t support AMP ads.
- AMP framework is still under development.
- If you already have an established website, converting into amp can really be a pain. As it has got many limitations.
- AMP does not support custom conventional javascript, which means your conventional function written in javascript in the original HTML page won’t work on the Google AMP page.
- You have to separately code your AMP page for every function in the AMP convention way.
- Learning AMP can cost developers and time.
- If Google AMP is not validated properly, it can pull your page down in Even the Google SERP.
- Many functions, plugins, and libraries would be limited in the Google AMP page.
Is Google AMP Pages really worth it?
It really depends on your need.
If you want to attract users from Google. your basic aim is ranking good on Google and if you can afford to spend some money on getting good results from Google. then yes Google AMP Pages is the answer for you.
If you are niche is really competitive and you are finding it hard to compete in the niche, or you are being a new blogger or a new website holder, then you can try your luck out with Google AMP pages.
As you know news websites are really competitive niche to complete in and if you have a website in that domain, your website really demands to have Google AMP pages.
As the users from that genre demands for good quality news and more news within less span of time.
In that genre, you need to have less bounce rate as well and Google AMP may help you with that.
Even if you are a blogger your website still demands and Google Amp page.
but if your website has some complex, functionalities or big functionalities to process, then AMP would not be the answer to your website.
Google AMP does not support complex functionalities it only supports less reduced functionality to give users basic information in less time.
If you still have any doubts about your genre of website.
Or if you are still confused about whether you should develop Google AMP page or not, just comment down your genre of website and I will be happy to help you. You can even personally message me on Facebook about this.
Related Posts:
6 Easy Steps to solve if Google Amp is not working?