Optimizing a React application for Core Web Vitals
0 likes11 views
The performance of your web application can define the success of your website, the core web vitals are key metrics that help you to keep track and improve the user experience. This talk we will see how to optimize and measure a React application performance using some basic techniques, like code splitting with webpack, SEO optimization and bottleneck resolutions with examples.
Optimizing a React application for Core Web Vitals
- 1. Optimizing a React application for Core Web Vitals
- 2. Juan Picado Berlin - Germany Senior Front-End Engineer at mobile.de Open Source at verdaccio.org
- 3. Agenda What are Core Web Vitals? Largest Contentful Paint (LCP) Why are Core Web Vitals important? First Input Delay (FID) Cumulative Layout Shift (CLS) Tooling Web Performance Monitoring Final Results 01 02 03 04 05 06 07 08 09 10 11 12 Field Data vs Lab Data
- 4. Use Case: Kijiji Autos Launched in late 2018 in Canada A classi鍖eds website Microservices architecture Node.js application React Hooks SEO Optimized Accessibility First Citizen
- 5. What are Core Web Vitals?
- 6. Web Vitals Essential metrics for a healthy site Created by Google in 2020; To provide a better UX and SEO; Core Web Vitals: LCP, FID, CLS
- 8. Why Web Core Vitals are important?
- 9. Field Data The lab data has as origin the Chrome User Experience report that collects anonymized metrics from real users visiting your URL. Limited to 28-day period Real world data with all sort of variables and unknowns.
- 10. Lab data Controlled environment with speci鍖c setup and conditions For tracking bugs and diagnosing issues The Lighthouse score is the weighted set of all web vitals combined.
- 12. LCP
- 13. The largest element on the screen
- 14. Fast delivering Streaming server rendering with renderToNodeStream defer important scripts CDN close to the users Enforce Cache locally (cache-control)
- 15. Loading Fonts Use font-display: swap; (CLS) Serving fonts from our down domain Use woff2 preload critical fonts preconnect critical domains
- 16. Universal Rendering Code splitting support in the server side react-universal-component
- 17. Optimizing the critical rendering path Inlining critical CSS into the <head> of your pages
- 18. Optimizing the critical rendering path The plugin mini-css-extract-plugin allows you to preload inline CSS Cache assets content on render Combination react-universal-component to load CSS 鍖les asynchronously
- 19. Optimizing css class names
- 20. Optimizing css class names ui.css .card { ... } seller.css .card { ... } ui.f2k3.css ._1kBPR1kBSylY jzU_gc2hOF { ... } seller.3fd.css ._1QbzROafWOyy ralCv68XN8 { ... } Source Code Production Code
- 21. Optimizing css class names Steps: 1. Assign a index for each class name 2. Convert the number to base64 string to_base_64_number(class_name) + hash(鍖le_path) 1 { ... } 2 {...} 3 {...}. 65 {...} .a { ... } .b {...} .c {...} ... .aa { }
- 22. Optimizing css class names _2feVSXpgBvoAU41O449Qvq _39vbN3myQydLSh3AlBNXRd, _3FE6CYyZikS3ho1F21YIhN _3gKd14EXoGR9gK5WNX1wmz 皙 b7GuTs E1QuSo d1QuSo f7GuTa
- 23. Minimize legacy poly鍖lls Poly鍖ll.io allows you to customize a custom bundle for legacy browser features It reduces the total bundle size
- 25. FID
- 26. FID
- 27. Code splitting on client side
- 28. Code splitting vendor strategy
- 30. CLS
- 31. Intersection Observer API Lazy-loading images or other content as page is scrolled Implement in鍖nite scrolling Intersection Observer API - Web APIs | MDN (mozilla.org)
- 32. Intersection Observer API Allows to monitor when a speci鍖c element at the page enters or exist another element (or viewport)
- 33. In鍖nite scroll implementation Replacing react-window with native Intersection Observer API brought improvements on CLS and FDI
- 34. In鍖nite scroll implementation Intersection Observer API to reduce bundle size Full modern browser support Reserve space for content between listings (eg: asynchronous ads) Placeholders (skeletons) avoid CLS Fetch data within the limited threshold
- 40. Images with 鍖xed dimensions Images with dimensions It set dimensions with inline CSS embedded on the HTML header.
- 42. Speed curve Kijiji Autos Run test over speci鍖c business key pages. Mobile and Desktop (Ads enabled) Web Performance Report Speed Curve API Every week fetch test results to compare by week Calculate the Lighthouse Performance Score Send to a slack channel that weekly report Custom Lab data Cloud Database Save reports on the cloud to compare with other Adevinta markets
- 43. Tooling
- 44. Page Speed Insights Field data and Lab Data Limited to 28 days Metrics for the whole website Include all Web Vitals Segmented peer page
- 45. Page Speed Insights Field data and Lab Data Limited to 28 days Metrics for the whole website Include all Web Vitals Segmented peer page
- 46. CrUX Dashboard (Google Data Studio) Only Field Data Include dimensions per device Include all Web Vitals Relevant for high tra鍖c websites Open to the public
- 47. web-vitals library Collect metrics directly from users navigator.SendBeacon() submit metrics Framework agnostic Could be plugged in with GA or custom endpoint Integrated with Next.js Gathering your own 鍖eld data https://www.npmjs.com/package/web-vitals
- 49. LCP January - 2020 January - 2022
- 50. FID January - 2020 January - 2022
- 51. CLS January - 2020 January - 2022
- 52. Q&A
- 53. thank you | gracias | merci grazie | obrigado | danke k旦sz旦n旦m | 仗舒亳弍仂 | 鏈件惘悋