Performance Tuning Your Web Application

web devlopment web vitals

Before we start, here's the lighthouse report for my site homepage -

Now, lets start -

First impressions matter and more so in the web app world. It is extremely important for your site user to get a pleasant & high quality first experience, for them to continue using your site. This is where Google core web vitals are extremely helpful.

Web vitals are metrics that you can use to measure the performance and user experience quality for distinct facets of the user experience in your web application. The core web vitals focus on three aspects of user experience - loading, interactivity and visual stability. Each of these facets of the experience are measured using a unique metric.

Here's a brief overview of the key core vital metrics -

Source

LCP

LCP or Largest Contentful Paint measures the time it takes for the largest element in your webpage to be visible. This is generally an image, a video element or can be a block element with text as well. This metric will help you to measure the loading performance for your site. Read more

LCP is made up of four sub parts as shown in image below. Its good to know these as you would often optimize performance for each parts separately. A good hint in these parts is the word "delay" , you want to keep these parts as close to zero as possible.

Source

Here are some ways you can optimize site for this metric -

You can use the rel="preload" property for your resources to make them discoverable by browser preload scanner.
In cases, where you are referencing external resources like css or js, ensure that you are preloading them, by specifying high fetch priority. You can achieve this using the fetchpriority attribute.

<!-- Load the stylesheet that will reference the LCP image. -->
<link rel="stylesheet" href="/path/to/styles.css" />

<!-- Preload the LCP image with a high fetchpriority
so it starts loading with the stylesheet. -->
<link
  rel="preload"
  fetchpriority="high"
  as="image"
  href="/path/to/hero-image.webp"
  type="image/webp"
/>

If you have multiple images, you can set fetchpriority property to low / high to prioritize your LCP image first.

<img fetchpriority="high" src="/path/to/hero-image.webp" />

<img fetchpriority="low" src="/path/to/carousel-slide-3.webp" />

Stylesheets which are being loaded can block the rendering of LCP and other elements which are dependent on it. So ensure that your stylesheet size is as less as possible. Purge your CSS to remove unused CSS.
Split your css into critical vs non-critical and load non critical css lazily. Critical CSS refers to the essential files needed to load the “Above the Fold” part of the page. Note - Make sure that CSS is indeed bottleneck before you split it. Read more

FID

FID or First Input Delay measures the time when user first interacts with your page to the time when browser actually starts processing and responds. This helps you to measure the interactivity performance for your site. Read more

The main cause of a poor FID is heavy JavaScript execution. Optimizing how JavaScript parses, compiles, and executes on your web page will directly reduce FID. If you have any long running tasks, consider breaking them down in smaller chunks.

Ensure that you dont have cascaded data fetches tied to a user action. This is because the cascaded fetches will add additional delay in response to user input.

By default all javascript is render blocking. Identify unused javascript using the chrome converage utility and defer its execution to later time.

<script defer src="…"></script>
<script async src="…"></script>

CLS

CLS or Cumulative Layout Shift measures how much the content of your site are shifting during initial load. This metric helps you measure the visual stability of your site. Read more

Here are some ways you can reduce the layout shifts on your page -

Specifiy width and height for all image and video elements.

<img src="puppy.jpg" width="640" height="360" alt="Puppy with balloons" />

Avoid inserting content dynamically without explicit user interaction.
Ensure your web pages are eligible for the back/forward cache (bfcache).
For ads and any other banners allocate a fixed space in advance. Use this space to load eventually load the ads.