Man in bowtie folding arms
Cheap SEO: Why You Get What You Pay For
January 13, 2017
moonwatch (9)
5 Crucial Things To Know When Hiring an SEO Professional
February 13, 2017

Google AMP Tutorial: How to Make Your Website’s Page Speed Lightning Fast

Google Amp Tutorial
If you have a WordPress website what I am about to tell you is a no brainer…  
If you don’t have a WordPress just need a strong left side of your brain and a stiff upper lip (unless you’re a coder, then this will be a cakewalk.) 
 
Have you heard of AMP? It’s stands for “Accelerated Mobile Pages”, Hello? You still awake? Stay with me. 
 
Basically what it does is make your page load super fast on mobile and help your website to be loved by Google (who is a suitor we all wish to woo.) If you have a WordPress site all you have to do is install a free plugin (see AMP for WordPress Section.) 
In this Google AMP Tutorial I’ll show you how to convert your site’s pages over to AMP, and explain some of the powerful benefits you’ll get for doing so.

What is AMP?

AMP stands for Acellerated Mobile Pages, it’s a open source project which makes pages load faster on mobile. It can cut the time it takes for your website to load in half and we know, because it did that for us. In the Google AMP tutorial video included in this post, you can see us installing it live onto our site.

Are you ready for a techinical definition? Here is the exact wording that the creators of AMP used to describe it:

“AMP is a way to build web pages for static content that render fast.AMP is HTML with some restrictions.” -Ampproject.org

 

Why update your pages to AMP?

As you’ll see in the video below, studies suggest that 40% of users will bounce from your page after waiting for just three seconds (about the same time as a Goldfish can remember things)(though Goldfish memory is in dispute)! 

AMP pages make it so that your website loads almost instantly. It does this by cutting down the amount of html you can use, and gives you a library of javascript that will be sure to load quickly (learn more deeply how it works click here)

If you’ve ever tried to load a page on your mobile phone and it took forever, it is not just because of the internet connection, it can also be because of what the publisher is trying to accomplish. As mentioned in the video publishers often have to walk the fine line between page loading times and monetization, much of what slows down a page is the ads that pay for the free content. AMP provides a way for publishers and users to meet in the middle where the user gets their content quickly and the company gest their money

How to update your page to AMP (TECHNICAL) 

WARNING: If your a regular business owner you’ll be able to do this part but your not going to like it, feel free to shoot me an email at [email protected] if you get stuck, I’ll help you figure it out. If your a WordPress user you can just skip down to the next section, where setting AMP up is a field of Primroses.

Let’s do this.

First thing your going to need to do is open up the official AMP set up guide from their website by clicking on this link here. Next, if your in a place where you get audio, watch our tutorial on how to set up AMP pages (if your anything like me there is just something about watching people explain technical things instead of just reading it.)

Here is the basic rundown of the steps:

  1. Create AMP HTML Page:  As I mentioned in the beginning AMP is a special type of HTML and has particular requirements that it has to have to work. It is essentially stripping your page down to it’s most important elements so it can load faster. The requirements you need to follow are all listed on this page.
  2. Modify presentation and layout– AMP has built in layout techniques that differ from regular CSS layout. There are specific things that you can and cannot do with it. Click the link for this step and check it out.
  3. Preview and Validate: In this step you validate that the AMP complies with Google’s guidelines so that it will actually work. You can test and see if the page is working by going to the URL for the page and copying and pasting this tag to the end of it:
    1. #development=1
    2. You can also use this AMP validator extension
  4. Prepare page for distribution:  Add link and canonical tags. The reason you do this is to tell Google that these two pages are linked. Once they are linked and are validated they are good to go.

Google AMP Tutorial

 

AMP for WordPress (EASY)

Life is just better on WordPress. You almost wouldn’t need a “Google AMP Tutorial” if everyone was just a WordPress user (no offense to the other platforms.)

To get your pages AMPed up (that is a pun that needed to be made) is to choose one of two plugins:

Here are your choices:

  1. AMP plugin by Automattic – This plugin automatically generates AMP versions of the post.  You may need to install Yoast SEO Glue if you use Yoast. 
  2. Accelerated Mobile Pages– This plugin generates automatic AMP pages as well but gives you a bit more control.

If you want to see us install it live on Netmark’s site you can check out the video above or just click here.

How to see if your page loads faster

Well, we’ve covered a lot of ground in this article and if you want to see the fruits of your labor you can test your normal web page loading time and your AMP pages by taking the URLs and comparning them side by side on gtmetrix.com. In the tutorial video included with this article you can see exactly how to do this. It is really fun to see your page loading time get cut in half. 

If this all seemed a bit technical and you’d like to have it done by a professional or you’d simply like to know more about how to get your site to show up faster on mobile. Please feel free to reach out to me at [email protected]rk.com or click here to set up a free consultaiton.

This concludes our Google AMP tutorial,  Feel free to leave a comment below telling me your thoughts.

Bruce
Bruce
Hello, my name is Bruce Peck! I love digital marketing and I am the social media strategist for Netmark.com.

Leave a Reply

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

Top
NEVER make a serious Wordpress SEO Mistake again, with this simple checklist.

NEVER make a serious Wordpress SEO Mistake again, with this simple checklist.

Download our free, one page, power packed SEO checklist for WordPress. 

You have Successfully Subscribed!