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.
Monitor your landing page performance →
Related Reading
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