Have you ever searched for something on Google, to find 1 or 2 websites (or maybe more) that have this tiny icon right next to it? ⚡

If you’ve clicked on these sites, you’d know exactly why they are so special. Within the blink of an eye, the page loads. The website you see isn’t the actual website. It’s a stripped-down version of the original page, designed specifically to load almost instantly. This is such a great feature, especially if you’re in a hurry. Nothing grinds my gears more than clicking on a website I need to urgently visit, and having to wait for all its bells and whistles to load.

The website you get is lighter. Almost like it’s been on a diet. Well, there’s AMP for you. It gives you a “diet” HTML page.

If you need help setting up your own AMP pages, talk to us.

What exactly is AMP?

AMP (Accelerated Mobile Pages) is an open-source initiative that ensures your website loads quickly, almost instantaneously. When it was introduced back on February 24, 2016, a lot of mobile users were on 2G and 3G networks. It was crucial to make websites load as fast as possible. Even now, with 5G just around the corner, website loading speeds play a massive role in overall site traffic. People want websites to load fast. They’d rather spend their time finding another site than waiting for yours to load. Statistics show that around 40% of people will exit a page if it takes more than 3-4 seconds to load. If your business revolves around your website, these few seconds can lose you a lot of money!

AMP was created with the intent of improving the user experience for mobile users. You can customise how your AMP pages will look like to a visitor. Since content is delivered to a visitor within the blink of an eye, your websites have a significantly better advantage than the other websites. The truth is, good content doesn’t mean anything if your site takes too much time to load. People will lose interest and leave. Pages that are AMP optimised will also rank better on Google’s search results.

To enjoy the advantages of AMP, your web pages need to meet some requirements set by Google. Once that is done, your content will be optimised and your website will be served directly via Google’s servers. There is even an AMP plugin you can use on your WordPress websites.

How does it work?

There are a few things that make AMP pages load faster. Let’s take a look at some of them below.

Render-blocking JavaScript is one of the biggest problems that affect page loading speeds. To avoid slow rendering of pages due to JavaScript, AMP allows only asynchronous JavaScript. When the browser sees an async declaration, it understands that it does not need to wait for the resources to load. The AMP pages do not use any JavaScript written by the developer, they only contain custom AMP elements. Interactive web features are handled by these custom elements. They are specially designed to prevent the poor performance of the web page.

An AMP website is an HTML site with a few restrictions, to enable better performance. Some HTML tags of your AMP website is replaced with AMP-specific tags. External resources like images and ads must state their size in the HTML. AMP can determine each element’s size and position even before the resources are download. This has another added benefit as well. Prioritization of resource loading. The most important resources are loaded first. This basically means that the images that the user is most likely to see first are loaded first. AMP separates document layout from resource layout.

Like every web page, AMP pages are also styled with CSS, but there are a few limitations put into place. You cannot reference external stylesheets (except custom fonts). Only inline styles are allowed. A few styles that might inhibit performance are also not allowed. AMP also restricts CSS size by setting a limit of 50 kilobytes.

Web font optimization is also crucial to performance. In AMP, the system declares zero HTTP requests until fonts start downloading. AMP also allows only GPU-accelerated animations, freeing up the CPU and making the website run faster.

Keep in mind that some of the features you are used to seeing on a normal web page won’t be available on AMP web pages. This includes things like lead forms, geolocation scripts, and some tracking cookies.

To conclude

AMP has revolutionized mobile web optimisation. If your website has a lot of static webpages, it might be wise to start the transition to AMP. For dynamic pages, a lot of the functionality will have to be sacrificed. There’s also a similar feature available on Facebook called “Instant Articles” that basically does the same thing. But that’s a topic for another time.

Talk to us if you want to set up your own AMP pages.