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)!
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 firstname.lastname@example.org 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:
- 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.
- 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.
- 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:
- You can also use this AMP validator extension
- 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:
- 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.
- 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@example.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.