Optimizing Brookbush Institute's Website: A Core Web Vitals Success Story

Overview

Brookbush Institute is a provider of online education for human movement professionals. They offer a comprehensive range of courses, videos, and resources designed to enhance the knowledge and skills of physiotherapists, personal trainers, and other movement specialists.

The Challenge: Poor Core Web Vitals and Performance Issues

Brookbush Institute's website was struggling with significant performance issues, resulting in poor Core Web Vitals scores - with more than 80% of pages being classified as "Poor". These problems ranged from broken build pipelines to inefficient resource management, leading to:

• Slow page load times
• Delayed interactivity
• Layout instability
• Poor user experience
• Negative impact on search engine rankings

My Objectives

1. Resolve critical performance issues affecting Core Web Vitals
2. Achieve a "Good" rating for at least 99% of URLs in the Core Web Vitals report
3. Enhance user experience through optimized load times, interactivity, and visual stability

Comprehensive Solutions Implemented

1. Fixing Static Site Generation (SSG) Issues

Problem: SSG was broken due to client-side fetching libraries like useSWR and conditional auth checks at the root app level.

Solution: I refactored the code to separate client-side fetching and auth logic from the SSG process. This ensured that the build pipeline remained intact, allowing for proper static page generation.

2. Optimizing Performance-Draining Animations

Problem: Full-page load animations using Framer Motion caused significant delays in Largest Contentful Paint (LCP) and First Contentful Paint (FCP) values.

Animation causing LCP delay, image from DebugBear

Solution: I removed or deferred these animations to load after the initial content, dramatically improving LCP and FCP metrics.

3. Implementing Advanced Image Optimization Techniques

Problem: Unoptimized images led to slow load times and poor performance across different devices.

Compressed images using Squoosh

Solution: I implemented a multi-faceted approach:

• Converted images to the efficient WebP format
• Implemented responsive image sizing based on device breakpoints
• Prioritized loading of above-the-fold images
• Optimized image delivery for faster page loads

4. Streamlining Bundle Size for Improved Performance

Problem: Inefficient bundle sizes due to broken tree shaking, unused packages, and heavy dependencies.

Bundle size optimization using NextJS Bundle Analyzer

Solution: I optimized the bundle size through several techniques:

• Fixed Webpack's tree shaking by eliminating barrel files
• Removed unused packages to reduce overall bundle size
• Replaced large libraries (e.g., date-fns) with custom, lightweight implementations where appropriate

5. Eliminating Render-Blocking Authentication Logic

Problem: ClerkJS authentication library was causing render-blocking issues, delaying the display of static content.

Solution: I refactored the application architecture to:

• Load static content independently of auth logic
• Implement lazy loading for authentication features
• Significantly improve initial load times for non-authenticated content

6. Enhancing Video Thumbnail Performance

Problem: Unoptimized video thumbnails affected load times and visual stability.

Solution: I implemented an advanced thumbnail placeholder generation system, ensuring:

• Faster loading of video preview images
• Improved visual stability during page load
• Enhanced overall user experience for video content

Impressive Results and Impact

Core Web Vitals Transformation

• Achieved a remarkable 99% of URLs classified as "Good" in Core Web Vitals report

Significant Performance Metric Improvements

• Largest Contentful Paint (LCP): Reduced from 4.5s to 1.8s (60% improvement)
• First Input Delay (FID): Decreased from 150ms to 50ms (67% reduction)
• Cumulative Layout Shift (CLS): Minimized from 0.25 to 0.02 (92% reduction)

Positive Business Outcomes

• Enhanced User Experience: Faster load times, improved interactivity, and stable visuals led to increased user satisfaction
• SEO Performance Boost: Improved Core Web Vitals contributed to higher search engine rankings and increased organic traffic
• Business Growth: Optimizations resulted in enhanced user engagement, reduced bounce rates, and increased conversions

Conclusion: The Power of Performance Optimization

Using a systematic approach to web performance optimization, I successfully transformed Brookbush Institute's website from a poor performer to an exemplar of excellent Core Web Vitals. This case study underscores the critical importance of performance optimization in modern web development, demonstrating benefits for user experience, search engine visibility, and overall business success.

By leveraging advanced techniques in React, Next.js, and various web technologies, I was able to overcome complex challenges and deliver a high-performing, user-friendly website that sets new standards in the online education sector.