Built with Framer
Planhat Website Optimization
Gizem Onan
Verified
Planhat Project Optimization Case Study
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. 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.
Project Goals
The primary objectives of the optimization initiative were:
Clean up and simplify the frontend architecture
Create a scalable and organized component structure
Remove hidden modules, unused files, and dead code
Reduce excessive responsive breakpoints
Improve Core Web Vitals performance
Keep INP, TBT, LCP, and CLS within healthy thresholds
Optimize image handling and CMS-driven content
Fix UI inconsistencies and layout issues
Monitor performance continuously as the platform grows
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.
Core Web Vitals & Performance Focus
A major focus of the project was improving real-user performance metrics using Google’s Core Web Vitals and Chrome UX Report data.
The work prioritized:
LCP (Largest Contentful Paint)
INP (Interaction to Next Paint)
CLS (Cumulative Layout Shift)
TBT (Total Blocking Time)
Mobile responsiveness
Real-world user performance data
Initial Lighthouse & Core Web Vitals Assessment
The optimization process began with extensive auditing of real-user metrics and Lighthouse performance testing.
Core Web Vitals Passed
The website achieved passing Core Web Vitals status while maintaining strong performance thresholds:
LCP: ~1 second
INP: ~128ms
CLS: ~0.02
These results positioned the site within Google’s “Good Experience” category and created a strong SEO foundation.
Key Insight
The optimization work focused heavily on real-user experience, not just synthetic Lighthouse scores.
The team monitored:
75th percentile user performance
Device/network variability
Mobile-first experiences
Real-world responsiveness under load
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 frontend became significantly easier to maintain, scale, and extend as new features and pages were introduced.
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
Cleaner responsive logic
Better cross-device consistency
Reduced CSS overhead
Easier long-term maintenance
CMS & Component Optimization
A major effort was dedicated to optimizing CMS-driven structures and Framer components.
Key Improvements
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
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
Potential rendering delays
The issue was isolated and fixed, improving stability and responsiveness.
Before & After Results
Homepage Optimization
Before
Lighthouse scores as low as:
Performance: 33–40
Heavy image loading
Slow mobile rendering
Large layout shifts
After
Core Web Vitals passing
Significant improvement in:
LCP
INP
CLS
SEO scores
More stable mobile performance
Faster rendering and interaction times
Real-World Metrics Improvements
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
Geographic regions
Because of this, monitoring became a continuous process rather than a one-time optimization effort.
Vectorization & Asset Optimization
The project also included extensive asset optimization work.
Logo Vectorization
Several company and integration logos were rebuilt as optimized vectors to:
Reduce image payload sizes
Improve visual consistency
Improve scalability across resolutions
Enhance loading performance
Cisco & Integrations Updates
Updated integration icon systems
Improved CMS management for vectors
Reduced duplicate assets
Simplified rendering logic
Continuous Monitoring Strategy
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
Third-party integrations increase
Continuous monitoring ensured issues were identified proactively before impacting users.
Additional Improvements
Other improvements completed during the project included:
Editorial layout fixes
Grid alignment improvements
Video optimization
Mobile carousel fixes
Stack/grid restructuring
Pricing page fixes
Flash/flicker issue resolution
SEO-focused performance improvements
Results & Impact
The optimization initiative delivered substantial improvements across maintainability, scalability, and performance.
Key Outcomes
Technical Improvements
Cleaner architecture
Reduced technical debt
Simplified component structures
Better CMS scalability
Improved developer workflow
Performance Improvements
Core Web Vitals consistently passing
Stronger Lighthouse scores
Faster mobile rendering
Lower TBT and INP
Improved user responsiveness
Business Impact
Better SEO readiness
Improved real-user experience
More scalable marketing platform
Faster future development cycles
Sustainable long-term performance strategy
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.
Like this project
Posted May 20, 2026
Optimized Planhat's website for performance, scalability, and real-user experience.
