Improve your Core Web Vitals
Core Web Vitals are metrics describing how your pages load for users. By understanding their meaning, you will be able to improve your application's perceived performance. This guide provides information to help with this process in a Front-Commerce project.
We will keep improving this page over time.
Interesting content on the web
- https://webperf.tools/
- Web Vitals (official documentation page)
- Everything we know about Core Web Vitals and SEO
- Understanding the Chrome User Experience Report (CrUX)
- People analysed CrUX data for you, What do Lighthouse Scores look like across the web?
- Three Techniques for Performant Custom Font Usage
- Detect the element associated with LCP using the DevTools
- Understand assets impact on different devices, to help you set budgets: The Mobile Performance Inequality Gap, 2021
Front-Commerce tips
Mark above-the-fold images as priority
Using: <Image src="xxxx" priority />
Improve your fonts performance
- Self-host your custom (Google) fonts
- Use WOFF2 format
- Use
font-display: optional - Preload key fonts by naming them with the suffix:
*.priority.woff2
One query per route
You must aim at One GraphQL query per Front-Commerce route. Keep additional queries for secondary content.
Ensure that this query is preloadable (using the top level graphqlWithPreload
HOC).