Why performance still matters
Google’s Core Web Vitals directly affect search ranking. A 100ms improvement in Largest Contentful Paint (LCP) can lift conversion rates by 8%. Here are five changes that consistently deliver the most impact.
1. Convert images to WebP or AVIF
Swap <img> tags for <picture> with WebP/AVIF sources. Bandwidth savings of 30–50% are typical
for hero images alone, with no perceivable quality loss.
2. Self-host your fonts
Loading fonts from Google Fonts adds a cross-origin DNS lookup on every page load. Self-hosting
removes that round trip and lets you set font-display: swap to prevent invisible text during load.
3. Remove unused JavaScript
Run npx depcheck and audit your bundle with npx vite-bundle-visualizer. Third-party scripts
(chat widgets, analytics, A/B testing tools) are the most common culprits for bloated bundles.
4. Add loading="lazy" to below-the-fold images
Browser-native lazy loading is zero-cost to implement and defers image requests until they are near the viewport, reducing initial page weight significantly.
5. Set explicit width and height on images
This prevents Cumulative Layout Shift (CLS) by reserving space before the image loads. Pair with
aspect-ratio in CSS for fully responsive images without layout jank.