AMP is dead. Long live CWV!

Accelerated Mobile Pages

I've always had a love-hate relationship with Accelerated Mobile Pages (AMP). On one hand, I find the technology interesting — it improves page load speeds by enforcing limitations and leveraging caching. On the other hand, I hate wrestling with those limitations to build the pages I actually want.

There was always a use case for it though. Apart from the improved load times, news and media outlets could take advantage of the boosted visibility from Google's Top Stories Carousel. And if nothing else, the AMP lightning badge made your site look really cool. :)

But that's all in the past. With April 2021's Page Experience update, Google removed everything that made AMP special, effectively killing the framework — at least from my point of view.

Core Web Vitals

With this update came the introduction of Core Web Vitals (CWV). CWV is a set of metrics that help measure your site's user experience. It's part of the Page Experience signals Google uses when ranking your site in search results.

The current set of CWV focuses on three main metrics.

Largest Contentful Paint (LCP): Measures loading performance.

First Input Delay (FID): Measures interactivity.

Cumulative Layout Shift (CLS): Measures visual stability.

There are a couple of ways to measure these metrics for your site. Personally, I've always preferred PageSpeed Insights. I ran it on several pages of this site, and while the score wasn't as bad as I expected, there were still areas that needed improvement. The recommendations in the report were a big help.

Efficiently encode images and Serve images in next-gen formats

The original version of this site used a lot of JPEG and PNG images. The recommendation was to switch to formats like JPEG 2000, JPEG XR, and WebP — they provide better compression than PNG or JPEG, which means faster downloads and less data consumption for users.

This was pretty straightforward and easily resolved by editing the images in any modern image editor. My tool of choice was paint.net.

Image elements do not have explicit width and height

The main issue here was that markdown doesn't natively support specifying width and height for images. Luckily, you can work around this by embedding HTML directly in the markdown. It looks ugly, but for now it's the quickest solution.

<img alt="alt txt" src="/img.webp" title="title" width="150" height="150">

Properly size images

I had to create several image sizes to support different screen sizes. My first instinct was to use Vue breakpoints to choose the right image per screen size, but then I realized there was a far simpler approach. Enter srcset. It lets the browser choose the best resource based on a descriptor you specify — in my case, width. But density works just as well.

<img alt="alt txt"
  src="/img.webp"
  srcset="/img_lg.web 1024w,
          /img_md.web 768w,
          /img_sm web 512w"
  title="title" width="150" height="150">

Serve static assets with an efficient cache policy

I'm using Firebase Hosting for this site. Cache-Control headers can be configured in the firebase.json file by adding the following to the headers section.

"headers": [
  {
    "source": "**/*.@(js|webp)",
    "headers": [
      {
        "key": "Cache-Control",
        "value": "max-age=31536000"
      }
    ]
  }
]

Final Score

After all is said and done, the final score puts this site in the high 90s, with some variance on mobile.

The only remaining recommendations are related to unused JS scripts. That requires more time digging into Nuxt's generated bundles. For now, I'm satisfied with the result.