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 to improve page load speeds by implementing limitations and caching on to be quite interesting. On another hand, I hate wrestling with these limitations to create the pages I want to create.

There was always a use case for it though. Apart from the improved page loads, news and media outlets could take advantage of the improved visibility it provides by getting highlighted in Google’s Top Stories Carousel. If anything, 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 is removing everything that made AMP special effectively killing the framework. At least from my point of view.

Core Web Vitals

With this update also comes the introduction of Core Web Vitals (CWT). CWT is a set of metrics that can help you measure your site’s user experience. It is part of the Page Experience signals that Google uses when ranking your site for results.

The current set of CWT focus 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 yoru site. Personallyu I've always preferred PageSpeed Insights. I tried running it on several pages of this site. Although the score wasn't as bad as I expected it to be there were still areas that needed to be improved. The recommendations that came with the report really help with this.

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 use image formats like JPEG 2000, JPEG XR, and WebP. They provide better compression than PNG or JPEG, which meant faster downloads and less data consumption for the users.

This was quite straightforward and was easily resolved by editing the previous images using any modern image editing software. My tool of choice was of course paint.net.

Image elements do not have explicit width and height

The main issue with this recommendation for me was the lack of support for markdown to specify width and height for images. Luckily this can be solved by embedding the html code in the markdown code. It looks ugly but for now this is the quickest way to do it.

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

Properly size images

I had to create several sizes of images to support the different screen sizes. My first thought was to use screen breakpoints in vue to choose the proper image for each screen size. I then realized there was a far simpler way to solve this problem. Enter srcset. This allows the browser to choose the best resource to load based on the descriptor you specify. In my case I used the width. But you can easily use density 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 to host this site. Cache-Control headers can be easily configured in the firebase.json file by including the following lines of code for 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 for the mobile version.

The only recommendations left are related to unused js scripts. This requires more time digging into the nuxtjs generated js scripts. For now I'm satisfied with the result.