CSS_for_Web_Vitals.pdf

Transcript

1. CSS for Web Vitals CSS-related techniques for optimizing Web Vitals 2021/07/15 F2E 例會 cypresskuo
2. Core Web Vitals Web Vitals Metrics Largest Contentful Paint (LCP) First Input Delay (FID) Cumulative Layout Shift (CLS) 掌握 SEO - 網站核心指標
3. CSS-related Web Vitals Largest Contentful Paint (LCP) Cumulative Layout Shift (CLS)
4. Inserting content into the DOM Inserting content into a page after the surrounding content has already loaded pushes everything else on the page down. Cookie notices:
5. Inserting content into the DOM FIX:
6. Inserting content into the DOM Lighthouse:
7. Images and Largest Contentful Paint (LCP) Images are commonly the Largest Contentful Paint (LCP) element on a page. Other page elements that can be the LCP element include text blocks and video poster images. The time at which the LCP element loads determines LCP. It's important to note that a page's LCP element can vary from page load to page load depending on the content that is visible to the user when the page is first displayed.
8. Images and Largest Contentful Paint (LCP)
9. Images and Largest Contentful Paint (LCP) FIX:
10. Images and layout shifts Browsers can only determine the size of an image once the image loads. If the image load occurs after the page has been rendered, but no space has been reserved for the image, a layout shift occurs when the image appears.
11. Images and layout shifts FIX:
12. Images and layout shifts Best Practices Serve responsive images - The "srcset" attribute
13. Images and layout shifts Lighthouse:
14. Delayed text rendering By default, a browser will not immediately render a text element if its associated web fonts have not loaded yet. This is done to prevent a "flash of unstyled text" (FOUT). In many situations, this delays First Contentful Paint (FCP). In some situations, this delays Largest Contentful Paint (LCP).
15. Font and layout shifts Font swapping, while excellent for displaying content to the user quickly, has the potential to cause layout shifts. These layout shifts occur when a web font and its fallback font take up different amounts of space on the page. Using similarly proportioned fonts will minimize the size of these layout shifts.
16. Font and layout shifts
17. Font and layout shifts FIX:
18. Animations The primary way that animations affect Web Vitals is when they cause layout shifts. There are two types of animations that you should avoid using: animations that trigger layout and "animation-like" effects that move page elements. Typically these animations can be replaced with more performant equivalents by using CSS properties like transform, opacity, and filter.
19. Animations FIX:
20. Critical CSS Stylesheets are render-blocking. This means that the browser encounters a stylesheet, it will stop downloading other resources until the browser has downloaded and parsed the stylesheet. This may delay LCP. To improve performance, consider removing unused CSS, inlining critical CSS, and deferring non-critical CSS.
21. Conclusion Premature optimization is the root of all evil 調校效能是需要時時注意的，而非最後才來一次改進。
22. 參考資料 https://web.dev/css-web-vitals/
23. Q & A
24. 感謝聆聽