<ul><li dir = "auto">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.</li></ul>More info:&nbsp;<a href=https://web.dev/cls/ class="idea-content-link" target="_blank" rel="noreferrer">here</a>

CLS - part 2

This approximates when the main content of the page is visible to the users.&nbsp;The elements that are taken into consideration for Largest Contentful Paint:&nbsp;<ul><li dir = "auto"><code>&lt;img&gt;</code> elements</li><li dir = "auto"><code>&lt;image&gt;</code> elements inside an <code>&lt;svg&gt;</code> element</li><li dir = "auto"><code>&lt;video&gt;</code> elements (the poster image is used)</li><li dir = "auto">An element with a background image loaded via the&nbsp;&nbsp;&nbsp;</li></ul><a href=https://developer.mozilla.org/en-US/docs/Web/HTML/Block-level_elements class="idea-content-link" target="_blank" rel="noreferrer">Block-level</a>In the future, additional elements might be added, like &lt;svg&gt; and &lt;video&gt;Extra info:&nbsp;<a href=https://web.dev/lcp/#largest-contentful-paint-defined class="idea-content-link" target="_blank" rel="noreferrer">LCP</a>

More about LCP

Causes:&nbsp;<ul><li dir = "auto">Slow server response times</li><li dir = "auto">Render-blocking JavaScript and CSS</li><li dir = "auto">Resource load times</li><li dir = "auto">Client-side rendering</li></ul>For improvements, some relevant techniques:<ul><li dir = "auto"></li></ul><a href=https://web.dev/apply-instant-loading-with-prpl class="idea-content-link" target="_blank" rel="noreferrer">Apply instant loading with the PRPL pattern</a><ul><li dir = "auto"></li></ul><a href=https://developers.google.com/web/fundamentals/performance/critical-rendering-path/ class="idea-content-link" target="_blank" rel="noreferrer">Optimizing the Critical Rendering Path</a><ul><li dir = "auto"></li></ul><a href=https://web.dev/fast#optimize-your-css class="idea-content-link" target="_blank" rel="noreferrer">Optimize your CSS</a><ul><li dir = "auto"></li></ul><a href=https://web.dev/fast#optimize-your-images class="idea-content-link" target="_blank" rel="noreferrer">Optimize your Images</a><ul><li dir = "auto"></li></ul><a href=https://web.dev/fast#optimize-web-fonts class="idea-content-link" target="_blank" rel="noreferrer">Optimize web Fonts</a><ul><li dir = "auto"></li></ul><a href=https://web.dev/fast#optimize-your-javascript class="idea-content-link" target="_blank" rel="noreferrer">Optimize your JavaScript</a>

How to improve LCP

While anything you do to improve page load speed will improve your Speed Index score, addressing the following should have a particularly big impact:<ul><li dir = "auto"></li></ul><a href=https://web.dev/mainthread-work-breakdown class="idea-content-link" target="_blank" rel="noreferrer">Minimize main thread work</a><ul><li dir = "auto"></li></ul><a href=https://web.dev/bootup-time class="idea-content-link" target="_blank" rel="noreferrer">Reduce JavaScript execution time</a><ul><li dir = "auto"></li></ul><a href=https://web.dev/font-display class="idea-content-link" target="_blank" rel="noreferrer">Ensure text remains visible during webfont load</a>

Speed Index

Name - Weight in score - Summary<ol><li>First Contentful Paint (FCP) - 10% - Time to paint the first text or image</li><li>Time to Interactive (TTI) - 10% - Necessary time for the app to become fully interactive (responding within 50ms from user interaction)</li><li>Speed Index (SI) - 10% - How fast the content inside the page is visible populated</li><li>Total Blocking Time (TBT) - 30% - Sum of all periods between FCP and TTI, when the task exceeds 50ms</li><li>Largest Contentful Paint (LCP) - 25% - Time for the largest image or text to be painted</li><li>Cumulative Layout Shift (CLS) - 15% - Movement of visible elements</li></ol>

The metrics measured

TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. The sum is calculated by adding the blocking portion of all&nbsp;<a href=https://web.dev/long-tasks-devtools class="idea-content-link" target="_blank" rel="noreferrer">long tasks</a><a href=https://web.dev/first-contentful-paint/ class="idea-content-link" target="_blank" rel="noreferrer">First Contentful Paint</a><a href=https://web.dev/interactive/ class="idea-content-link" target="_blank" rel="noreferrer">Time to Interactive</a>

More about TBT

It measures how long it takes a page to become fully interactive. A page is considered fully interactive when:<ul><li dir = "auto">The page displays useful content, which is measured by the&nbsp;&nbsp;</li><li dir = "auto">Event handlers are registered for most visible page elements, and</li><li dir = "auto">The page responds to user interactions within 50 milliseconds.</li></ul>To improve this metric, you should consider&nbsp;<a href=https://web.dev/reduce-javascript-payloads-with-code-splitting class="idea-content-link" target="_blank" rel="noreferrer">reducing JavaScript payloads with code splitting</a><a href=https://web.dev/apply-instant-loading-with-prpl class="idea-content-link" target="_blank" rel="noreferrer">applying the PRPL pattern</a>Also, other things that can be helpful:&nbsp;<a href=https://web.dev/mainthread-work-breakdown class="idea-content-link" target="_blank" rel="noreferrer">minimize main thread work</a>and&nbsp;<a href=https://web.dev/bootup-time class="idea-content-link" target="_blank" rel="noreferrer">reduce JavaScript execution time</a>

CLS is a measure of the largest burst of layout shift scores for every&nbsp;<a href=https://web.dev/cls/#expected-vs.-unexpected-layout-shifts class="idea-content-link" target="_blank" rel="noreferrer">unexpected</a>How to improve:<ul><li dir = "auto">Always include size attributes on your images and video elements, or otherwise reserve the required space with something like </li></ul><a href=https://css-tricks.com/aspect-ratio-boxes/ class="idea-content-link" target="_blank" rel="noreferrer">CSS aspect ratio boxes</a><ul><li>Never insert content above existing content, except in response to a user interaction. This ensures any layout shifts that occur are expected.</li></ul>

Try to diagnose the root cause of long tasks, using&nbsp;<a href=https://web.dev/long-tasks-devtools/#what-is-causing-my-long-tasks class="idea-content-link" target="_blank" rel="noreferrer">What is causing my long tasks?</a>In general, the most common causes are:<ul><li dir = "auto">Unnecessary JavaScript loading, parsing or execution. This means the main thread is doing more work than it supose to do -&gt; try reducing JS payloads with code splitting, removing unused code and efficiently loading third-party JavaScript</li><li dir = "auto">Inefficient JS statements -&gt; avoid selectors that returns 2000 nodes (e.g. document.querySelectorAll('a') ) and refactor to have a more specific one.</li></ul>

How to improve TBT

&nbsp;Some of the values are calculated based on&nbsp;<a href=https://httparchive.org/reports/loading-speed#fcp class="idea-content-link" target="_blank" rel="noreferrer">data from the HTTP Archive</a> If you don't have a very specific reason to optimise only one of the metrics, the best approace would be to check the opportunities mentioned in the Lighthouse report and read an in-depth presentation&nbsp;<a href=https://web.dev/lighthouse-performance/ class="idea-content-link" target="_blank" rel="noreferrer">here</a>

Short notices

Very important for this part is the font load time. For faster load, it can be used the <code>font-display: swap. </code>This will make the site to render the default font and when the loading is done, the font will be changed. Also, you can preload the fonts.

PRPL is an acronym that describes a pattern used to make web pages load and become interactive, faster:<ul><li>Push (or preload) the most important resources.</li><li>Render the initial route as soon as possible.</li><li>Pre-cache remaining assets.</li><li>Lazy load other routes and non-critical assets.</li></ul>

TTI - PRPL Pattern