Google’s AMP HTML Speeds up Page Load Time!
AMP HTML can Improve Website Performance
In February 2016, Google launched the AMP HTML Project to improve mobile experiences through a framework of HTML elements which decrease page load time when users request websites on mobile devices.
In short: implementing AMP HTML can improve website performance!
Did you Know: “Soasta found 47% of users expect web pages load faster than 2 seconds.”
So AMP HTML decreasing page load time of web pages is kinda important for your users, right?
Here at Pirl Media businesses ask us how to make my website load faster? Well who doesn’t want to make their web pages load faster?
If you’re a developer, SEO or marketer; consider your users and strive for faster web page loading.
You can easily make web pages load faster with AMP HTML elements and Google’s Accelerated Mobile Pages framework.
What is AMP HTML and how will it Improve Website Performance?
We live in a world of technology where we expect information to be quickly accessible.
Whether we order a takeaway with Just Eat, see when friends receive our messages on Messenger or make a bank transfer through mobile apps..
We want to perform meaningful actions and receive quality information – and we want it instantly!
Your users are no exception.
Why shouldn’t we deliver high quality content quickly to followers and newcomers to our brands?
This is why Google developed the AMP Project; a web development framework aiming to improve website performance and page load times.
The AMP Project consists of 3 fundamental components:
- AMP HTML
- AMP JavaScript
- AMP CDN (Content Delivery Network) similar to frameworks like Bootstrap and jQuery.
AMP HTML documents tell mobile browsers:
‘Hey, Mr. Server! Only provide content above the web page’s fold. I don’t want any interactive content. I simply want readable information like text and images. All I’d like is the smallest file size possible… because I just want to read all about xyz now!’
Now you know how AMP HTML documents speak to mobile browsers, I bet you’re a tiny bit interested in how you can start using Google’s AMP Project to decrease page load time and improve website performance.
Am I right?
Let’s dive in to using AMP HTML on your web pages!
How to use AMP HTML on your website
First of all, we need to change our standard <html></html> tags to <html ⚡> </html> tags.
I’ve left out meta tags for simplicity and readability – but please know they are essential for AMP HTML validation!
Your markup should look like this now:
See how I’ve highlighted the new AMP html opening tag in blue? That’s our focus here.
Adding the AMP Project HTML tag to your html document is the first change you must make to use AMP HTML for decreasing your web page load time and to improve website performance!
Now we should add a <link rel=”canonical” href=”$YOUR_URL” /> tag inside the <head></head> tags of your document.
You need the canonical value to avoid duplicate content!
The self closing <link /> tag will link to the normal HTML version of your AMP HTML document for users who aren’t visiting your website on mobile devices.
So this is how your markup would look:
Remember when we discussed the three components which make Google’s AMP Project possible?
- AMP HTML
- AMP JavaScript
- AMP CDN
Now’s the time to get our document integrated with AMP JavaScript!
We just need to add a <script></script> tag – again we’ll be adding this inside our <head></head> tags.
Save yourself some time, here’s the JavaScript:
<script async src=”http://cdn.ampproject.org/v0.js“></script>
This is also how you will harness the power of AMP CDN!
Talk about added value, right?
Here’s how your markup will look:
Next let’s have a look at how some HTML tags you’re accustomed to will be different when you start implementing AMP HTML for faster web page loading!
Including Media on web pages with AMP HTML
I’ll make things simple for you.
We love making things easy for users.. Don’t we?
- Self closing <img/> tags are replaced with <amp-img></amp-img> tags. These new tags add images to your web page. You must specify images’ widths and heights.
You should set a background-color: grey; style in your cascading stylesheet as a fallback in case your users cannot load the images. Put your users first, remember!
- To embed YouTube videos you’ll replace <iframe></iframe> tags with <amp-iframe></amp-iframe> tags.
You can only embed from secure HTTPS URLs.
- To add audio to your web page all you need to do is add a script to the head of your document. You’ll find the script link here. Use <amp-audio></amp-audio> tags.
I dream of backlinks.. But wait! AMP HTML has SEO benefits too
Did you really think I’d write a whole blog post without mentioning SEO? Come on!
If you know your stuff when it comes to SEO you’re bound to have connected the dots and found some ways Google’s AMP Project can improve your website’s SEO but here’s a quick summary for readers who aren’t SEO wizards like us.
Everybody can learn something here:
- Decreasing page load time will reduce bounce rate
- If you reduce bounce rate, users won’t click on other search results
- So you’re maintaining full benefit of your Click Through Rate metric
- Google favours mobile friendly websites
- Google created AMP HTML and AMP project, so they approve!
So now you know how to decrease page load time using AMP HTML.
You’ll improve your website’s User Experience, improve website performance and benefit from faster web page loading.
Everybody should aim to provide their audience with a better experience (you can do this with Google local reviews too)
If all this was a bit over your head, it’s ok.
This is kinda technical stuff we’re dealing with!
What’s more is that AMP HTML was only released in February 2016 so it has a lot of untapped potential to get ahead of your websites’ competition.
If you’re finding it tough, get in touch with the most up to date and results based SEO company Liverpool has.
We’re pretty good at SEO!
Hi my name is Peter, I run Merseyside Web and I'm passionate about on-line marketing. Interested in my business working for yours? Our £77 per week SEO services mean that it is now cheaper to rank a local site with Liverpools #1 SEO , than most of our competitors occupying the lower positions on Google! Check out our £77pw SEO services!
Follow us on: