What is CLS and how to improve it in Shopify(not only) apps

Shopify has begun to measure Web Vitals for embedded apps. Prioritizing web app performance can be challenging, so it's encouraging to see that they're pushing app developers to do the right thing. However, improving Web Vitals can be difficult on Single Page Applications (SPA) as it was primarily designed for web content. The first metric is called the Largest Contentful Paint, and it's important to remember that this metric is influenced by everything between your code and the user.

Firstly, ensure that everything is set up correctly on the backend side.

  • Make sure you're utilizing a Content Delivery Network (CDN).
  • Try to be as close to your visitors as possible, or at least ensure that the distance doesn't cause significant delays.
  • Do you have a distributed app and database? Excellent.
  • If not, consider using a routing service like Cloudflare Argo Smart Routing or AWS Origin Shield.
  • Lastly, avoid making requests to Shopify and other APIs when processing requests. This will help to improve the overall performance of your web app.

How is the metric measured in the browser

LCP represents the time it takes for the largest image or text block to become visible to the user.

  1. Images - This includes both images loaded via the <img> tag and images as part of a CSS background (loaded with the background-image property).
  2. Image elements inside an SVG document.
  3. Video elements - For videos, it is the poster image that's considered, not the actual video itself.
  4. Block-level elements containing text nodes - or other inline-level text elements children. It means any text wrapped in elements like <p>, <h1>, <div>, etc.

This means that your dashboard table is likely not considered content, but your banner with a sentence or two might be. If your largest content is delayed, you can fix that by adding a paragraph of text or an image to the part of the page that's visible upon loading. Use the "Largest Contentful Paint Sub-Parts (LCP)" from https://github.com/nucliweb/webperf-snippets to determine what qualifies as contentful paint in your app.