Measurements of the new AMP website

Apr 30, 2020

First I must state that AMP these days allows custom JavaScript - with limitation - by using amp-script, and there’s also way to have forms by amp-form.

I re-run the three tests I ran last July for an earlier website version. These are the results after some iterations:

  1. Official Lighthouse, results: 92 / 100 / 100 / 100
  2. webpagetest.org Lighthouse, results: 84 / 100 / 100 / 100
  3. webhint.io scanner, results: 36 hints

The iteration corrections included:

  • Converting the icons referenced in the Progressive Web Application manifest to png (they were jpg).
  • The footer’s amp-sidebar had the same ID (due to copy-paste error) as the main menu’s amp-sidebar.
  • I added back the lang="en" attribute to the html tag. An AMP test extension complained about its presence, but it is needed for PWA Accessibility. Interestingly the on-line AMP Test doesn’t complain about that.
  • Removed some itemscope and itemtype attributes which made the content invalid on some pages - indicated by the structured content testing tool.

Result assessment:

  • The 36 webhint.io hints: most of them out of my jurisdiction (AMP served files) or irrelevant (who cares about Chrome version 51 and prior?). That number is down anyway from the earlier 66, so I’m OK with that. I’ll still go through the list again if there’s anything I can remediate.
  • As for the two Lighthouse tests all the metrics scored 100 except the performance. The webpagetest.org test’s performance indicator improved from 67 to 84. That is great news given that this test uses 3G network speed with a Motorola G gen 4 simulated phone.
  • The only step back is the web.dev performance indicator: it decreased from 100 to 92. The details state that the First Contentful Paint and the First Meaningful Paint is at 2.4s, but I can see clearly on the screenshots that the site is up way earlier.
  • Removing the carousel could help with the performance. The other expendable AMP JavaScript asset is the Google Analytics. It rather seems like those scripts are not loading async (possibly also because they are placed in the header instead of the usual bottom of the body placement). I’ll keep thinking on how to improve further, the goal is always and still to reach a 100 / 100 / 100 / 100 score.
Comments loading...