AMP Web Development: What Is It?

Most of our online activities these days are done via our mobile devices. This is why web developers and content publishers (e.g., bloggers, content writers) are constantly finding ways to refine their websites in order to give us a better internet browsing experience.

With the advent of responsive web design, we have seen many websites make a shift towards this approach to cater to the exponentially increasing number of mobile users. Responsive web design is a method that uses codes to automatically resize websites to fit any screen size. Gone are the days when we had to switch our device’s orientation or scroll horizontally across our screens to see the entire page of a site.

If you think that makes mobile web browsing more convenient, then you’ll be happy to know that the ever-evolving nature of web technology has made it possible for many websites to improve their speed and readability, especially for mobile devices.

AMPing it up in October of 2015, Google started the AMP or Accelerated Mobile Pages open-source initiative, which aims to make web content rendering on mobile devices faster by stripping it down to the basics. The team spearheading this project is managed by Tech Lead Malte Ubl, who explains how AMP makes quick-loading pages possible:

1. Lazy Loading

This means that resources like images and videos will only be loaded once they are on your current viewport or while the page is idle.

2. Static Resource Sizing

AMP requires sizes of page elements to be defined in the markup, allowing it to predetermine the scope of the area they will occupy. They are assigned a dedicated space on the page using a box or inline frame (iframe for short) without downloading the actual resources yet.

3. Async JavaScript

Through the AMP JavaScript, extensions are loaded asynchronously (that is, not simultaneously) via a script tag to prevent them from blocking other more essential elements on the page. Their iframe is reserved immediately and then filled with content once the extensions load. For example, an embedded YouTube video will not load on the page you are viewing right away. Instead, the async JavaScript will execute all the text and elements native to that page first, reserve a space with an iframe as a placeholder for the YouTube video, then load the video after all the page elements have finished loading.

4. CSS Portion Control

All CSS on AMP must be inline and should not be bigger than 50 kilobytes. The AMP project team arrived at this size through testing (i.e. actual creation of web pages) and came to the conclusion that this size is large enough to build a sophisticated page, but not big enough to use the same style sheet for a full-blown website. Using the same style sheet requires more space and, thus, takes more time to load.

5. No HTTP Requests Until Fonts Start Downloading

As a result of the async JavaScript and inline CSS features, fonts download independent of any HTTP request so any flash of unstyled content (FOUC) is avoided. FOUC is the brief appearance of a web browser’s content before receiving style information from external CSS. In other words, AMP prevents you from prematurely seeing content that doesn’t look the way it was intended to.

6. Resource Prioritisation

AMP manages all downloads of resources. It knows which information is most important at any given time so it prioritises the execution of these. For instance, only the elements that appear in the user’s viewport or above the fold are immediately loaded while information for the rest of the page is being fetched.

7. Preloading

In relation to resource prioritisation, preloading allows you to load resources prior to its usage and determine when each should be applied on the page you’re currently viewing. It also enables the browser to identify the resource type so it can assess if the same resource may be reused in the future. This process happens in the background and does not affect how the browser loads the page.

8. Prefetching

In contrast to preloading, this function fetches resources for the next possible action that the user might take. It involves fetching resources in the background or during an idle time that might be needed later and storing them in the browser’s cache. Once a page has been executed, it begins downloading additional resources that are made readily available in the event that a user requests for it (e.g. when a user clicks on a link to an external prefetched page, the website can load that page instantly).

9. Prerendering

Much like prefetching, prerendering functions while on idle, but instead of collecting external resources assumed to be required by the user eventually, it renders all the internal assets for the entire page in the background.

10. Perception of Speed

All the above-mentioned features and functions of AMP contribute to making webpage loading appear instantaneous, but the truth is that AMP only offers a semblance of instantly-loading content. What really happens is that some elements, like text, are readily available on the first viewport. While your screen is still on that level, the rest of the page is putting itself together so, by the time you scroll down, the content at the bottom part of the page will already be there.

Lightning-fast loading

Some websites have adopted AMP since its launch in 2015. If you search via Google on your mobile device, you will notice a carousel of Top Stories and each of them having a tiny lightning flash logo. This means that these pages have been AMP-optimised.

The obvious benefit of AMP is speed. This leads to a higher likelihood of users clicking on your page, generating greater traffic and potentially, conversions. Less loading time also translates to a lower bounce rate, which increases the possibility of closing a sale.

Imperfections of implementing AMP

While AMP-friendly pages may prove advantageous to users, some of its functions might pose a problem to publishers and advertisers. For instance, AMP’s resource prioritisation operates such that the main content of a page loads first before external resources, which includes advertisements. Visitors will have a tendency of scrolling past an iframe intended for an ad without even noticing it, resulting in a missed conversion opportunity.

Another drawback to implementing AMP on your pages is just that: implementation. AMP uses HTML codes that are different from those used by other websites. Its restrictive framework may compel developers to build from scratch in order to produce an AMP version of an already existing page. Luckily, if you’re using WordPress, Google has come up with a plugin to easily convert your page to an AMP-friendly one. But for those who are non-coders and non-WordPress users, AMP-ing your site may pose some challenges.

Is AMP for you?

The Accelerated Mobile Pages project attempts to solve the issue of slow-loading mobile pages. It is equipped with features that allow content to load at lightning speed so users enjoy fast mobile browsing. But the AMP framework also has challenges, especially for advertisers and developers. While breakthroughs in technology can be very exciting, it is essential to take a step back and analyse how these will affect your website or business in the long run. AMP is a promising solution, but ask yourself: is it the one you need right now?