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

Google has long rolled out the technology of Accelerated Mobile Page and most of the news/blogging websites have already started their website’s AMP version. And I know you are going to create the AMP version of your website as well.

So, Should you host the AMP version on the same domain (in a subfolder) or create another newly dedicated subdomain (like a new website)?

I’m going to talk about the best approach in this article.

If you know about the AMP technology, how it works, its pros and cons then feel free to move on to the main section.

If not, then read the entire article.

Table of Contents

What is AMP?

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

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.

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

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 are 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 take extra efforts from your side for its implementation. It requires 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 plugin to do it for you.

Hard to tell where it is headed towards…

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.

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?

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… Let’s find out.

Does AMP Hosting Affect your Website’s Ranking Factor

One thing is for sure:

AMP Hosting will not affect your website’s ranking in any way. So, if you are in a dilemma if AMP hosting will have any effect on your website’s ranking factor or not, then do not worry. It has nothing to do with your website’s ranking.

If you are here to know about ranking factor then this is it. You may go and enjoy your life like before, but there is one more thing to it. You can increase your website’s traffic by using AMP. After all, this is the whole point of creating the AMP version of your website.

Canonical Link Tag is a Must

A canonical link tag looks like this:
<link rel="canonical" href="https://www.bemyaficionado.com/wp-db-migrate-latin1-utf8/" />

This tag must be inserted in the head section of the AMP page pointing towards the original HTML version of the webpage. It 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 can structure your website in any way you want. You can go with either approach, host it on the same domain or different doesn’t matter.

Sub-Domain is more Manageable

Hosting on a different domain or same is a matter of management.

It depends on the size of your website. If you like to keep it modular and separable then you can definitely go with the sub-domain approach. And I’m not just talking in terms of the file structure, but also the website’s URL structure.

How would you like to see your website’s URL?

amp.yourwebsite.com/abc-def-xyz/

OR,

www.yourwebsite.com/abc-def-xyz/

What is the easiest way to create AMP website?

Use AMP for WordPress plugin.

This is the simplest and easiest way to get started with the AMP version of your website. Install the plugin and you are done.

Yes, it is this simple.

Let me show you the final AMP version you get after enabling the plugin. Below is the screenshot of the AMP version of this article,

The original URL of the page would be appended by /amp/Â to load the AMP version of the website. Rest everything would the same as before. This is my first choice if you want to enable the AMP version of your existing website.

What if you do not want to use this plugin?

In case you do not want to use the plugin then you will have to code the AMP version of your website by yourself. If you are a programmer then you will have to learn the AMP structure and if you are not then you can hire a developer who will do the same for you. It will cost you some bucks.

This approach will give you more freedom and flexibility with your design and hosting options.

If you are going with this approach then choose subdomain as it will help you to keep the concern separated. It will also help you to test the version separately without interfering with your main website.

As long as you are following the AMP structure correctly, your website ranking would not get affected in any way. It will rather increase because you will attract more mobile visitors to your website. You will have more pages indexed in the Google’s server.

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.

If a user is searching on their smart-phones and your AMP version is clean (without errors) then Google automatically list down the AMP version of your website.

AMP offers better user experience and faster website load time. Google has already stated before, 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.

[bctt tweet=”Time To BECOME THE CHANGE.” username=”vs_shrivastava”]

Like this article? Share the article with the world.

Have questions? Start a discussion below.