Speeding Up HubSpot Landing Pages
HubSpot pages often score poorly on Lighthouse due to built-in scripts and module bloat. Learn practical strategies to speed them up.
HubSpot is a powerful marketing platform, but its landing pages consistently score 20-45 on Lighthouse mobile. The platform loads tracking scripts, form modules, and CMS features that add significant weight. Here's how to improve performance within HubSpot's constraints.
Why HubSpot Pages Are Slow
Built-In Scripts
HubSpot injects several scripts on every page:
- HubSpot analytics (~80KB)
- HubSpot forms (~150KB when used)
- jQuery (~90KB, still required by some modules)
- Module CSS/JS (varies, 50-300KB)
Common Additional Weight
| Feature | Added Weight |
|---|---|
| Chat widget | ~300KB |
| Meeting scheduler | ~200KB |
| Video embed | ~800KB (YouTube iframe) |
| Custom modules (3-5) | 100-500KB |
| Third-party tracking (5+ pixels) | 200-500KB |
Total Typical Page Weight
A HubSpot landing page with form + chat + tracking: 1.5-3MB
Quick Wins
1. Remove Unused Modules
Every module on the page loads its CSS and potentially JS. Remove modules you're not using — even if they're hidden via CSS, they still load.
2. Optimize Images
HubSpot has a built-in image editor. Use it to:
- Resize images to actual display size (not 3000px for a 600px spot)
- Compress images (HubSpot supports this in the file manager)
- Use WebP format where possible
3. Minimize Custom Code
Custom HTML/CSS modules can add render-blocking resources:
<!-- BAD: External stylesheet in custom module -->
<link rel="stylesheet" href="https://external-cdn.com/styles.css">
<!-- BETTER: Inline critical styles -->
<style>
.hero { display: flex; align-items: center; padding: 4rem 2rem; }
</style>
4. Defer Chat Widget
Instead of loading chat on page load, use HubSpot's targeting rules:
- Only show chat after 30 seconds on page
- Only show on high-intent pages (pricing, demo request)
- Use the API to load chat on scroll or button click
5. Consolidate Tracking
Move all tracking pixels into HubSpot's tracking code settings or Google Tag Manager instead of individual <script> tags in page templates.
Template-Level Optimizations
Clean Template HTML
<!-- Use semantic HTML, minimal nesting -->
<section class="hero">
<div class="container">
<h1>{{ module.heading }}</h1>
<p>{{ module.subheading }}</p>
{{ module.cta_button }}
</div>
</section>
Preconnect to Required Domains
Add to your template <head>:
<link rel="preconnect" href="https://js.hsforms.net">
<link rel="preconnect" href="https://forms.hsforms.com">
Lazy Load Below-Fold Sections
{% for module in modules %}
{% if loop.index > 2 %}
{# Lazy load modules below the fold #}
<div data-lazy-module="{{ module.id }}">
{{ module.render }}
</div>
{% else %}
{{ module.render }}
{% endif %}
{% endfor %}
What You Can't Control
Some HubSpot overhead is unavoidable:
- HubSpot tracking script (required for analytics/CRM)
- Base platform CSS
- Cookie consent banner (if enabled)
Focus optimization efforts on what you can control: images, custom modules, third-party scripts, and template structure.
Monitor Your HubSpot Pages
HubSpot pages need monitoring because template updates and module changes can regress performance without warning.
Ready to stop wasting ad spend?
Track your landing page performance, monitor Core Web Vitals, and calculate exactly how much slow pages cost you.
Start Free — No Credit Card