वेब वाइटल्स के लिए अनुकूलन

LCP में सुधार (सबसे बड़ी सामग्री रंग)

LCP measures when the largest content element (image, heading, video) becomes visible. Improve it by: optimizing server response time, using a CDN, lazy-loading off-screen images, reducing CSS/JS, using system fonts, and prefetching critical resources.

CLS में कमी (संचयी लेआउट शिफ्ट)

CLS is visual jank — buttons or text moving unexpectedly. Prevent it by: always specifying image/video dimensions, avoiding pop-ups that push content down, using font-display: swap, and avoiding late-loaded content above the fold.

वेब वाइटल्स मॉनिटरिंग कोड

Use the Web Vitals library to measure real user metrics.

// Import Web Vitals
import {getCLS, getFID, getFCP, getLCP, getTTFB} from 'web-vitals';

// Send metrics to your analytics
cls(data => console.log('CLS:', data.value));
fid(data => console.log('FID:', data.value));
fcp(data => console.log('FCP:', data.value));
lcp(data => console.log('LCP:', data.value));
ttfb(data => console.log('TTFB:', data.value));

// Track with Google Analytics
function sendMetric(name, value) {
  gtag('event', name, {'value': value});
}

Lazy लोडिंग के लिए Intersection Observer का उपयोग करें

Don't load all images at once. Use Intersection Observer to lazy load images below the fold, reducing LCP and improving performance.

LCP के लिए सर्वर-साइड रेंडरिंग

SSR ensures the largest contentful element (headline, hero image) is in the initial HTML, loaded immediately. CSR waits for JS to execute, delaying LCP.