Improve your Core Web Vitals
Improve your site's performance with Core Web Vitals. Learn how these key metrics impact user experience, page speed, and SEO. This guide provides actionable insights to optimize loading times, responsiveness, and visual stability for better rankings and engagement.
We will keep improving this page over time.
Resources
- https://webperf.tools/
- Web Vitals (official documentation page)
- Everything we know about Core Web Vitals and SEO
- Understanding the Chrome User Experience Report (CrUX)
- An analysis of CrUX data: 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 fetched in the loader route function from
@remix-run/node (exemple
here).
Promise.all()
When multiple API requests are required, using Promise.all() to fetch data in
parallel rather than sequentially can significantly improve your website's
loading performance. Fetching requests one after another increases total wait
time, as each request depends on the previous one to complete. In contrast,
Promise.all() executes them concurrently, reducing overall latency and making
your application feel much faster and more responsive.
So, make sure to leverage it in your loader route functions or directly within
your resolvers to optimize efficiency and enhance user experience.