Accelerated Mobile Pages: Should you Host AMP on Sub-Domain or Sub-Folder?


I recently started to code the AMP Version of BeMyAficionado and the question popped up in my head. Should I host the AMP Version on the same domain in a subfolder or create another newly dedicated subdomain for the same? I was looking for the implications of both the approaches.

I analyzed multiple AMP websites along with multiple WordPress AMP plugins to find out the approach they are using and why. Most of them seem to follow a same domain different subfolder approach. I did not find any website in my search that uses a subdomain for that matter. After all, the amp is just another page with a different URL and canonical link pointing to your website. But then I found some useful insights and this article is based on that research.

 

What is AMP?

AMP Logo

AMP stands for Accelerated Mobile Pages. AMP is an open source initiative which aims to make the web faster and ads smoother in order to deliver the best experience to mobile users. Accelerated Mobile Pages (AMP) is powered by one of the best in the web business – GOOGLE. The google is giving special attention to AMP powered websites. Google is pushing content writers and publishers to adopt it as early as possible. In fact, it also affects the search ranking of the website.

According to one of the articles I read on SearchEngineLand, The website which is using AMP will have more weight in the Google SERP then its other counterparts. So, you see how important it is to write an AMP version of your existing website along with the big browser version.

AMP Working…

Usually, a website loads a lot of resources before painting a web page on the user’s browser. This resource loading requires bandwidth and processing. As we all know that Big Browsers that runs on laptops and PCs holds more processing power and memory as compared to the mobile phones. Therefore, AMP was built to remedy this situation.

Publishers and technology enthusiasts came together to build a system which would help mobile phones to load the page faster (almost immediately). AMP was born. AMP introduced its own native tags which are optimized to load the resources in a particular way that costs very fewer resources. It is a collection of all the best practices that are combined to deliver the best web experience to the user. So, In short, AMP is a restricted environment that follows the best practices of painting a webpage. You will know more as you read further.

What makes AMP faster compared to the traditional practices?

AMP forbids many ways of doing things on a webpage, rather, it provides only one way, the best way to accomplish any task required on the webpage. Here are some of the important stuff which makes it different from traditional web page-

Only Asynchronous Scripts

aysnc all the things

In a traditional webpage, there is no restriction on the use of synchronous script loading. As a result, synchronous script loads blocks the webpage from rendering until the script has been loaded completely. This prevents the browser to paint the page unless the scripts have been loaded.

On the other hand, AMP forbids Synchronous script loading and only allow asynchronous scripts. As a result, scripts do not block the browser from painting the page on your screen. This speeds up the process and makes a great user experience as you no longer have to stop for the script loading time. You can instantly see the page content, while browser loads the script in the background.

 

External Resources needs to have a Fixed Size

At first, I was unable to understand the need of a fixed resource size. But when it comes to AMP it is all about the user experience of the website. The fixed resource size helps the browser to load the page completely and leave placeholders in the place of resources such as images. As a result, as you scroll down the page, the images are loaded asynchronously and fills the empty space. This approach keeps the page stable and does not result in adjusting while you are reading the page’s content.

fixed size design

As I discussed before, AMP does not block page rendering. If it has to load some external resources, it prefers to load it in an Iframe. The iframe is required to have a fixed the size. So, as soon as you request a webpage that contains external resources from some third-party services, the iframe placeholder is created on the page without knowing what content it is going to hold.

Once the page has completed loading, the iframe is filled with content asynchronously. This does not affect the overall user experience and everything seems to load much faster and smoother. A similar example could be seen on facebook. Facebook uses this technique to load the placeholder before loading the actual data. This keeps the user intact by giving them a signal that the content has been loaded but in reality, the content is being retrieved at the backend asynchronously.

 

CSS must be Inlined and Size Bound

There is no restriction on the way you include CSS stylesheet on a traditional webpage. On the other hand, AMP does not allow you to link to any external stylesheet rather it encourages inline CSS inside the section<head> of the webpage. This helps the page to reduce the number of HTTP requests to load resources which are costly and prone to network latency.

Another restriction is the size of the stylesheet. The stylesheet has a limit of 15kb at max. The size makes sure that the CSS is being used efficiently.

 

Resource Loading is Prioritized

loading prioritized

AMP prioritize the resource loading on the basis of its urgency. Other resources such as images are loaded as it comes on the user’s screen. This is called lazy loading feature. It only loads the resource when it is actually required.

In case you want to read more on AMP, there is an amazing article written by David Attard on CSS-Tricks which you can find here.

I hope the purpose and use of AMP is clear by now, and if by any chance it is still unclear then please comment below.

 

Cons of AMP

With every great technology comes some of the drawbacks. Similarly, AMP has its cons for the moment.

Takes extra efforts to switch your website to AMP

AMP could take extra efforts from your side in order to implement the AMP version of your existing website. It requires a certain amount of knowledge and expertise before creating AMP version of your website.

If your website is built on WordPress then you don’t have to worry about the technical aspects of AMP. WordPress has a built-in plugin that creates AMP version of your entire website in just about minutes.

 

Hard to tell where it is headed towards…

confused with the direction

AMP is still very young. It is still in its early days and hard to tell where it is gonna go from here. So, if you are liking the carousel version of the AMP on your mobile currently then don’t be comfortable because this thing may or may not last in the future. There are loads of improvements which has to be made on AMP and one must stay connected with its evolving changes in the future.

 

Should you use AMP or not?

This is your choice. In my opinion, if you have a content rich website then AMP could really help you to increase your reach and search engine presence as this improves the user experience of your website. The better the user experience the higher is your website’s ranking in the google’s eye.

YES OR NO

I would recommend you to experiment with AMP and see if it is working for you or not.

On the other hand, if your website is functionality rich then you might want to wait and watch until AMP grows and starts supporting other functionality. Google is working on it at full speed and you are sure to see a lot of advancement in this field in the coming days.

I leave it to you whether to use AMP or not. Depends on your website’s content.

 

Should You Host AMP on Different Domain/SubDomain?

This is a matter of preference, if you are thinking that a separate sub-domain will help you to increase your website ranking then you are wrong. This is just a matter of preference whether you want to serve AMP pages on the same domain or a different domain.

However, there are a few important things that need to be taken care of. Such as a canonical link tag. A canonical link tag must be inserted in the head section of the AMP page pointing towards the original HTML version of the webpage. This tag helps google to link the AMP version of the page to the original version and rank the page appropriately.

As long as you are linking your AMP page to the original page, you are good structure your website in any way you want

Sub-Domain is more Manageable…

In case you are not using WordPress plugin to create AMP version of your website, you would want to choose a sub-domain to host AMP because it will help you to code and manage the resources in a better way. It will also help you to debug issues that arrives without interfering with the actual version of your website. This will definitely help you in the long run. As AMP keeps evolving over time, I think it is better to host the AMP version of your website on a different domain…

Just to clarify once again, it comes down to your personal preference. There is no added search ranking advantage or disadvantage with the different sub-domain. Whatever decision you choose, just think about it in long terms. This is something which is going to change a lot in coming time.

I would recommend HostGator Baby Hosting package as it offers a feature to host multiple domains on a single server.

Should You Use AMP, Is It Necessary?

It is true that google prefers AMP website for mobile devices. There are more chances that the AMP version of the website will pop on your screen compared to the original version. It is simply because AMP offers better user experience and faster website load time. Google has already stated before that it prefers faster loading website and AMP does exactly the same.

In my opinion, every blogging website or content-rich website must put their money on AMP and give it a try. Experimenting with AMP so early will definitely give you an edge. Either it will work for you or not. If it works, it’s a lottery, if it doesn’t then too it is not a big deal. I think you would definitely enjoy using AMP for the first time and will help you to gain some extra visitors.

 

The Verdict On AMP

AMP is very new and Google is the brain behind AMP. It is an open source project and is growing at a rapid rate. I would recommend everyone to give it a try and be the early adopter of this technology. AMP will soon become the web standard in the future. It is only intelligent to adopt it early and be the change.

One thing is clear that Google has an affinity towards AMP and this love is going to grow stronger in the future. Fast loading website has become a trend and AMP provides just that.

Time To BECOME THE CHANGE. Click To Tweet

 

Like this article? Share the article with the world.

Have questions? Start a discussion below.

Get Access to BMA Library of free resources

Grow Yourself and Monetise your passion.

Join over 200 others and get access to my library of free resources for online entrepreneurs.


  • Article By: Varun Shrivastava

  • Varun Shrivastava is an innovative full stack web developer. He is a passionate blogger and loves to write about philosophy, programming, tech and relationships. He works as a Software Developer. This is his den, you can get in touch with him here anytime you want.