by Usman SheikhThings You Need to Know About Accelerated Mobile Pages (AMPs)
Things You Need to Know About Accelerated Mobile Pages (AMPs)
AMP stands for Accelerated Mobile Pages, but most don’t know what it is.
“AMP” is a play on the words “amplify” to speed up, in this case, the load times of the site.
An AMP is a page created to improve the performance of the mobile web experience by creating fast-loading mobile pages. It is a project announced by Google on 7th October 2015.
You can learn the details all about AMP on their primary site: Ampproject.org.
Amateur digital marketers are not aware of what it is and how it works.
If you are new to AMP – then this blog will give you an overview with a slight bit of technical background and detail.
If you a Web Development Ninja – then we hope you find it a refresher and entertaining read!
So what is AMP again? It is a library that allows users to create light pages using best practices and optimized code.
This project was initiated by Google and Twitter to be super lightweight and fast loading.
Companies like Google, Twitter, and others use AMP.
They use AMP because it is intended to be an open response and an open-source framework.
AMP pages are distributed across a comprehensive range of consumer platforms.
Some of these platforms are Google, Twitter, Bing, LinkedIn, Pinterest, Medium, and more.
We are in a mobile-first world. Speed is important – super important.
The world is moving towards mobile and given mobile is slower technology than desktop ISPs, the need for faster lighter pages arises.
Google wants fast websites to effectively reach and engage users.
Whether users are browsing the net using 3g network or now the 5G networks that are becoming mainstream these days.
Fact – people do not like to stick around on slow-loading sites. Studies done by brands like Amazon have quantified the bottom-line impact to slow loading pages. 1% revenue drop for every 100ms decrease in speed – yikes! Learn more about the study here.
You’ve probably been frustrated with slow-loading websites (we know we have been).
And the cherry on top that makes you run away from slow-loading sites is that they usually are dated in design, and some may even contain obtrusive ads.
All this can lead you away from the purpose of visiting the site in the first place.
This is why the biggest referral network that wants to improve the internet experience for all users is behind this initiative (we are talking about Google here).
Despite half of the users abandoning slow sites, keep in mind that over 75% of websites on mobiles take more than 10 seconds to load on 3G connections fully and significantly longer on non-3G connections.
However, the research also indicates that 53% of users will leave a mobile page if it takes more than 3 seconds to load.
There is a disconnect in the needs of an average user vs. what he gets by the webmasters across the world wide web.
In fact, in several cases, the need to monetize the website has created bloated sites and lousy user experiences.
Remember, it is not a simple adjustment of monetization vs. performance.
Building a fast, attractive, well monetized, and functional mobile site often requires much effort and constant updates.
It is not an easy task to maintain a fast-mobile website on your own and often requires the assistance of a large team of skilled developers.
All of these reasons are why an AMP project was started. You do not need to learn advanced HTML or have an army of developers.
The AMP project has made it easier for even novice developers to rely on the library of code to design fast loading pages that are beautiful in look and feel.
I know by now, after this brief context and history lesson, you are probably wondering – so how does it work?
How does it affect my site’s user experience and why a smaller business that isn’t the size of the tech giants mentioned, really care?
So let’s get to it – here are some details that provide clarity to these questions!
A great video by Full Stack that talks about why, where it is used and some of the mechanisms behind it. Here is a screenshot presentation on a short but powerful video explaining how and where it works;
Image source: FULL STACK – ACADEMY of CODE.
What is AMP made of?
Technically, there are three main components AMP is built on for creating mobile web pages.
The combination of these three elements yields the super-fast AMP experience.
AMP HTML
This is an extension of HTML with some restrictions for better and reliable performance.
The HTML is extended with some custom AMP properties. These custom elements allow common tags to implement with site performance in mind quickly.
The AMP library is linked within the code, for example, execute an action that is written with the best industry practices in mind.
The tag within the HTML references one of the scripts and links to an AMP script library – allowing the webmaster to leverage the clean code that is optimized for performance (instead of writing the code for the same action in less than the optimal way that can slow the load times).
Now you are wondering here why it is faster or how is it faster vs. other code?
This is because unlike traditionally designed pages, the browser may not know how the content will be laid out until all the code is loaded.
AMP bypasses by making sure that each element size and position is determined within the HTML before the actual resource is loaded.
So AMP loads the resources of the page, before waiting for any resources to be downloaded – this concept is called “static layouts.”
All this is done to ensure the loading time is reduced as fewer resources are needed to load the page.
AMP JS
This is a library that ensures the fast rendering of AMP HTML pages.
Like the AMP HTML – these scripts in the library are linked to allow good clean code to be used.
Use these instead of using bloated code that can prevent poor rending to occur and thereby add to the load times.
Most pages contain code that is synchronously downloaded and can block the rendering of the page.
Using the AMP library allows for Java Scripts to be loaded asynchronously (in parallel) instead of sequential (or in the order specified) to allow for faster load times.
AMP Cache
This element fetches and caches APM HTML and is used to improve the performance of pages automatically.
The most notable benefit is the most obvious one too.
AMP speeds up the load times of web-page by about 40%, and Google search results prefer it.
This key benefit enhances user experience and stops users from bouncing to another page or page by enhancing the load time.
This allows your pages to be discoverable quicker with search engines through the <link rel=”> tag.
Image Source: SEOpressor
Higher Performance, Engagement & Flexibility:
AMP gives websites a great boost by giving users a smooth, more engaging experience on mobile and desktop.
Let’s assume; you want your average business to rank on top in the search results.
You want your brand to be associated with all the good things, especially when someone visits your site.
If the above-mentioned goals are your concern, then we strongly recommend that you use AMP pages!
If Google is behind AMP and it you want to on Google results, it makes sense to use AMP in your site.
AMP provides publishers and advertisers with flexibility.
It allows them to choose how to present their content and decide what technology vendor to use.
The library allows users to show content in different ways on different screens.
The screen renders faster, fewer resources are used, and the user gets to see what is on the page.
There are a lot of optimization techniques offered to webmasters to help their businesses to win and engage their customers.
The great developers provided all the techniques at AMP Projects.
However, the best part is, the wider internet community is the real winner!
A win-win-win (users, large tech giants, internet webmasters)!
Conclusion:
As digital marketers, we must stay abreast of the latest technological updates, and AMP is no exception.
We all understand the importance of fast loading sites.
And AMP provides a comparatively easy way to upgrade the speed of mobile websites for publishers.
To know more about AMP and how to bring it in use, you can reach out to us, and we feel excited to help you become an AMPed.
If you are a publisher or manage websites, then hopefully you are using AMP. If not, we highly recommend you start thinking about Accelerated Mobile Pages.
From a start-up helping local small businesses, over a span of 5 years, Usman has built Web Worx Labs to be a leading provider of digital marketing solutions that employs 15+ full-time employees and has customers in over 30 countries.
Outside of work and his passion for all things digital, Usman is a proud father of three, loves running and is an avid reader.
Follow Usman on LinkedIn or Twitter as he is always sharing tips on strategy, branding, marketing and analytics.