PageSpeed Insights is Google’s free tool for analyzing website performance and Core Web Vitals. Understanding how to read its reports and implement its recommendations is crucial for achieving excellent search rankings and user experience.

What is PageSpeed Insights?

PageSpeed Insights (PSI) provides:

• Lab Data: Synthetic testing using Lighthouse
• Field Data: Real user metrics from Chrome User Experience Report (CrUX)
• Core Web Vitals Assessment: Pass/fail status for LCP, INP, and CLS
• Actionable Recommendations: Specific optimizations to improve scores

Understanding the Report

The Two Scores

PageSpeed Insights displays two separate scores:

1. Performance Score (0-100)

• Based on lab data (Lighthouse)
• Synthetic test from a simulated environment
• Useful for development and testing
• May not reflect real user experience

2. Core Web Vitals Assessment (Pass/Fail)

• Based on field data (CrUX)
• Real user metrics from actual visitors
• What Google uses for search ranking
• More important than lab score

Lab vs. Field Data

Lab Data:

• Controlled environment
• Consistent results
• Useful for debugging
• Not affected by user device/network variations

Field Data:

• Real user measurements
• Varies based on actual traffic
• Only available for sites with sufficient traffic
• Reflects true user experience

Core Web Vitals Thresholds

Largest Contentful Paint (LCP)

• Good: ≤ 2.5 seconds
• Needs Improvement: 2.5 - 4.0 seconds
• Poor: > 4.0 seconds

Interaction to Next Paint (INP)

• Good: ≤ 200 milliseconds
• Needs Improvement: 200 - 500 milliseconds
• Poor: > 500 milliseconds

Cumulative Layout Shift (CLS)

• Good: ≤ 0.1
• Needs Improvement: 0.1 - 0.25
• Poor: > 0.25

Analyzing Your Report

Step 1: Check Field Data First

The field data section shows real user metrics:

Field Data
- LCP: 2.1s (Good)
- INP: 150ms (Good)
- CLS: 0.08 (Good)

Assessment: Passed Core Web Vitals ✓

If you see “No field data available,” your site doesn’t have enough Chrome users yet. Focus on lab data and check back in 28 days.

Step 2: Review Performance Score

The lab score (0-100) breaks down into:

• First Contentful Paint (FCP): 10%
• Largest Contentful Paint (LCP): 25%
• Total Blocking Time (TBT): 30%
• Cumulative Layout Shift (CLS): 25%
• Speed Index: 10%

Score Interpretation:

• 90-100: Good (Green)
• 50-89: Needs Improvement (Orange)
• 0-49: Poor (Red)

Step 3: Examine Diagnostics

The diagnostics section reveals specific issues:

• Render-blocking resources
• Unused JavaScript/CSS
• Image optimization opportunities
• Font loading problems
• Third-party code impact

Common Issues and Fixes

1. Eliminate Render-Blocking Resources

Issue: CSS and JavaScript files blocking initial render

Solutions:

Inline Critical CSS:

<style>
  /* Critical above-the-fold styles */
  .hero { background: #000; }
</style>
<link rel="preload" href="/styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

Defer Non-Critical JavaScript:

<script src="/script.js" defer></script>

Use async for Independent Scripts:

<script src="/analytics.js" async></script>

2. Properly Size Images

Issue: Serving oversized images

Solutions:

Use Responsive Images:

<img 
  srcset="
    small.jpg 400w,
    medium.jpg 800w,
    large.jpg 1200w
  "
  sizes="(max-width: 600px) 400px, (max-width: 900px) 800px, 1200px"
  src="medium.jpg"
  alt="Description"
>

Use Modern Formats:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Description">
</picture>

Lazy Load Below-the-Fold Images:

<img src="image.jpg" loading="lazy" alt="Description">

3. Minimize Main-Thread Work

Issue: JavaScript blocking the main thread

Solutions:

Code Splitting:

// Instead of importing everything
import {everything} from './library';

// Import only what you need
import {justWhatINeed} from './library';

Web Workers for Heavy Tasks:

// worker.js
self.addEventListener('message', (e) => {
  const result = performHeavyCalculation(e.data);
  self.postMessage(result);
});

// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = (e) => console.log(e.data);

4. Reduce JavaScript Execution Time

Issue: Too much JavaScript being parsed and executed

Solutions:

Remove Unused Code:

# Use tools like webpack-bundle-analyzer
npm install --save-dev webpack-bundle-analyzer

Tree Shaking:

// webpack.config.js
module.exports = {
  mode: 'production',
  optimization: {
    usedExports: true,
  },
};

Dynamic Imports:

button.addEventListener('click', async () => {
  const module = await import('./heavy-feature.js');
  module.init();
});

5. Avoid Enormous Network Payloads

Issue: Downloading too much data

Solutions:

Enable Compression:

# nginx.conf
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;

Use CDN: Serve static assets from a Content Delivery Network to reduce latency.

Implement Caching:

<!-- In your HTML head -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://cdn.example.com">

6. Serve Static Assets with Efficient Cache Policy

Issue: Missing or short cache durations

Solution:

# nginx.conf
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

7. Avoid Large Layout Shifts

Issue: Content moving as page loads

Solutions:

Set Image Dimensions:

<img src="image.jpg" width="800" height="600" alt="Description">

Reserve Space for Ads:

.ad-slot {
  min-height: 250px;
  background: #f0f0f0;
}

Avoid Inserting Content Above Existing Content:

// Bad: Inserting at the top
container.prepend(newElement);

// Good: Appending or using fixed positioning
container.append(newElement);

Mobile vs. Desktop Optimization

Test Both Views

PageSpeed Insights tests mobile by default. Switch to desktop view to check both:

• Mobile: Simulates slow 4G connection
• Desktop: Simulates faster connection

Mobile-Specific Optimizations

1. Reduce Touch Target Size: Ensure buttons are at least 48x48 pixels.

2. Optimize for Slower Networks:

<link rel="preload" href="/critical.css" as="style">

3. Consider Mobile-First Design: Start with mobile styles, then enhance for desktop.

Monitoring with Web Vitals Extension

While PageSpeed Insights is great for one-time analysis, you need continuous monitoring during development. The Web Vitals Chrome Extension provides:

• Real-time metrics as you browse
• Badge indicator showing instant pass/fail status
• Console logging for detailed debugging
• HUD overlay displaying metrics on the page

Install it now: Web Vitals Extension

Advanced Optimization Techniques

1. Preload Key Resources

<link rel="preload" href="/hero-image.jpg" as="image">
<link rel="preload" href="/critical-font.woff2" as="font" type="font/woff2" crossorigin>

2. Use Resource Hints

<!-- Establish early connections -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://analytics.google.com">

<!-- Prefetch likely next pages -->
<link rel="prefetch" href="/next-page.html">

3. Implement Service Workers

// service-worker.js
self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open('v1').then((cache) => {
      return cache.addAll([
        '/',
        '/styles.css',
        '/script.js',
      ]);
    })
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

4. Optimize Third-Party Scripts

Defer Non-Essential Third Parties:

<!-- Load analytics after page interactive -->
<script>
  window.addEventListener('load', () => {
    const script = document.createElement('script');
    script.src = 'https://analytics.com/script.js';
    document.body.appendChild(script);
  });
</script>

Use Facades for Embeds: Instead of loading YouTube immediately, show a thumbnail and load the iframe on click.

Achieving 100/100 Score

The Reality

A perfect 100 score doesn’t guarantee the best user experience. Focus on:

1. Passing Core Web Vitals (most important)
2. Reasonable lab scores (70-90 is often good enough)
3. Real user experience (test on actual devices)

When to Prioritize Lab Score

• Marketing/competitive reasons
• Demonstrating technical excellence
• When you’ve already passed Core Web Vitals

Diminishing Returns

Going from 90 to 100 often requires:

• Significant engineering effort
• Trade-offs in functionality
• Maintenance burden

Better approach: Get to 90, ensure field data passes, then focus on features.

Tracking Progress Over Time

1. Set Up Lighthouse CI

npm install -g @lhci/cli

# Run locally
lhci autorun

2. Monitor CrUX Data

Use Chrome UX Report API to track field data programmatically.

3. Use the Web Vitals Extension

During development, keep the Web Vitals Extension running to catch regressions immediately.

Common Pitfalls

1. Optimizing Only for Lab Data

Field data matters more for SEO. Don’t ignore it.

2. Over-Optimizing Unnecessary Pages

Focus on high-traffic, high-value pages first.

3. Breaking Functionality for Speed

Performance is important, but not at the expense of core features.

4. Ignoring Mobile Performance

Most users are on mobile. Test there first.

5. Not Monitoring Continuously

Performance degrades over time. Set up automated monitoring.

Conclusion

PageSpeed Insights is your roadmap to better Core Web Vitals and improved user experience. Focus on:

1. Passing Core Web Vitals in field data
2. Fixing high-impact issues from diagnostics
3. Monitoring continuously with tools like the Web Vitals Extension
4. Testing on real devices with varying network conditions

Start by running your first test at pagespeed.web.dev, then install the Web Vitals Extension to monitor your progress in real-time.

---

Resources:

• PageSpeed Insights
• Web Vitals Extension
• Lighthouse Documentation
• Chrome UX Report