fbpx

AMP and the future of Web Design

March 12, 2019

Are you satisfied with the loading time and fluidity of browsing web pages on your mobile device?

No? Well you’re not alone, AMP is a project started by Google and Twitter which aims to alleviate that exact problem.

The AMP roadshow came to South Africa on Monday the 11th of March 2019 and naturally we had to attend. Speakers at the conference provided a wealth of information and sparked true interest in those who attended.

(Moõse, 2018)
(Moõse, 2018)

What is AMP?

AMP stands for accelerated mobile page and that in itself gives us an idea of what the project is all about. AMP provides web developers with new intuitive tools, mainly focused on improving the overall user experience.

Who could benefit from AMP?

AMP’s benefits are very focused on the success of every web publisher, merchant, and advertiser out there. Essentially anyone who can benefit from tools designed specifically for a user-first format for web content, would be wise to consider adding AMP to their list of web development tools.

AMP Display Ad options

How does it work?

AMP pages load faster because of numerous optimizations implemented by the project’s talented team. Together these optimizations allow for web-based content to load significantly faster while maintaining functionality and appearance.

There are seven optimizations in total which are discussed in detail below:

  1. Execute all AMP JavaScript asynchronously. JavaScript is a powerful tool and can modify just about every aspect of a page however it can also block DOM construction and slow page rendering. To prevent this AMP only allows asynchronous JavaScript.
  2. Size all resources statically. External resources such as images, ads or iframes must state their size in the HTML so that AMP can determine each element’s size before resources are downloaded. This allows AMP to load the layout of the page without waiting for any resources.
  3. Don’t let extension mechanisms block rendering. AMP still supports extensions for things like lightboxes, instagram, tweets…etc. Although these still require additional http requests they do not block page layout or rendering. Any page containing custom scrypt will need to tell the AMP system that it will have a custom tag.
  4. Keep all third-party JavaScript out of the critical path. AMP pages do allow third-party JS but only in sandbox iframes. Restricting them to iframes prevents them from blocking execution of the main page.
  5. All CSS must be inline and size-bound. CSS tends to block all rendering and thus AMP pages only allow inline styles. This removes one or often more HTTP requests from the critical path when compared to most web pages.
  6. Font triggering must be efficient. The AMP system prevents all HTTP requests until the fonts start downloading. This is possible only because all JS has the async attribute and only inline style sheets are permitted in AMP.
  7. Minimize style recalculations. In AMP pages all DOM reads are executed before the writes. This ensures there is a maximum of one recalculation of styles per frame.

So where’s the proof?

All of this sounds very good but is there any reassurance that AMP will actually benefit your web content and ultimately, will it make you more money? Well the team at AMP predicted such skepticism and as such have provided multiple success stories with accompanying statistics. Just a few examples of such stories are listed below:

Times of India reports:

  • 1.5 times more revenue yields
  • 3.6 times faster load time
  • 6 times more overall traffic

India Today delights readers and boosts revenue with AMP:

  • 23% higher revenue per page on AMP vs. non-AMP
  • 2 times increase in CTR
  • 3 times increase in ad viewability rates

Carmaker quickly, smoothly shares stories via AMP on BMW.com:

  • 3-4 times faster load times
  • 30% higher click through rates to national websites
  • 26% more mobile users

If that didn’t convince you there are many more success stories as well as more detail on them at: https://amp.dev/success-stories.html

So at this point, you should have a very brief understanding of the possibilities that AMP provides. Now it’s up to you!

We at Kreate Agency share AMP’s absolute lust for speed and plan to do our part in making web browsing ever faster.