Web Performance

What is web performance?

Web performance is the objective measurement and perceived user experience of a website or application.

核心 Web 指标和阈值

1. image
   
   what is LCP: Largest Contentful Paint 最大内容绘制 (LCP)，The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.

   what is good LCP score: To provide a good user experience, sites should strive to have Largest Contentful Paint of 2.5 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

   how to improve LCP: https://web.dev/optimize-lcp/#slow-servers

   • Eliminate resource load delay
     • The LCP element is an element, and its src or srcset attributes are present in the initial HTML markup.
     • The LCP element requires a CSS background image, but that image is preloaded via in the HTML markup (or via a Link header).
     • The LCP element is a text node that requires a web font to render, and the font is loaded via in the HTML markup (or via a Link header).
   • Eliminate element render delay
     • Remove unused CSS: use Chrome DevTools to find CSS rules that aren't being used and can potentially be removed (or deferred).
     • Defer non-critical CSS: split your stylesheet out into styles that are required for initial page load and then styles that can be loaded lazily.
     • Minify and compress CSS: for styles that are critical, make sure you're reducing their transfer size as much as possible.
   • Reduce resource load time
     • Reduce the size of the resource: Serve the optimal image size, Use modern image formats, Compress images, Reduce web font size
     • Reduce the distance the resource has to travel: [content delivery network](https://web.dev/content-delivery-networks/ (CDN).
     • Reduce contention for network bandwidth
     • Eliminate the network time entirely: using cache.
   • Reduce TTFB(time to first byte)
     
     image
     • Preconnect to required origins for cross-origin resources.
     • use http2.0/http3.0
     • etc

2. image
   
   what is FID: First Input Delay 首次输入延迟，FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom, JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that interaction.

   what is good FID score: sites should strive to have a First Input Delay of 100 milliseconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

   how to improve FID: https://web.dev/fid/#how-to-improve-fid

   • Reduce the impact of third-party code: use async/defer, lazy load thirty party script resource
   • Reduce JavaScript execution time: Only send the code that your users need by implementing code splitting, Minify and compress your code, Remove unused code, Reduce network trips by caching your code with the PRPL pattern.
   • Minimize main thread work
     • Script evaluation: Optimize third-party JavaScript, Debounce your input handlers, Use web workers
     • Style and layout: Reduce the scope and complexity of style calculations, Avoid large, complex layouts and layout thrashing
     • Rendering: Reduce the scope and complexity of style calculations, Avoid large, complex layouts and layout thrashing (reduce repaint/reflow)
     • Parsing HTML and CSS: Extract critical CSS, Minify CSS, Defer non-critical CSS
     • Script parsing and compilation: Reduce JavaScript payloads with code splitting, Remove unused code
     • Garbage collection: Monitor your web page's total memory usage with measureMemory()
     • Resources: Source code for Minimize main thread work audit, Main thread (MDN), Inside look at modern web browser (part 3)
   • Keep request counts low and transfer sizes small: Images, Fonts, Documents, Media,

3. image.png

   what is CLS: CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

   what is goog CLS score: sites should strive to have a CLS score of 0.1 or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

   how to improve CLS: https://web.dev/cls/#how-to-improve-cls

   • Always include size attributes on your images and video elements, or otherwise reserve the required space with something like CSS aspect ratio boxes. This approach ensures that the browser can allocate the correct amount of space in the document while the image is loading. Note that you can also use the unsized-media feature policy to force this behavior in browsers that support feature policies.
   • Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected.
   • Prefer transform animations to animations of properties that trigger layout changes. Animate transitions in a way that provides context and continuity from state to state.

4. image.png

   what is FCP: The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.

   what is good FCP score: sites should strive to have a First Contentful Paint of 1.8 seconds or less. To ensure you're hitting this target for most of your users, a good threshold to measure is the 75th percentile of page loads, segmented across mobile and desktop devices.

   how to improve FCP: https://web.dev/fcp/#how-to-improve-fcp

   • Eliminate render-blocking resources
   • Minify CSS
   • Remove unused CSS
   • Preconnect to required origins
   • Reduce server response times (TTFB)
   • Avoid multiple page redirects
   • Preload key requests
   • Avoid enormous network payloads
   • Serve static assets with an efficient cache policy
   • Avoid an excessive DOM size
   • Minimize critical request depth
   • Ensure text remains visible during webfont load
   • Keep request counts low and transfer sizes small

5. how to measure LCP FID CLS(tools): PageSpeed Insights, chrome devtool>lighthouse

CRP

image.png

Refer To

https://web.dev/i18n/zh/defining-core-web-vitals-thresholds/

https://web.dev/optimize-lcp/#slow-servers

https://web.dev/fast/

https://github.com/w-l-l/BrowserPrinciple