WooCommerce Core Web Vitals Checklist

1. What This Checklist Actually Covers

This is an interactive self-audit built around the seven most common WooCommerce-specific causes of failed Core Web Vitals, grouped by which metric they affect: two items target LCP (image preloading and next-gen formats), two target INP (cart fragments and gateway script deferral), two target CLS (image dimensions and notice/banner containers), and one targets TTFB (static edge delivery). Clicking a card marks it complete and updates the progress bar at the top — the checklist state is stored only in your browser session, not saved to an account.

2. How to Use the Checklist Effectively

Work through the items in order of metric severity: check your current LCP, INP, and CLS scores first (using PageSpeed Insights or the Nimbica Core Web Vitals Checker), then focus on the checklist section matching your worst-performing metric. For example, if CLS is failing, prioritize "Set Explicit Width & Height on Product Images" and "Reserve Notice & Coupon Banner Containers" before spending time on LCP-only items. Re-test after each change since WooCommerce metrics can interact — disabling cart fragments, for instance, can also incidentally reduce main-thread work that was contributing to layout shift.

3. Why WooCommerce Needs a Specialized Checklist

Generic WordPress speed checklists miss WooCommerce-specific failure modes. Cart fragments, payment gateway SDKs, coupon notice banners, and product variation JSON are all sources of Core Web Vitals regressions that don't exist on a typical blog or brochure site. A store can follow every generic "optimize images and minify CSS" tip and still fail INP because of an unthrottled AJAX call firing on every page, or fail CLS because a "free shipping over $50" notice banner injects itself above the fold after initial render.

4. Worked Example

A store fails CLS at 0.31 (poor) on its product pages. Working through the checklist: item "cls-1" (explicit image dimensions) reveals the theme's gallery template omits width/height attributes, causing the browser to reflow content once each image's true dimensions load. Fixing this alone typically drops measured CLS into the 0.05-0.15 range. Item "cls-2" (reserving notice containers) then addresses a secondary shift caused by a coupon banner plugin that injects its markup after page load — reserving a fixed-height container for it before the plugin renders removes the remaining shift.

5. Practical Use Cases

• Pre-launch QA: Run through the full checklist before launching a new WooCommerce theme or major redesign.
• Client handoff documentation: Agencies can use the checklist as a shared reference when explaining to a client which specific fixes were applied and why.
• Post-regression triage: When a Search Console Core Web Vitals report shows a sudden drop, work through the checklist to identify which recent change likely caused it.

6. Common Mistakes & Limitations

Checking a box here does not verify the fix was implemented correctly — it's a planning and tracking aid, not an automated scanner. A common mistake is marking "Preload Main Product Gallery Image" complete after adding a preload tag but pointing it at the wrong image variant (e.g. a thumbnail instead of the actual LCP element), which provides no benefit. Always confirm each item with a real Lighthouse or field-data test rather than relying on the checklist alone as proof of compliance.