I used to think my website was “pretty fast.” Then I ran Google PageSpeed Insights (PSI) and got a score that can only be described as emotionally humbling. The page loaded. Eventually. But PSI wasn’t grading my site on “eventually,” it was grading it on what real people experience on real devices with real Wi-Fi that occasionally runs on vibes.
This post is a practical, real-world style case study: what PSI showed, what I changed, and the before/after results. It’s written for people who want a faster site and better user experiencenot just a prettier number. Along the way, we’ll talk Core Web Vitals, lab data vs. field data, and why “fixing speed” is often a polite way of saying “stop forcing a phone from 2019 to parse 2 MB of JavaScript for a recipe blog.”
What PageSpeed Insights Actually Measures (and Why That Matters)
PSI is essentially two reports stacked together:
- Field data (real-user data): A snapshot of how your page (or your whole site origin) performs for real Chrome users over a rolling window. This is where Core Web Vitals live.
- Lab data (simulated test): A Lighthouse run in a controlled environment. This is fantastic for debugging because it updates immediately when you make changeseven if real-user data takes time to catch up.
Here’s the key mindset shift that saved me from going full gremlin: lab data is your workbench; field data is your report card. Lab results help you diagnose issues quickly. Field data tells you whether real people feel the improvement.
Also, PSI won’t always show field data for every URL. If a page doesn’t have enough real-user samples (or isn’t publicly accessible), PSI may only show lab data. That’s not “Google hiding the truth.” It’s “you don’t have enough anonymous real-world measurements yet.”
My Baseline: The “Before” Test Results
I tested a content-heavy WordPress page (lots of images, a few embeds, and the usual plugin buffet). PSI gave me two kinds of pain: slow loading and janky behavior (layout shifts, delayed interactivity). Here are the baseline numbers I used to track progress.
Before (Mobile)
| Metric | Result | Why I cared |
|---|---|---|
| Performance Score (Lighthouse) | 42 | Not the whole story, but it flagged real problems. |
| LCP (Largest Contentful Paint) | 4.8s | Main content wasn’t “ready” fast enough. |
| INP (Interaction to Next Paint) | 410ms | Clicks sometimes felt delayed. |
| CLS (Cumulative Layout Shift) | 0.25 | The page visibly hopped around while loading. |
| TTFB (Time to First Byte) | 1.2s | Server response was sluggisheverything else started late. |
| TBT (Total Blocking Time) | 650ms | Too many long JavaScript tasks blocking the main thread. |
Desktop wasn’t nearly as bad (desktop rarely is), but mobile is where most sites either win trust or lose visitors. So I optimized for mobile first.
The Strategy: Stop Chasing the Score and Start Chasing the Bottlenecks
PSI gives you a big list of “Opportunities” and “Diagnostics.” The mistake I made at first was trying to fix everything at once. That’s how you end up with a site that loads fast and also… doesn’t open the menu. Instead, I prioritized based on impact:
- Fix server response time (TTFB) so every request starts sooner.
- Fix LCP by optimizing the hero element (usually an image, big heading, or featured media).
- Fix INP by reducing long JavaScript tasks and third-party script drama.
- Fix CLS by reserving space for anything that loads late (images, fonts, embeds, ads).
Think of it like cleaning a garage: you don’t start by alphabetizing screws. You start by removing the couch that shouldn’t be in a garage.
What I Changed (and What Actually Moved the Needle)
1) I Cut TTFB by Treating Caching Like a Feature, Not a Rumor
My server was doing too much work for repeat visitors. Every request was basically: “Hello, welcome backlet me rebuild the entire universe from scratch.” The fastest page is the one your server doesn’t have to assemble repeatedly.
- Page caching: I enabled full-page caching for anonymous visitors, so most requests served a prebuilt HTML response.
- Smarter cache rules: I excluded truly dynamic pages (cart/checkout/login) and cached the rest aggressively.
- CDN for static assets: Images, CSS, and JS were served from edge locations closer to users.
- Reduced “backend busywork”: I cleaned up a few plugins that were doing extra database calls on every page view.
Result: TTFB dropped because the origin server wasn’t under constant pressure, and assets arrived faster from cache/edge.
2) I Improved LCP by Fixing the One Element That “Defines” the Page
LCP measures when the largest visible content element finishes rendering. On my page, that was a big featured image at the top. It was beautiful. It was also a multi-megabyte confidence destroyer.
Here’s what I did, in plain English:
- Converted the hero image to a modern format (WebP/AVIF where supported) and ensured the file size was reasonable. I didn’t need a 4000px-wide image to display at 1200px.
- Used responsive images so phones download smaller versions instead of the “billboard” edition.
- Prioritized the LCP image (making sure it isn’t lazy-loaded and loads early).
- Optimized fonts so the big headline didn’t wait behind a slow font file (and didn’t cause layout jumps).
- Removed render-blocking clutter (unused CSS and heavy above-the-fold scripts).
The simplest way to think about LCP is: what does the user come here to see first? Make that thing arrive first.
3) I Improved INP by Breaking Up “Main Thread Bullies”
INP is about responsivenesshow quickly your page reacts when someone taps, clicks, or types. If your main thread is busy running long tasks, the site can feel laggy even if it “loads” quickly.
My biggest INP offenders were:
- Third-party scripts (analytics, ad scripts, social embeds) competing for attention.
- A bulky slider script that was working overtime to animate something nobody asked for.
- Too much JavaScript executing during startup instead of when it was actually needed.
Fixes that helped:
- Delayed non-essential third-party scripts until after the page was usable, or loaded them on interaction instead of immediately.
- Removed one “nice-to-have” feature that was expensive (the slider) and replaced it with a lighter alternative.
- Reduced long tasks by minimizing and splitting scripts where possible, and avoiding unnecessary work on page load.
This part is where PSI was especially helpful: it didn’t just say “your site is slow,” it pointed at the likely culprits and gave me a prioritized hit list.
4) I Fixed CLS by Reserving Space Like an Adult
CLS is the “why did the button move right when I clicked it?” metric. Most layout shifts come from elements that appear late without reserved space: images without dimensions, ads that inject themselves, iframes that expand, and fonts that swap.
What worked:
- Set width/height (or aspect-ratio) for images so the browser can allocate space before the file downloads.
- Reserved space for embeds (like YouTube) using a consistent container size.
- Made font loading behave so text didn’t reflow dramatically after custom fonts arrived.
- Stopped surprise UI inserts above the fold (popups and banners that shove content down mid-scroll).
CLS improvements often feel “small” until you use the site on a phone with one hand. Then it feels like the page went from trampoline to sidewalk.
The “After” Test Results (and What Changed)
After implementing the changes above, I reran PSI (multiple times, more on that in a second). The lab score jumped fast. The page also felt noticeably quicker and calmer in real useespecially on mobile.
After (Mobile)
| Metric | Before | After | What likely caused the win |
|---|---|---|---|
| Performance Score (Lighthouse) | 42 | 95 | Reduced render blocking, optimized LCP asset, less main-thread work. |
| LCP | 4.8s | 2.1s | Smaller hero image, earlier priority, faster server response, less blocking CSS/JS. |
| INP | 410ms | 160ms | Fewer long tasks, delayed third-party scripts, lighter interactive components. |
| CLS | 0.25 | 0.05 | Reserved space for images/embeds, more stable font behavior, fewer surprise inserts. |
| TTFB | 1.2s | 0.4s | Page caching + CDN + reduced backend overhead. |
| TBT | 650ms | 120ms | Less JavaScript execution during load; fewer heavy scripts. |
That’s the part people love to screenshot. But the more useful takeaway is this: the improvements weren’t magic; they were targeted. PSI helped me see where the time was going, and then I removed the biggest time thieves first.
How to Use PageSpeed Insights Without Getting Fooled by a Single Run
PSI is powerful, but it’s not a fortune teller. To get reliable direction:
- Run it more than once and look for patterns. Lab tests vary because networks and test conditions aren’t identical every time.
- Compare mobile and desktop, but optimize where your users actually are. Most sites should care more about mobile.
- Focus on Core Web Vitals first (LCP, INP, CLS). If you pass these consistently, you’re usually in good shape.
- Remember field data lags behind. Real-user improvements can take time to reflect because they’re based on a rolling window.
Another sanity-saving tip: treat PSI as a prioritization tool, not a personality test. A “Needs Improvement” score doesn’t mean you’re a bad person. It means your CSS is a little too proud of itself.
Common Traps I Avoided (After Falling Into Them Once)
Trap #1: Optimizing for 100 Instead of Optimizing for Humans
It’s possible to game Lighthouse scores in ways that don’t help real visitors. For example, you can delay scripts so aggressively that your page “loads” fast… and then features appear late or break. I used PSI as guidance, but I validated changes by actually using the site like a visitor.
Trap #2: “One More Plugin Will Fix It”
Performance plugins can help, but stacking multiple “optimizer” plugins is like hiring three DJs for one wedding. Somebody’s going to fight over the controls. I chose a simple setup: caching + image optimization + selective script control.
Trap #3: Ignoring the Server
Front-end tweaks matter, but a slow server response makes everything late. Even perfect images can’t load quickly if the first byte takes forever. TTFB improvements made every other fix more effective.
Conclusion: What PSI Really “Boosted” for Me
Google PageSpeed Insights didn’t speed up my site by itself. What it did was arguably more valuable: it gave me a clear, prioritized map of what to fix, plus metrics that let me verify the work.
The biggest wins came from:
- Getting faster server responses through caching and smarter delivery.
- Optimizing the largest above-the-fold element so the page feels ready sooner.
- Reducing main-thread JavaScript work so interactions feel instant.
- Stopping layout shifts so the page behaves like it has manners.
If you do nothing else, do this: run PSI, identify your LCP element, and make that load fast. Then stabilize your layout. Then tackle responsiveness. You’ll feel the differenceand your visitors will too.
Extra: of Real-World “I Didn’t Expect That” Experiences
The funniest part of speeding up a website is discovering how many “tiny” decisions quietly add up to a slow experience. When I started, I assumed the biggest culprit would be my theme or hosting. Plot twist: the real villains were a handful of “helpful” extras that had slowly attached themselves to my site like barnacles.
Example: I had a social sharing plugin that looked innocentjust a row of icons. But it also loaded scripts, style sheets, and tracked user interactions in ways that were wildly unnecessary for a simple blog post. Removing it didn’t just shave milliseconds; it reduced random layout movement and made the page feel calmer. It was like taking off a backpack I forgot I was wearing.
Another surprise was how emotional the “Serve images in next-gen formats” suggestion can get. I thought, “Sure, I’ll convert images, done.” But then I learned the hard truth: conversion is easy; serving the right size is where the real speed lives. A beautiful WebP can still be huge. My turning point was treating images like a delivery problem, not an art gallery: smaller versions for small screens, sensible compression, and making sure the hero image isn’t secretly a billboard.
I also learned that “defer everything” is not a personality traitit’s a risk. The first time I deferred a bunch of JavaScript, PSI got happier… and my navigation menu got sadder. That’s the performance version of cleaning your room by shoving everything under the bed: it looks great until you need socks. The fix was being selective: defer what isn’t needed immediately, but keep essential UI scripts reliable. Performance should never require your visitors to become detectives.
The most satisfying improvement, though, was CLS. I didn’t realize how much layout shift hurts trust until it stopped happening. Once I added consistent image dimensions and reserved space for embeds, the page stopped “wiggling” as it loaded. Suddenly my site felt more professionaleven though the design didn’t change. It turns out stability is a feature users can feel instantly, even if they can’t name it.
Finally, PSI taught me patience. Lab results improved right away, which was motivating. But real-user data takes time to reflect changes. Instead of obsessively refreshing reports, I used the fast feedback loop of Lighthouse to confirm I was moving in the right direction, then validated the experience by browsing the site on my phone like a normal human. The moment it felt fast in my handnot just on a report was when I knew the work was worth it.

