Got an Email Template, Landing page, or Banner requirement? Head to Email Mavlers
Our client operates in the Education and Marketing industry and uses the platform to showcase webinars and educational videos. Their website needs to efficiently load multiple YouTube videos on a single page while retaining accurate video counts.
The brand approached Mavlers to optimize their HubSpot website's performance. They rely on their website to showcase webinars and educational videos.
The client's prime challenge was optimizing pages with multiple embedded YouTube videos without losing accurate video counts. At the same time, page speed - a critical factor shaping user experience and engagement - was falling short. Slow loading times, high bounce rates, and poor search engine visibility were impacting growth.
These issues were not only making the browsing experience painfully slow but also hurting engagement and visibility.
Increasing page load speed would help them to create a faster browsing experience, keeping visitors engaged long enough to convert. Naturally, boosting search engine rankings, minimizing bounce rates, and offering better user experience would also follow as pivotal objectives.
Meeting those objectives was a matter of targeted optimizations. It called for deep technical understanding. So the client turned to Mavlers for expert guidance and execution.
The specific goals included:
Our strategy was methodical, moving from foundational fixes to complex, architectural improvements.
We began with a deep dive into the website's architecture using:
Google PageSpeed Insights & Lighthouse: To identify performance scoring opportunities.
WebPageTest: For granular waterfall analysis and diagnostic information.
Google Search Console: To assess Core Web Vitals field data.
HubSpot Audit Tools: To identify platform-specific bottlenecks.
We implemented critical baseline optimizations to establish a performance floor:
Image & Video Optimization: Compressed and converted all images to WebP/AVIF formats, implemented lazy loading, and offloaded videos to optimized platforms.
Caching Strategy: Leveraged HubSpot's built-in caching and configured a robust CDN (Cloudflare) for global static asset delivery.
Code Minification: Minified all HTML, CSS, and JavaScript files to reduce file size and remove unnecessary code.
Font Optimization: Preconnected to Google Fonts, used font-display: swap, and preloaded critical font files.
Beyond the basics, we addressed complex, high-impact challenges that required custom-engineered solutions.
The Problem: A live chat widget loaded synchronously, blocking the main thread for over 2.1 seconds and crippling Time to Interactive (TBT).
Our Solution: We analyzed the loading waterfall and implemented an intelligent deferral strategy. The chat script was detached from the initial load
The Result:
Reduced TBT by over 1.8 seconds.
Dramatically improved TTI without removing critical functionality.
The Problem: The third-party chat widget was a feature-rich behemoth, loading over 600KB of render-blocking JavaScript.
Our Solution: We architected a minimal, API-driven client (~15KB) that loaded asynchronously. Only upon user click would a WebSocket connection to the provider's API be established.
The Result:
Eliminated ~600KB of blocking JavaScript.
Improved TTI by 1.5+ seconds on key pages.
Retained 100% of the chat functionality for users who needed it.
The Problem: A resource page with 15+ embedded YouTube videos loaded the player script separately for each video, creating 15+ redundant requests and over 3MB of weight.
Our Solution: We built a custom module and used the YouTube IFrame API to load the script once. Videos were represented by thumbnails; the full player was created dynamically only on user click.
The Result:
15+ Requests →
1 Request.
Eliminated ~3.8MB of redundant script load.
Improved Lighthouse Performance Score by 35+ points on the video gallery page.
Once the optimizations went live, the improvements were immediate and measurable:
The client's success with page speed optimization offers clear lessons for other teams tackling performance issues:
A couple of seconds off load time can be the difference between a bounce and a conversion.
Automated validation eliminated common errors, boosting confidence in reports and analytics.
Images, code, caching, and scripts all affect speed—tackle the whole system.
Every CMS has whims. Knowing how to optimize within them takes performance to the next level.
Users care about how a site feels. And speed is the bedrock of experience.
Google PageSpeed Insights help, but the ultimate test is how the site feels to your visitors.
By combining best practices with deep architectural optimizations, Mavlers turned the client's site into a fast, reliable, and scalable asset. The client could step back from technical concerns and work on growth.
So here's the bigger question—what's slowing your site right now, and what would it mean if every click felt instant?
