Building for performance: lessons from a real project
Theory is one thing; here's what I actually did to take a client site from failing Core Web Vitals to passing across all metrics.
We talk about performance a lot in the abstract, use this technique, avoid that pattern, follow these best practices. But specific, real-world examples are more useful than general advice, so here's a concrete case study from a project I completed earlier this year.
The client is a B2B services company with roughly 40 pages. Their existing WordPress site, built on Elementor, had the following Core Web Vitals from the Chrome User Experience Report: LCP of 4.8 seconds (poor), CLS of 0.18 (poor), INP of 380ms (poor). Lighthouse scores ranged from 35 to 55 depending on the page. Organic traffic had been declining for six months.
What was causing the problems
I ran a detailed audit before touching anything. The page weight on the homepage was 6.2MB. Of that, 3.1MB was images (unoptimised PNGs and JPEGs served without responsive sizing), 1.8MB was JavaScript (jQuery, Elementor's scripts, several plugins, Google Tag Manager loading four tags synchronously), and the rest was CSS, fonts, and HTML.
The LCP element was a hero image that was 2400px wide and 1.9MB. It wasn't lazy-loaded (correctly, since it's above the fold), but it also wasn't compressed, wasn't served in a modern format, and didn't have width and height attributes, which contributed to CLS. The INP issue was caused by a JavaScript-heavy navigation menu that blocked the main thread for 400ms+ on interaction.
What I did
I rebuilt the site on Next.js with Sanity as the CMS. But the framework change alone wouldn't have fixed the performance issues, the specific optimisations mattered more:
Images: Every image is served via Next.js's Image component, which handles WebP/AVIF conversion, responsive sizing, lazy loading, and width/height attributes automatically. The hero image went from 1.9MB to 85KB (WebP, properly sized). Total image weight across the homepage dropped from 3.1MB to 320KB.
JavaScript: Server components meant most pages ship under 80KB of client-side JavaScript. The navigation is a CSS-only implementation for basic open/close, enhanced with a small client component for animation. No jQuery, no Elementor, no plugin scripts. Google Tag Manager loads asynchronously after the page is interactive, with consent gating.
Fonts: I switched from loading five font weights from Google Fonts to self-hosting two weights of DM Sans with font-display: swap and preload hints. Font-related CLS dropped to zero.
CSS: Tailwind CSS with purging reduced the stylesheet from 480KB (Elementor) to 18KB.
The results
Post-launch Core Web Vitals (from CrUX, so real user data, not lab tests): LCP 1.2 seconds (good), CLS 0.02 (good), INP 85ms (good). Homepage page weight: 380KB total. Lighthouse performance scores improved dramatically across all pages.
Organic traffic recovered within six weeks and has since exceeded the pre-decline baseline. The client's Google Search Console shows a clear correlation between the Core Web Vitals improvement and improved rankings, particularly for competitive keywords where they were previously on page two.
What I'd want you to remember
None of the individual techniques are novel. Image optimisation, JavaScript reduction, font loading strategy, efficient CSS, these are all well-documented. The difference is doing all of them, consistently, across every page, and measuring the results with real user data rather than lab tests. A performance budget set at the start of the project kept me disciplined throughout development.
If your site is struggling with Core Web Vitals and you want to understand what's fixable, I'd love to take a look, reach out and I'll run a free performance audit.
Chris Ryan
Managing Director
17+ years in full-stack web development, most of it leading teams agency-side across e-commerce, CMS platforms, and bespoke applications. Specialises in infrastructure, system integration, and data privacy, with hands-on experience as a Data Protection Officer. Founded Innatus Digital in 2020 to offer the kind of honest, technically-led partnership that he felt was missing from the agency world.