Page Speed & Core Web Vitals
Page speed and Core Web Vitals (CWV) are both user experience metrics and ranking signals. Google uses CWV as a ranking factor, with LCP (loading), INP (interactivity), and CLS (visual stability) as the key metrics.
After this lesson you can optimize LCP, INP, and CLS through image compression, JavaScript reduction, CSS optimization, and server response tuning to meet Google's CWV thresholds.
This lesson covers the seven optimization areas (leaves 3.5.1–3.5.7): LCP optimization, INP optimization, CLS optimization, image optimization, JavaScript reduction, CSS optimization, and server response optimization.
Why This Matters
- CWV is a confirmed ranking signal. Poor CWV can hold back pages that would otherwise rank well.
- Speed affects conversion rates: a 1-second delay in page load can reduce conversions by 2-5%.
- CWV affects crawl efficiency: Googlebot may allocate less crawl budget to slower sites.
LCP Optimization
Largest Contentful Paint (LCP) measures the time it takes for the largest content element (image, video, or block-level text) to become visible. Target: ≤ 2.5 seconds.
Common LCP elements:
| Element Type | Common Cause of Poor LCP | Optimization |
|---|---|---|
| Hero image | Large, unoptimized image | Compress, resize, use next-gen formats (WebP, AVIF), lazy-load below-fold images |
| Heading/text block | Slow-rendered font or CSS | Inline critical CSS, preload fonts, reduce render-blocking resources |
| Video poster | Large poster image | Optimize poster image, consider removing autoplay |
| Background image | CSS background-image with large file | Optimize, consider replacing with <img> tag for loading control |
LCP optimization techniques:
| Technique | Typical Improvement | Effort |
|---|---|---|
| Optimize and compress images | 0.3-1.0s | Low |
| Use a CDN with edge caching | 0.2-0.5s | Medium |
| Remove render-blocking resources | 0.3-0.8s | Medium |
| Preload LCP image | 0.1-0.3s | Low |
| Enable text compression (Brotli/Gzip) | 0.1-0.3s | Low |
| Upgrade hosting/server infrastructure | 0.3-1.0s | Medium-High |
| Implement critical CSS | 0.2-0.5s | Medium |
LCP diagnosis:
- Use Lighthouse or PageSpeed Insights: the LCP section shows the element and recommended fixes.
- CrUX (Chrome User Experience Report): shows actual LCP from real users.
- GSC CWV report: identifies URL groups with poor LCP.
INP Optimization
Interaction to Next Paint (INP) measures the responsiveness of a page to user interactions. Target: ≤ 200 milliseconds.
What INP measures:
- The time from a user interaction (click, tap, key press) to the next visual update.
- Longer INP means the page feels laggy or unresponsive to user input.
Common causes of poor INP:
| Cause | Example | Optimization |
|---|---|---|
| Long main thread tasks | Heavy JavaScript processing | Break tasks into smaller chunks (setTimeout, requestIdleCallback) |
| Complex event handlers | Attaching slow logic to every click event | Debounce, throttle, optimize handler code |
| Third-party script blocking | Analytics, chat widgets, ads loading on the main thread | Defer non-critical third-party scripts, use web workers |
| Slow DOM updates | Re-rendering large sections of the page on interaction | Virtual DOM, targeted DOM updates |
| Large JS bundles | All JavaScript loaded and executed before interaction | Code-splitting, lazy-load non-critical JS |
INP diagnosis:
- Lighthouse now includes INP measurement (experimental).
- PageSpeed Insights shows INP from lab data.
- Web Vitals extension or Chrome DevTools Performance panel for real-user measurement.
CLS Optimization
Cumulative Layout Shift (CLS) measures visual stability — how much the page layout shifts during load. Target: ≤ 0.1.
Common CLS causes:
| Cause | Example | CLS Impact |
|---|---|---|
| Images without dimensions | Images not specifying width/height | Shift when image loads |
| Ads or embeds without reserved space | Ad insertion pushes content down | Significant shift |
| Dynamic content injected above existing content | Banner, cookie notice, newsletter popup | Shift when element appears |
| Web fonts causing layout shift (FOUT/FOIT) | Fallback font then custom font | Small but cumulative shift |
| Late-loading iframes | YouTube embeds, social widgets | Shift when iframe loads |
CLS optimization techniques:
| Technique | Typical Improvement |
|---|---|
| Set explicit width/height on all images and video elements | Eliminates most CLS from images |
| Reserve ad slot dimensions | Prevents ad-related shifts |
| Use font-display: optional or font-display: swap with size-adjust | Reduces font-related shifts |
| Avoid inserting content above existing content | Use push notifications reserved space |
| Set dimensions on iframes | Prevents embed-related shifts |
CLS diagnosis:
- Lighthouse CLS section: shows the specific elements that caused shifts.
- PageSpeed Insights: highlights cumulative layout shift sources.
- Chrome DevTools: experience the page load with "Layout Shift" recording enabled.
Image Optimization
Images are often the largest resources on a page and a primary contributor to both LCP and page weight.
Image optimization principles:
| Principle | Implementation |
|---|---|
| Next-gen formats | Use WebP or AVIF instead of JPEG/PNG for all new images |
| Responsive images | Use srcset to serve different sizes for different viewports |
| Compression | Use lossy compression with minimal visible quality loss (80-85% quality is usually optimal) |
| Lazy loading | Load below-fold images only when they approach the viewport |
| Proper dimensions | Set width/height attributes to prevent CLS |
| CDN delivery | Serve images from a CDN with edge caching |
Image optimization techniques by impact:
| Technique | Impact on page weight | Typical Improvement |
|---|---|---|
| Convert to WebP/AVIF | 25-35% reduction | Significant |
| Compress (lossy) | 30-50% reduction | Significant |
| Serve correct dimensions | 40-70% reduction | Significant |
| Lazy load below-fold | Variable (depends on page scroll depth) | Moderate |
| Use next-gen format (AVIF) | 50%+ reduction vs JPEG | Very significant |
Image optimization check:
- Use Lighthouse: it shows potentially optimizable images.
- Use PageSpeed Insights image optimization section.
- Use tools like Squoosh, ImageOptim, or ShortPixel for compression.
JavaScript Reduction
Excessive or poorly optimized JavaScript can increase LCP, INP, and total page weight.
JavaScript optimization techniques:
| Technique | Implementation | Impact |
|---|---|---|
| Code-splitting | Load only the JavaScript needed for the current page | Reduces initial bundle size |
| Tree-shaking | Remove unused JavaScript code | Reduces bundle size |
| Lazy-load non-critical JS | Defer JavaScript that is not needed for initial render | Improves LCP |
| Async/defer for non-critical scripts | async for independent scripts, defer for ordered scripts | Prevents render-blocking |
| Remove unused JavaScript | Audit third-party scripts for value vs performance cost | Variable |
| Use ES modules | Native browser module loading for modern browsers | Better caching and dependency management |
JavaScript auditing tools:
- Lighthouse: JavaScript execution time section.
- Coverage tab in Chrome DevTools: shows used vs unused JavaScript.
- Bundle analyzers (webpack-bundle-analyzer, source-map-explorer): identify large dependencies.
Measurement: After JS optimization, verify that core functionality still works and that no regression occurs in tracking, forms, or dynamic content.
CSS Optimization
CSS optimization reduces render-blocking stylesheets and stylesheet size.
CSS optimization techniques:
| Technique | Implementation | Impact |
|---|---|---|
| Critical CSS inline | Inline CSS needed for above-fold content, defer the rest | Improves LCP by reducing render-blocking |
| Minification | Remove whitespace, comments, and unnecessary characters | Reduces file size by 20-40% |
| Remove unused CSS | Audit and remove CSS rules that do not match any HTML element | Can significantly reduce CSS file size |
| Reduce specificity | Simplify selectors to improve rendering performance | Marginal impact on modern browsers |
| Use CSS variables | Reduce repetition in stylesheets | Maintainability improvement |
CSS auditing tools:
- Lighthouse: Reduce unused CSS warnings.
- Coverage tab in Chrome DevTools: shows used vs unused CSS.
- PurgeCSS or UnCSS for removing unused CSS in build process.
Server Response Optimization
Server response time affects Time to First Byte (TTFB), which contributes to LCP and overall page speed.
Server response optimization techniques:
| Technique | Implementation | Typical Improvement |
|---|---|---|
| Caching | Browser caching, CDN caching, server-level caching | Significant (0.3-1.0s) |
| CDN | Move content closer to users geographically | 0.2-0.8s |
| PHP/application optimization | Opcode caching, database query optimization | 0.1-0.5s |
| HTTP/2 or HTTP/3 | Multiplexed connections reduce latency | 0.1-0.3s |
| Brotli compression | Better compression ratio than Gzip | 10-20% smaller transfers |
| Dedicated/upgraded hosting | Move from shared to dedicated or upgraded plan | 0.2-1.0s |
TTFB targets:
- Good: < 200ms
- Needs improvement: 200-500ms
- Poor: > 500ms
Server response diagnosis:
- PageSpeed Insights TTFB section.
- WebPageTest: detailed server response timing.
- Server monitoring tools (New Relic, DataDog): identify slow database queries or application code.
Workflow
- Measure baseline: Run PageSpeed Insights for desktop and mobile on 10 representative pages.
- Review CWV report in GSC: Identify URL groups with poor CWV.
- Prioritize fixes: Start with the highest-traffic pages with the worst metrics.
- Optimize images: Convert to WebP/AVIF, compress, set dimensions, add lazy loading.
- Optimize JavaScript: Code-split, lazy load, async/defer, remove unused.
- Optimize CSS: Inline critical CSS, minify, remove unused.
- Optimize server: Improve caching, CDN, compression, hosting.
- Re-measure: Verify improvement after each change.
- Monitor: Set up CWV monitoring to detect regressions.
Common Mistakes
Optimizing for lab data only: Lighthouse and PageSpeed Insights are lab data. Always check CrUX (real-user data) for the full picture.
- Over-optimizing images: Aggressive compression can harm image quality. Balance file size and visual quality.
- Implementing critical CSS without testing: Incorrect critical CSS can break page rendering. Test thoroughly.
- Ignoring third-party script impact: A single heavy third-party script (chat widget, analytics) can undo all other speed optimizations.
- Not measuring before and after: Without measurement, you cannot confirm the optimization worked.
Checklist
- LCP is ≤ 2.5s for all page groups (check GSC CWV report).
- INP is ≤ 200ms (if available in your CWV report).
- CLS is ≤ 0.1 for all page groups.
- All images use next-gen formats (WebP/AVIF) with compression.
- Images have explicit width/height attributes.
- Below-fold images use lazy loading.
- Critical CSS is inlined (or plan to implement).
- JavaScript is code-split and non-critical scripts are lazy loaded.
- Server response (TTFB) is < 200ms.
- CDN is configured.
- CWV is monitored with alerting for regression.