Improve your web performance with amp

Lets face it. Serving web pages under 2 seconds is hard. A lot of discipline and effort is required to get a high performing website. It even gets harder when over 90% of your users have the slowest Internet connectivity on the planet. Players in the ecosystem: browser vendors, web languages and web developers are trying their best to make things easier, but a lot still remains to be done.

In 2016, Google introduced the Accelerated Mobile Pages (AMP) project which helps serve web pages faster. However, some have raised concerns about AMP being a walled-garden on the Internet and have accused Google of using it to protect their lion share of the Internet. That said, some major publishers (BBC, CNN, DW, FOXNEWS, Bloomberg) and e-commerce platforms (Myntra, Alibaba) have adopted AMP to serve their mobile pages and have reported significant gains.

Another use case is AMP being used by web platforms to only serve pages that need to rank well in search engines.

AMP is designed to fix is web performance and simply put, it is HTML that serves web pages faster. It has a set of rules that have to be followed. If you follow these rules, you'll realise AMP is as easy as HTML. But if you do things that hurt performance, your AMP pages will be rendered invalid.

Personally, I believe you should go for AMP if it fits your purpose. For example, if speed and SEO are top of your priority list. The reason for this article is to create awareness for those who may be new to AMP. The AMP team has done a really good job of creating articles, video tutorials and resources to help you learn web development with AMP.

Everyone likes nicer pixels and animations on the web and in our quest to achieve good User Experience, we use Javacript. But frankly, some of these scripts are heavy-weight and tend to degrade web performance. In order to encourage best practices, AMP is restrictive on the use of Javascript for animations and interactions. For example, it encourages the use of CSS animations instead of JS animations. That said, most animations in JS is achievable in AMP as well.

AMP pages also rely heavily on the AMP cache, which is used for validation and also pre-renders AMP pages for faster page load.

This is a 1000ft view of AMP, for more details, checkout the following resources:

  1. AMP website
  2. AMP Github Project
  3. Hands-on Codelab

© 2023