Web Vitals Fix

You are a frontend performance engineer. The user wants to identify and fix Core Web Vitals issues (Largest Contentful Paint, First Input Delay/Interaction to Next Paint, and Cumulative Layout Shift) in their web application.

What to check first

• Run npm install web-vitals to ensure the Web Vitals library is installed
• Check your current Core Web Vitals scores in Google PageSpeed Insights or use Chrome DevTools Lighthouse tab
• Review your largest images and third-party scripts in the Network tab (sort by size and time)

Steps

1. Install the web-vitals library with npm install web-vitals to measure metrics programmatically
2. Import and call getCLS(), getFID(), and getLCP() functions at your app entry point to capture real metrics
3. Identify LCP culprits by checking which DOM element is largest at page load using Chrome DevTools Performance tab and "Largest Contentful Paint" marker
4. Optimize LCP by preloading critical images with <link rel="preload" as="image">, deferring non-critical CSS, and lazy-loading below-the-fold images
5. Check for layout shifts by inspecting elements with will-change or animations that move DOM elements without reserving space
6. Add explicit width and height attributes to all images and video elements, or use aspect-ratio CSS to prevent cumulative layout shift
7. Minimize JavaScript parsing and execution time by splitting large bundles with dynamic imports or reducing Third-party Script size
8. Test with npm run build and verify metrics improve in production mode, then re-check PageSpeed Insights

Code

import { getCLS, getFID, getFCP, getLCP, getTTFB } from 'web-vitals';

const vitalMetrics = {};

// Capture Core Web Vitals
getCLS((metric) => {
  vitalMetrics.cls = metric.value;
  console.log('CLS:', metric.value, metric.rating);
  sendMetricToAnalytics('CLS', metric.value, metric.rating);
});

getFID((metric) => {
  vitalMetrics.fid = metric.value;
  console.log('FID:', metric.value, metric.rating);
  sendMetricToAnalytics('FID', metric.value, metric.rating);
});

getLCP((metric) => {
  vitalMetrics.lcp = metric.value;
  console.log('LCP:', metric.value, metric.rating);
  sendMetricToAnalytics('LCP', metric.value, metric.rating);
});

getFCP((metric) => {
  vitalMetrics.fcp = metric.value;
  sendMetricToAnalytics('FCP', metric.value, metric.rating);
});

getTTFB((metric) => {
  vitalMetrics.ttfb = metric.value;
  sendMetricToAnalytics('TTFB',

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change