Beginners Guide to Accelerated Mobile Pages – Learning AMP
AMP is a phrase that is being thrown around a lot within the digital world. In case you didn’t know, AMP means Accelerated Mobile Page. That’s right, we will be talking about accelerating your pages for mobile devices. Trust me, it is absolutely worth it if you’re wanting to improve your site’s User Experience on mobiles.
What is AMP?
AMP is an open-source initiative designed to load web pages quicker on mobiles. Google partnered up with various other publishers and technology companies to create the framework in which AMPs are built.
In basic terms, an AMP web page is a page that has been simplified specifically for mobile users. This allows for a much quicker page load time. A quicker load times means a better UX.
Let’s get a bit of background on the subject. AMP first appeared on the web in 2016. The original purpose was to rival Facebook’s ‘Instant Articles’. Instant Articles were made to optimise Facebook for mobile users. It was designed so that the articles featured on Facebook loaded instantly without the user ever having to leave the Facebook site. Google liked the idea of instant load times, and thus – AMP was created. Today, 25 million websites have published more than 4 billion AMP pages.
Have you ever done a search on Google on your mobile and seen these icons?
That right there is the icon for AMPs. Keep a look out if you’re someone who hates slow loading pages!
Our test
I wanted to test this, so I conducted a little experiment myself. I timed how long two AMP pages took to load on my mobile once clicked, and the same with their desktop versions. The AMP pages loading times were 32 milliseconds and 30 milliseconds, compared to the desktop version’s 3 second and 4 second loading times. Clearly, there is a difference and Google have hit the mobile-optimisation nail on the head. In fact, the median time it takes an AMP to load from a Google Search is less than half a second. This is 88% faster than non-AMP pages.
These mobile optimised pages are used mostly by news articles and blog posts. For example, the two pages I mentioned above are both online news articles. They’re good for these types of web pages because, as you’re about to find out, AMP pages remove a lot of functionalities from websites. So, pages that only need text and pictures on are ideal for the AMP framework.
Now you know what they actually are…
How do they work? (Simplified)
The first thing you will need to know when understanding how these pages work is that once you click on a lightning bolt page in a search, it’s not that actual site you will be direct to. Google collects and caches all the content and material of the page and saves it in its memory. Ultimately, it then has that page stored, meaning it no longer needs to refer back to the original site and render all the information again.
If you click on an AMP page and look at the page’s URL, it still says ‘google.co.uk’ and features ‘/amp’. Other non-AMP pages have their own websites URL like ‘argos.co.uk’.
The way these pages work is by targeting what is complicated and time consuming about a page and how it will affect it on mobiles. Some reasons a page would take longer to load on mobiles are;
- Overly complicated HTML and Java Script
- The server has a slow, lagged connection
- The CSS (Cascading Style Sheets) is written badly
- The page has too many resources on them, and some mobile devices simply cannot process it
These AMP pages target these issues by reducing complicated script, caching pages to save re-direction to other sites and using a new JS (Java Script) library.
Putting it simply, Google removes any unnecessary code.
Google wanted these pages to help make using mobile devices much easier and smoother, which is what they’ve managed to achieve. If you’re wanting your content to have a quicker loading time for mobiles, I would definitely advise looking into creating some of these Accelerated Mobile Pages. Especially considering 51.3% of all web traffic now comes from mobile devices!
