![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 225 126" xmlns="http://www.w3.org/2000/svg"><defs ><linearGradient id="JOOBZ7nBU-1725084215-linear-gradient" x1="0.49751243781094523" x2="0.5021890547263682" y1="0" y2="0.9400000000000001"><stop offset="0" stop-color="rgba(71, 214, 0, 0.6)"/><stop offset="1" stop-color="rgba(37, 112, 0, 0)"/></linearGradient></defs><path d="M 223 123.5 L 223 0 L 212.5 13.5 L 205 13.5 L 183.5 17 L 167.5 41 L 159 38 L 152.5 41 L 138 65 L 124.5 57 L 114 70.5 L 100.5 78.5 L 94 75 L 80 89.5 L 64 78.5 L 46.5 101 L 35 95 L 19.5 101 L 0 123.5 Z" fill="url(%23JOOBZ7nBU-1725084215-linear-gradient)" height="123.49996999999999px" id="JOOBZ7nBU" transform="translate(1.096 1.457)" width="223.0003px"/></svg>)
case study
How performance & optimization initiatives improved Core Web Vitals, user experience, and overall site performance.
Client
Planhat
Focus
Frontend & Core Web Vitals
Type
Ongoing optimization
01 — Overview
Overview
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.
02 — Goals
Project Goals
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
03 — Context
The Challenge
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.
04 — Architecture
Frontend Architecture Cleanup
One of the largest parts of the project involved restructuring and simplifying the frontend system.
Improvements included
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
Result
The cleanup reduced frontend complexity, improved maintainability, and created a more scalable foundation for future CMS expansion and feature development.
05 — BREAKPOINTS
Breakpoint & Responsive Optimization
The project previously relied on excessive breakpoint usage, creating unnecessary complexity and inconsistent layouts.
Optimization work
Removed XL breakpoints entirely
Reduced redundant responsive rules
Simplified responsive layouts
Improved consistency across devices
Optimized mobile-first rendering behavior
Result
Reduced responsive maintenance overhead
More predictable layouts across devices
Fewer rendering inconsistencies
Improved mobile performance
06 — CMS
CMS & Component Optimization
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.
CMS collection enhancements
Added lazy loading for heavy collections
Enabled infinite scroll behavior
Improved filtering systems
Reduced collection rendering overhead
Component cleanup
Removed duplicated variants
Consolidated reusable structures
Simplified nested component hierarchies
Improved maintainability of CMS-integrated pages
Image optimization
Added optimized thumbnail image sizes
Resized and compressed heavy assets
Optimized hero images for LCP improvements
Reduced unnecessary image rendering
07 — PERFORMANCE
Performance Validation
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 Comparison
Metric
Performance
Accessibility
Best Practices
SEO
Before
40
88
77
100
After
91
91
96
92
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.
07/A — Assessment
Core Web Vitals Assessment
LCP
1.3s
Largest Contentful Paint
INP
Healthy
Interaction to Next Paint
CLS
~0
Cumulative Layout Shift
These results positioned the site within Google’s “Good Experience” category and created a strong SEO foundation.
07/B — OPTIMIZATION
Performance Optimization Work
The project included ongoing performance optimization across multiple areas.
Improvements included
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
Hydration & script issues
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.
07/C - before & after
Before & After Results
Homepage optimization
Before
Lighthouse Performance: 33–40
Heavy image loading
Slow mobile rendering
Large layout shifts
After
Lighthouse Performance: 91
Core Web Vitals: Passed
LCP: 1.3s
Healthy INP
CLS ~0
Improved rendering & responsiveness
07/D — Metrics
Real-User Performance Results
Using Chrome UX Report and PageSpeed Insights data, several important improvements were achieved:
Performance gains
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
Important observation
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.
Outcome
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.
08 — Assets
Vectorization & Asset Optimization
The project also included extensive asset optimization work. Replaced hundreds of raster logo assets with vector equivalents.
Logo vectorization
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.
Integrations updates
Updated integration icon systems
Improved CMS management for vectors
Removed legacy PNG logo fields
Reduced duplicate assets
Simplified rendering logic
09 — Monitoring
Ongoing Performance Monitoring
As the platform continuously grows, performance monitoring became part of the ongoing workflow.
Daily monitoring included
Lighthouse audits
Chrome UX Report tracking
Core Web Vitals reviews
Mobile performance validation
Regression testing after deployments
CMS performance evaluations
Why this matters
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.
10 — More
Additional Improvements
The optimization initiative delivered substantial improvements across maintainability, scalability, and performance. Other improvements completed during the project included:
UX & Layout Improvements
Refined page layouts and content structures
Improved grid consistency across key pages
Resolved responsive layout issues
Enhanced mobile carousel and navigation behavior
Site Updates & New Implementations
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
Technical Improvements
Optimized video delivery and media assets
Resolved rendering flicker and visual inconsistencies
Improved stack and grid structures
Refined component organization and maintainability
11 — Impact
Results & Impact
The optimization initiative delivered substantial improvements across maintainability, scalability, and performance.
Technical Outcomes
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
Platform Outcomes
Faster rollout of new pages and content
Reusable template-driven page structures
mproved maintainability
Reduced duplication across components and assets
User Outcomes
Faster rendering and interactions
More stable mobile experience
Improved real-user performance metrics
Better overall browsing experience
12 — Takeaway
Key Takeaway
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.