Getting SEO ready for Google’s “Page Experience” search ranking update 🔎🌐

Core Web Vitals

Source: web.dev

How do I benchmark my website’s performance?

Improving Core Web Vital #1 — Largest Contentful Paint 🎨

  1. Convert images to modern formats and compress to an appropriate size
    Modern image formats (like .webp) are used in only a tiny fraction of websites, even though their file sizes are 25–35% lower!
    I also discovered that many of my images were uploaded in high-res (1500x1500 pixels). This is wasteful, regardless of the file format…
  2. Serve static and media files from a CDN (like AWS Cloudfront)
    Originally I was severing static images from the same webserver as the Django application. I know, I know, this is bad practice — but in my defense this entire website was a one day build.

    Now I am instead using `django-storages` to deploy and serve static and media files from AWS S3. I also setup an AWS Cloudfront CDN to cache and serve these assets from AWS edge locations. This means that visitors from Perth or London or New York will still be served images and media files from nearby locations, instead of from Sydney.
  3. Serve static and media files using HTTP 2 instead of HTTP 1
    HTTP/1 has worked fine for 25 years. It’s problem is that it is an ordered and blocking protocol that allows a limited number of concurrent connections. This means that your browser might have to download batches of assets in sequence, rather than all at once.

    HTTP/2 on the other hand is fully multiplexed and non-blocking. Take a look at this demo to see the difference between the two. Interestingly, only around 50% of webservers currently use HTTP/2!

    If you use AWS Cloudfront, serving assets with HTTP 2 requires just changing one setting in your Cloudfront configuration!
  4. Remove unused CSS and Javascript
    I found that this had only a small benefit for me. The main culprit was the bootstrap css stylesheet. Being in the <head> section of my HTML, it will block page rendering until the CSS file is downloaded. I experimented with moving the stylesheet into the <body> section, but this resulted in big Layout Shift due to CSS styles being applied after the first render.

    In truth, the optimal solution would be for me to remove bootstrap entirely. After all, I use only about 5 bootstrap classes in total, and I can easily define these styles myself in the critical CSS path.

Improving Core Web Vital #2— First Input Delay ⏳

  1. Remove unnecessary third-party scripts
    In my case I discovered that I was loading jquery and popper.js even though I was not using them in any part of the website. Removing those gave a nice little speed boost.

    I found that the biggest culprit of FID was on findram.dev was the Google analytics script which would fire after the First Contentful Paint. But I see this as fair trade-off so I left it in.

Improving Core Web Vital #3 — Cumulative Layout Shift ⬇️

  1. Actually, none — The original CLS score for findram.dev was 0.01 … basically perfect 😇

The Results 🏆

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ram Parameswaran

Ram Parameswaran

Hi, I’m Ram. I’m a software consultant and full-stack developer, and I build web applications that help businesses around the world operate more efficiently.