This case study highlights the ongoing optimization and performance improvement initiative for Planhat — focused on frontend architecture cleanup, Core Web Vitals optimization, scalable component management, and continuous performance monitoring.

As the website rapidly expanded with new pages, integrations, CMS content, and marketing features, maintaining performance and scalability became increasingly important. At the time of optimization, the platform contained hundreds of CMS-managed pages, company records, integrations, editorial content types, and dynamic content relationships. The project focused on reducing technical debt, improving maintainability, and ensuring the website consistently passed Google's Core Web Vitals thresholds across both desktop and mobile experiences.

The primary objectives of the optimization initiative were:

Clean up and simplify the frontend architecture

Create a scalable and maintainable component structure

Reduce technical debt by removing unused files, modules, and duplicate assets

Improve Core Web Vitals performance across desktop and mobile

Optimize CMS-driven content, media delivery, and asset management

Simplify responsive behavior and improve cross-device consistency

Resolve UI inconsistencies and layout stability issues

Establish a continuous performance monitoring process

Ensure the platform remains scalable as new content, integrations, and features are introduced

As the platform expanded over time, several technical challenges began affecting scalability and performance:

Growing complexity of Framer/CMS structures

Large number of hidden and duplicated components

Excessive breakpoint usage across pages

Increasing bundle sizes and rendering overhead

Slow-loading media and image-heavy layouts

Hydration-related issues causing flickering and performance drops

Continuous addition of new CMS collections and integrations

The challenge was not only improving performance once — but maintaining performance as the platform continued evolving daily.

One of the largest parts of the project involved restructuring and simplifying the frontend system.

Reorganizing component structures

Cleaning hidden layers and modules

Standardizing reusable components

Removing unused imports and files

Consolidating duplicate structures

Improving maintainability across CMS-driven pages

The cleanup reduced frontend complexity, improved maintainability, and created a more scalable foundation for future CMS expansion and feature development.

The project previously relied on excessive breakpoint usage, creating unnecessary complexity and inconsistent layouts.

Removed XL breakpoints entirely

Reduced redundant responsive rules

Simplified responsive layouts

Improved consistency across devices

Optimized mobile-first rendering behavior

Reduced responsive maintenance overhead

More predictable layouts across devices

Fewer rendering inconsistencies

Improved mobile performance

A major effort was dedicated to optimizing CMS-driven structures and Framer components. Particular attention was given to high-volume CMS collections where rendering overhead could compound across hundreds of entries, making scalability and performance increasingly important as the platform continued to grow.

Added lazy loading for heavy collections

Enabled infinite scroll behavior

Improved filtering systems

Reduced collection rendering overhead

Removed duplicated variants

Consolidated reusable structures

Simplified nested component hierarchies

Improved maintainability of CMS-integrated pages

Added optimized thumbnail image sizes

Resized and compressed heavy assets

Optimized hero images for LCP improvements

Reduced unnecessary image rendering

While Lighthouse scores are based on controlled lab tests and can vary depending on network conditions, hardware, and test runs, they provide a useful benchmark for validating optimization efforts.

For a large enterprise website with hundreds of CMS entries, integrations, dynamic content relationships, and complex page templates, achieving consistent Lighthouse scores in the 90+ range represented a significant improvement over the site's original baseline.

Lighthouse scores improved from 40 to 91 while real-user Core Web Vitals simultaneously moved into Google's "Good" range.

SEO score variations were primarily attributable to Lighthouse audit changes and did not reflect a decline in organic search performance.

Lighthouse scores are based on controlled lab tests and can vary depending on network conditions, device capabilities, and testing environments. While Lighthouse should not be treated as an absolute measurement, achieving consistent 90+ scores on a large enterprise website provides strong validation that the implemented optimizations had a meaningful impact.

More importantly, the site now passes Core Web Vitals using real-user field data, including a 1.1s LCP, 62ms INP, and 0 CLS, demonstrating that performance improvements translated into measurable user experience gains.

Following the optimization effort, the website consistently achieved passing Core Web Vitals thresholds based on real-user Chrome UX Report data.

The website achieved passing Core Web Vitals status while maintaining strong performance thresholds:

These results positioned the site within Google’s “Good Experience” category and created a strong SEO foundation.

The project included ongoing performance optimization across multiple areas.

Reducing Total Blocking Time (TBT)

Improving hydration behavior

Optimizing JavaScript execution

Lazy-loading heavy assets

Preventing layout shifts

Optimizing rendering order

Reducing oversized media usage

A major issue was identified where a script attempted to manipulate page hydration behavior, causing flickering, performance instability, and potential rendering delays. The issue was isolated and fixed, improving stability and responsiveness.

Lighthouse Performance: 33–40

Heavy image loading

Slow mobile rendering

Large layout shifts

Lighthouse Performance: 91

Core Web Vitals: Passed

LCP: 1.3s

Healthy INP

CLS ~0

Improved rendering & responsiveness

Using Chrome UX Report and PageSpeed Insights data, several important improvements were achieved:

LCP reduced from ~3.2s to ~1.3s

FCP reduced from ~4s to ~2s

CLS stabilized close to 0

INP maintained in healthy ranges

TBT significantly improved

Performance data fluctuates daily depending on user devices, network quality, traffic conditions, and geographic regions. Because of this, monitoring became a continuous process rather than a one-time optimization effort.

The site now consistently passes Core Web Vitals while maintaining Lighthouse scores in the 90+ range. For a large enterprise website with hundreds of CMS-managed pages, integrations, and dynamic content relationships, this represented a substantial improvement in performance, stability, and real-user experience at scale.

The project also included extensive asset optimization work. Replaced hundreds of raster logo assets with vector equivalents.

Several company and integration logos were rebuilt as optimized vectors to reduce image payload sizes, improve visual consistency, enhance scalability across resolutions, and improve loading performance.

Following the vectorization effort, CMS collections were updated to use the new vector logo fields, and all legacy PNG logo fields were removed to simplify content management, reduce duplicate assets, and streamline rendering logic.

Updated integration icon systems

Improved CMS management for vectors

Removed legacy PNG logo fields

Reduced duplicate assets

Simplified rendering logic

As the platform continuously grows, performance monitoring became part of the ongoing workflow.

Lighthouse audits

Chrome UX Report tracking

Core Web Vitals reviews

Mobile performance validation

Regression testing after deployments

CMS performance evaluations

Performance can quickly degrade as new pages are added, CMS collections grow, marketing content expands, and third-party integrations increase. Continuous monitoring ensured issues were identified proactively before impacting users.

The optimization initiative delivered substantial improvements across maintainability, scalability, and performance. Other improvements completed during the project included:

Refined page layouts and content structures

Improved grid consistency across key pages

Resolved responsive layout issues

Enhanced mobile carousel and navigation behavior

Implemented newly designed website sections

Rolled out design updates across existing pages

Added and configured reusable template-driven page structures

Improved consistency across CMS-powered experiences

Supported ongoing content and marketing initiatives

Optimized video delivery and media assets

Resolved rendering flicker and visual inconsistencies

Improved stack and grid structures

Refined component organization and maintainability

The optimization initiative delivered substantial improvements across maintainability, scalability, and performance.

Lighthouse Performance improved from 40 → 91

LCP was reduced from 3.2s to 1.3s through frontend optimization

Core Web Vitals consistently passing

Frontend architecture simplified

CMS scalability improved

Technical debt reduced

Faster rollout of new pages and content

Reusable template-driven page structures

mproved maintainability

Reduced duplication across components and assets

Faster rendering and interactions

More stable mobile experience

Improved real-user performance metrics

Better overall browsing experience

This project was not a one-time performance fix — it established a long-term optimization strategy for a continuously evolving platform.

By combining frontend cleanup, component restructuring, responsive simplification, CMS optimization, image optimization, and continuous monitoring, the platform now maintains strong Core Web Vitals performance while remaining scalable for future growth.