How I Improved a Resort Website’s PageSpeed Score from 58 to 90+

If your website loads slowly, Google notices. Users notice. And bookings drop.

In this complete technical SEO case study, I’ll show you exactly how I improved a resort website’s PageSpeed score from 58 to 90+ using advanced Core Web Vitals optimization, image compression strategies, JavaScript cleanup, and render-blocking fixes.

This guide is practical, data-driven, and ideal for developers, SEO professionals, and website owners who want to:

• Improve PageSpeed score

• Reduce LCP time

• Reduce Total Blocking Time (TBT)

• Optimize images for SEO

• Fix slow website loading

• Remove render blocking resources

• Reduce JavaScript execution time

Let’s break it down step by step.

The Initial Problem: Poor Core Web Vitals Performance

Lighthouse Audit (Before Optimization)

• Performance Score: 58

• Largest Contentful Paint (LCP): 2.9s

• Total Blocking Time (TBT): 570ms

• First Contentful Paint (FCP): 0.7s

• Total Network Payload: 13MB+

• Image Savings Opportunity: 4.4MB

The biggest issue?

Image Optimization for Core Web Vitals

The hero image alone was over 8MB and used as a CSS background — directly affecting LCP.

This case study focuses heavily on:

• Website performance optimization

• Core Web Vitals optimization

• Image optimization for Core Web Vitals

Root Cause Analysis: Why the Website Was Slow

After running a full Lighthouse audit and Chrome DevTools trace, these were the core problems:

1️⃣ Huge Unoptimized Images (13MB Payload)

• 8MB hero image (Cloudinary)

• Heavy PNG logos (300KB+ for 100x100 display)

• Wrong image dimensions served

• No modern formats (WebP / AVIF)

This alone accounted for 4.4MB estimated savings.

2️⃣ Background Image Used as LCP

The Largest Contentful Paint element was:

div.absolute.inset-0.bg-cover.bg-center

That means:

• The hero image was applied via CSS

• No preload

• No fetchpriority="high"

• Not optimized via <img> or Next.js image optimization

This caused:

• 740ms resource load delay

• 840ms element render delay

3️⃣ High JavaScript Execution Time

• 1.3s JS execution

• 570ms Total Blocking Time

• Heavy unused JS chunks

• Third-party scripts (Tag Manager, analytics)

This directly impacted:

• Reduce JavaScript execution time

• Reduce Total Blocking Time (TBT)

4️⃣ Render Blocking Resources

• Google Fonts blocking rendering

• Multiple CSS chunks loading in critical path

• No proper preloading strategy

This affected LCP and Speed Index.

Step-by-Step Optimization Strategy

Now let’s look at what I did to improve PageSpeed score from 58 to 90+.

Step 1: Image Optimization for Core Web Vitals

This was the biggest win.

Actions Taken:

1. Converted Images to WebP

• Replaced JPG & PNG with WebP

• Used Cloudinary auto format: f_auto,q_auto

Result:

• 8MB hero image reduced to ~900KB

• 300KB PNG logo reduced to ~40KB

2. Served Correct Image Dimensions

Problem:  Images were served at 1080px but displayed at 400px.

Fix:

• Implemented responsive images

• Used proper width & height attributes

• Adjusted Next.js image breakpoints

Result: Massive reduction in unnecessary image bytes.

3. Replaced Background LCP Image

Instead of: background-image: url(hero.jpg)

I used:

<img 

  src="hero.webp"

  fetchpriority="high"

  width="1920"

  height="1080"

  alt="Luxury resort in Nature"

/>

Why?

Because background images:

• Cannot be prioritized properly

• Are harder for browsers to optimize

• Delay LCP rendering

This alone reduced LCP by ~1.5 seconds.

Result: LCP Optimization

Before:

• LCP: 2.9s

After:

• LCP: ~1.4s

This is a major Core Web Vitals improvement.

Step 2: Reduce Total Blocking Time (TBT)

Actions Taken:

1. Removed Unused JavaScript

• Eliminated unused chunks

• Reduced JS bundle size

• Removed unnecessary polyfills

This reduced:

• 654KB unused JS

• Script evaluation time

2. Deferred Third-Party Scripts

• Loaded Google Tag Manager after interaction

• Delayed analytics scripts

• Used defer and async

This reduced:

• Main-thread blocking

• Long tasks

• JS execution time

3. Code Splitting & Lazy Loading

Implemented dynamic imports for:

• Below-the-fold components

• Non-critical scripts

Result:

• Reduced main thread work

• Reduced TBT from 570ms to under 150ms

Step 3: Remove Render Blocking Resources

What Was Done:

1. Inlined Critical CSS

Above-the-fold CSS was extracted and inlined.

2. Deferred Non-Critical CSS

Loaded secondary styles asynchronously.

3. Optimized Google Fonts

Instead of multiple font requests:

• Reduced font weights

• Used display=swap

• Removed unnecessary variants

This improved render start time.

Step 4: Enable Proper Caching

Issue:

• No cache TTL on some third-party resources

Fix:

• Implemented proper cache-control headers

• Leveraged CDN caching

• Optimized Cloudinary delivery

This improved repeat visits significantly.

Final Results (After Optimization)