00 : 00 : 00

Optimizing Your Site for The Mobile Web: What is Google AMP?

MotoCMS Editorial 14 March, 2017
1,814
1

Statistics says that about 53% of mobile users drop out a website after just 3 seconds. Why do people so impatient? The answer is as clear as daylight. In our rapid world, users got addicted to the dead run of the Internet. The thing is they don’t know that it is not enough just opening a favorite website via smartphone to make mobile experience a smooth sailing.

What is Google AMP - main

There are a lot of awesome content to show off, but, still, some website owners may not able to get a visitor what he or she is so eager to see in a very strict amount of time. Thanks to Google initiative, every publisher on the web has a truly incredible opportunity to increase the loading speed of own website seamlessly and at zero cost.

What Is Google AMP?

AMP stands for Accelerated Mobile Pages – a special project launched by Google in cooperation with dozens of world major IT-companies, developers and website owners. The main goal is increasing a website rendering on mobile devices due to the new technology approaches implementing.

What is Google AMP - website templates

The framework is an HTML-based open source that works on the principle of a website pages weight reducing. Every time you ask Google to assist you with your smartphone or tablet, you can notice a special marking near an AMP-optimized website.

Recently MotoCMS has initiated its own way to AMP with optimizing its online template store. For starters, look at its common version.

What is Google AMP - amp dektop

You are welcome to visit it with your desktop computer anytime. Now let’s have a look at the AMP version that was developed for mobile devices.

AMP for The MotoCMS Store

You can see the result for yourself and try to search for your template with your mobile device just right now. The difference is huge, don’t you think so?

What is Google AMP - motocms amp store

The page is fully optimized and layout became much lighter. In near future, we are going to create AMP for the rest of the MotoCMS website pages. To learn how you can create your own AMP website, read the tutorial below.

Why So Fast?

AMP is the true renaissance of the web in terms of creation process. The trick is that Google web developers didn’t invent something new. Since they took the weight reducing concept as a basic, it made possible for the existing techonogilies remain up-to-date and even evolve in that way.

What is Google AMP - mobile view

AMP HTML

The lightweight version of HTML lets a publisher modernize already existing HTML pages with extra syntax, and, in such a manner, add a couple of limitations for better performance. From the time-consuming perspective, it is a perfect solution.


  <!doctype html>
<html amp>
<head>
     <meta charset="utf-8">
<link rel="canonical" href="https://www.motocms.com/website-templates/">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="theme-color" content="#ffab25">
<title>Website Builder Templates | MotoCMS</title>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style>
</head>
<body>MotoCMS Website Creator Rocks!</body>
</html>
  

Let’s review the basics of an AMP HTML document:

  • Begin with <!doctype html>;
  • Top level tag like  <html ⚡> or <html amp> is a must;
  • <head> and <body>  tags included as well;
  • The <head> tag is followed by <meta charset=”utf-8″>;
  • Put the link to your website with <link rel=”canonical” href=”$SOME_URL” /> inside the <head>;
  • Append a <meta name=”viewport” content=”width=device-width,minimum-scale=1″> tag inside the <head>  tag;
  • Append a <style amp-boilerplate> tag inside the <head>  tag;
  • Add <script async src=”https://cdn.ampproject.org/v0.js”></script> before the closing tag </head> to load AMP JS.

Creating AMP should be a simpler task for everyone who is familiar with HTML. Some of the HTML common tags for adding content like images, audio or video are replaced with their AMP equivalent.

For example, to tag an image you should replace a well-known <img> tag with its AMP equivalent <amp-img>.

Inline CSS

The usage of CSS to create an AMP version of your website is restricted. Before using some styles, make sure they are supported in AMP pages. To add a CSS style, put a <style amp-custom> inside the <head>  tag.


  <!doctype html>
          <head>
          ...
          <style amp-custom>
          /* any custom styles go here. */
          body {
          background-color: white;
          }
          amp-img {
          border: 5px solid black;
          }
          amp-img.grey-placeholder {
          background-color: grey;
          }
          </style>
          ...
          </head>
  

Keep in mind that there must be only one style amp-custom tag. More is not allowed in AMP.

AMP JS

Forget about JavaScript. Or at least, about the way you use it. Instead, you will be provided with an asynchronous AMP JS library that does a power of good and make your website loading faster. Interestingly, a static website with no custom JavaScript may require no second AMP version.

Google AMP Cache

Google caches your AMP on their servers by default, making them loading much faster with the HTTP/2 protocol. There is a common AMP cache URL format a publisher must follow. It’s an obvious point that Google AMP Cache works over a secure HTTPS channel.

AMP Validation

There are a lot of ways to validate your AMP pages from using an existing.

  • Search console. If you already have a website, it is recommended to test it with an AMP validation service first and see whether your page is an AMP-friendly or not.
  • Interactive editor. If you like working in your web browser, you can use an AMP validator and edit your HTML document by checking and correcting errors in real time.
  • Developer console. It is one more method to debug your AMP page in your web browser. Just add #development=1 to the URL and open a developer’s console to get started. (example http://www.mywebsite.com/released.amp.html#development=1)
  • Browser extension. You can upload a built-in browser tool for Chrome or Opera. There are 3 colored indicators to identify errors by eye.
  • Common validator. To build your own validator, you have to install Node.js with an NPM package manager and activate the AMP HTML validator command line tool by typing a  <npm install -g amphtml-validator>  command.

Does Your Website Require an AMP version?

Since every business is built in certain circumstances and requires a personal approach, the right answer depends on a plenty of factors.

  • Mobile traffic. Calculating the total percentage of mobile users is the first thing to do when considering about building an AMP version. Do you know how much mobile traffic you get? If the statistics show that a large part of users accesses your site via mobile devices, you’d better look sharp!
  • Content diversity. Prior to the AMP project, non-static websites with animation, pop-ups or any other interacting elements used to be a true nightmare for a user of any mobile device. Needless to say that if you feed a visitor with a lot of interactive content, you should be prepared for a barrage of fair accusations. AMP is a perfect solution for the websites with a large amount of data like online stores and media sources to optimize a user experience for the mobile web.
  • Ranking issue. Page speed is crucial for Google in terms of search rankings. At the moment, AMP is not considered as a boost factor. But if you have an AMP page and a traditional mobile page, Google will give priority to the first one. And don’t forget that AMP is not a temporary kludge to put in your site. This trend is a working solution, taken seriously by dozens of authoritative web resources. Though AMP is not obligatory, it may become such in near future due to the factors mentioned above.

How Can Your Online Business Benefit from AMP

  • Instant loading. The Google and SOASTA research showed that 70% of pages overall the web requires more than 10 seconds to be fully loaded. As for AMP, this index decreased in 3 times. Put bluntly, the results are fascinating. Don’t you think so?
  • Conversion and bounce rate. Your chances to increase your site conversion level and cut back a bounce rate are rising exponentially. Just imagine how a mobile user reaches your site within only a few seconds. It is a great delight for any visitor and a spectacular solution for a website publisher to make the best first impression.
  • Refined ADS impact. If you get profit with the online advertisement, check out this case study – Hearst media company increased its CTR on ADS in 45%. Of course, your company may have less impact, but AMP is a game changer that you can use for your business as well.
  • Open source.  The best part is you don’t have to spend your budget on creating an AMP version for your website. As mentioned, the framework is available for everyone and totally free of charge.

The Future of Accelerated Mobile Pages

The AMP project is gaining its momentum now. Throughout incomplete 2 years, the results of this initiative are certainly fascinating. By March 2017, there are more than 1.6 billion AMP pages published. Every day this number is only increasing – more and more both big-name brands and growing businesses start using AMP to make a user experience of own audience more comfortable.

Anyway, it is no secret that such a tremendously large amount of developers, publishers and platforms that have already employed AMP is also a strong foundation for the Google developers to collect potentially valuable data, in order to keep improving the web performance for mobile users all over the world.

Author: MotoCMS Editorial
Here are the official MotoCMS news, releases and articles. Find out the latest info about product, sales and updates.
  • hi sir, Thanks for this excellent tutorial post. I am a beginner to blogging and learning from the web. This kind of posts increase my knowledge and confidence. Google amp setting is now essay for me. Thanks a lot

Register Your Free Demo Version
with social accounts
or email
Please enter a valid email address.
You’re Changing Template
You're about to change the template in your trial account - we'll send you an email with a confirmation link.

But please note that the changes you've made to your previous template will not be saved.
Check Your Inbox
Please check your inbox and click on the confirmation link from the email we've just sent you.

As soon as you verify the template change, you can start with your new design.
Check Your Inbox
You're almost done with the template trial registration.
Just 1 more step left to start enjoying the world of
MotoCMS - we'll send you an email with a confirmation link.
Enter your Email
Check yout email
Some error. Please, try again later
Я даю согласие на обработку персональных данных в соответствии с политикой конфиденциальности