HubSpot Performance Issues

Platform-specific guides for diagnosing and fixing Core Web Vitals and performance issues on HubSpot.

Core Web Vitals

Largest Contentful Paint (LCP)

Fix slow main content loading on HubSpot. Target: under 2.5 seconds.

Cumulative Layout Shift (CLS)

Resolve visual stability issues causing layout shifts. Target: under 0.1.

Common HubSpot Performance Issues

HubSpot CMS Template Optimization

HubSpot's CMS uses HubL (HubSpot Markup Language) for templating, which can impact performance if not properly optimized.

Common issues:

• Complex HubL loops processing large datasets
• Excessive HubDB queries on every page load
• Unoptimized custom modules with heavy processing
• Multiple API calls in templates
• Inefficient use of HubL filters and functions

Optimization strategies:

• Minimize HubL processing in critical render path
• Cache HubDB query results when possible
• Limit the number of blog posts/items in loops (10-15 maximum)
• Use lazy loading for non-critical content modules
• Optimize custom module HTML, CSS, and JavaScript
• Remove unused template code and modules

Efficient HubL example:

{# Good: Limited query with caching #}
{% set recent_posts = blog_recent_posts("default", 5) %}
{% for post in recent_posts %}
  <h3>{{ post.name }}</h3>
{% endfor %}

{# Bad: Excessive processing #}
{% for post in blog_recent_posts("default", 50) %}
  {% if post.publish_date > now %}
    {# Complex processing for each post #}
  {% endif %}
{% endfor %}

Module and Widget Performance

HubSpot modules can significantly impact page performance.

Performance-heavy modules:

• Blog listings with complex filtering
• Form modules with extensive validation
• Dynamic content modules
• Product listings from HubDB
• Social media feed modules

Best practices:

• Use native HubSpot modules when possible (they're optimized)
• Limit custom module complexity
• Avoid nested loops in module templates
• Minimize API calls within modules
• Use module caching where appropriate
• Test module performance in isolation

Image Optimization

HubSpot's image handling:

• HubSpot automatically serves images through a CDN
• Images are automatically optimized and resized
• Use HubSpot's image sizing parameters for responsive images

Best practices:

{# Use HubSpot's resize_image_url filter #}
<img src="{{ module.image.src|resize_image_url(600, 400) }}"
     alt="{{ module.image.alt }}">

{# Responsive images with srcset #}
<img srcset="{{ module.image.src|resize_image_url(400) }} 400w,
             {{ module.image.src|resize_image_url(800) }} 800w,
             {{ module.image.src|resize_image_url(1200) }} 1200w"
     sizes="(max-width: 600px) 100vw, 600px"
     src="{{ module.image.src|resize_image_url(800) }}"
     alt="{{ module.image.alt }}">

Image optimization tips:

• Upload images at appropriate dimensions (max 2048px recommended)
• Use JPG for photos (80-85% quality)
• Use PNG for graphics with transparency
• Enable lazy loading for below-fold images
• Compress images before upload
• Use HubSpot's built-in image editor for basic optimizations

CSS and JavaScript Optimization

HubSpot asset handling:

• CSS and JS files are automatically minified
• Assets are served via HubSpot's CDN
• Combine files when possible to reduce HTTP requests

Optimization strategies:

{# Defer non-critical JavaScript #}
<script defer src="{{ get_asset_url('./theme.js') }}"></script>

{# Async load for third-party scripts #}
<script async src="https://external-script.com/widget.js"></script>

{# Inline critical CSS in head #}
<style>
  /* Critical above-the-fold styles */
  .hero { background: #000; color: #fff; }
</style>

{# Load rest of CSS #}
<link rel="stylesheet" href="{{ get_asset_url('./main.css') }}">

CSS best practices:

• Remove unused CSS from theme files
• Minimize custom fonts (2-3 font families maximum)
• Use system fonts when possible
• Combine multiple CSS files into one
• Avoid @import in CSS (use link tags instead)

JavaScript best practices:

• Defer or async load JavaScript when possible
• Remove unused JavaScript libraries
• Minimize jQuery usage (vanilla JS is faster)
• Load scripts at the end of body tag
• Use event delegation instead of multiple listeners

HubDB Performance

HubDB queries can slow down pages if not optimized.

Optimization techniques:

{# Good: Limited query with specific columns #}
{% set products = hubdb_table_rows(12345, "category=electronics&limit=10") %}

{# Bad: Fetching entire table #}
{% set products = hubdb_table_rows(12345) %}

Best practices:

• Limit rows returned (use limit parameter)
• Filter server-side instead of in HubL
• Cache HubDB results when data doesn't change frequently
• Use specific column selection when possible
• Index frequently queried columns
• Keep HubDB tables under 1000 rows for best performance

Form Performance

HubSpot forms can add overhead to page load.

Optimization strategies:

• Use HubSpot's native form embed (optimized loading)
• Load forms asynchronously when possible
• Minimize form fields (reduce validation overhead)
• Use progressive profiling to reduce fields shown
• Avoid complex conditional logic in forms
• Load forms on user interaction for below-fold placement

Optimized form loading:

<!-- Lazy load form on scroll -->
<div id="form-container"></div>
<script>
const observer = new IntersectionObserver((entries) => {
  if (entries[0].isIntersecting) {
    hbspt.forms.create({
      portalId: "YOUR_PORTAL_ID",
      formId: "YOUR_FORM_ID",
      target: "#form-container"
    });
    observer.disconnect();
  }
});
observer.observe(document.querySelector('#form-container'));
</script>

HubSpot-Specific Performance Features

HubSpot CDN

HubSpot automatically serves all assets through a global CDN:

• Automatic asset caching and compression
• Geo-distributed content delivery
• HTTP/2 support
• Automatic SSL/TLS

CDN optimization tips:

• Leverage HubSpot's CDN for all theme assets
• Use appropriate cache headers
• Minimize external resources
• Host fonts on HubSpot CDN when possible

Caching Strategies

HubSpot's built-in caching:

• Page-level caching for published pages
• Asset caching (CSS, JS, images)
• Blog post caching
• Module output caching

Cache control:

• Published pages are cached automatically
• Changes require republishing to clear cache
• Use staging environment for testing
• Smart content may reduce cache effectiveness

Browser caching:

<!-- HubSpot automatically sets cache headers -->
<!-- Static assets: 1 year -->
<!-- HTML pages: Based on content settings -->

Smart Content Performance

Smart content (personalized content) can impact performance.

Optimization strategies:

• Limit number of smart content rules
• Use smart content sparingly on high-traffic pages
• Consider server-side personalization alternatives
• Monitor performance impact of smart rules
• Cache non-personalized elements

HubSpot Tracking Code

The HubSpot tracking code is essential but can be optimized.

Best practices:

• HubSpot tracking loads asynchronously by default
• Placed in header for better tracking accuracy
• Minimal performance impact (usually < 50ms)
• Consider using Google Tag Manager for additional scripts

HubSpot Hosting and Infrastructure

Performance Built into HubSpot CMS

HubSpot CMS includes many performance features:

• Automatic HTTPS and HTTP/2
• Global CDN for all assets
• Automatic image optimization
• Built-in caching
• DDoS protection
• 99.99% uptime SLA

Domain Configuration

DNS optimization:

• Use HubSpot's nameservers for best performance
• Minimize DNS lookups for third-party resources
• Use subdomain for files and assets if needed

SSL/TLS Performance

• HubSpot automatically provisions SSL certificates
• HTTP/2 enabled by default
• Modern cipher suites for optimal performance
• Automatic renewal and maintenance

Performance Testing for HubSpot

Diagnostic Tools

1. Google PageSpeed Insights - Core Web Vitals analysis
2. Chrome DevTools Performance Tab - Detailed waterfall analysis
3. Lighthouse - Comprehensive performance audit
4. HubSpot Performance Recommendations - Built-in suggestions in Design Manager
5. WebPageTest - Advanced performance testing

HubSpot Design Manager Tools

Built-in performance features:

• Template validation and warnings
• Module performance indicators
• Asset size reporting
• Code quality suggestions

Check template performance:

1. Open template in Design Manager
2. Review warnings and suggestions
3. Check module load times
4. Validate HubL syntax

Key Metrics for HubSpot

Performance targets:

• Time to First Byte (TTFB): Under 200ms
• First Contentful Paint (FCP): Under 1.8s
• Largest Contentful Paint (LCP): Under 2.5s
• Time to Interactive (TTI): Under 3.8s
• Total page size: Under 3MB
• Total requests: Under 75

Platform-Specific Troubleshooting

Slow Blog Pages

Causes:

• Loading too many posts per page
• Unoptimized featured images
• Heavy sidebar widgets
• Related posts queries
• Comment systems

Fixes:

• Limit posts per page (10-15 recommended)
• Optimize blog listing template
• Use pagination instead of infinite scroll
• Lazy load related posts
• Cache blog listings
• Optimize blog post images

Optimized blog listing:

{% set posts = blog_recent_posts("default", 10) %}
{% for post in posts %}
  <article>
    <img src="{{ post.featured_image|resize_image_url(400, 300) }}"
         loading="lazy"
         alt="{{ post.featured_image_alt_text }}">
    <h2>{{ post.name }}</h2>
    <p>{{ post.post_summary|truncate(150) }}</p>
  </article>
{% endfor %}

Slow Landing Pages

Causes:

• Heavy forms with many fields
• Multiple HubDB queries
• Unoptimized hero images
• Too many modules
• Smart content overhead

Fixes:

• Minimize form fields
• Optimize hero image size
• Reduce number of modules
• Lazy load below-fold content
• Simplify smart content rules
• Use lightweight theme templates

Slow Website Pages

Optimization strategies:

• Remove unused modules from page
• Optimize navigation menus (limit depth and items)
• Minimize global content that loads on every page
• Use system partials efficiently
• Avoid heavy footer content

Form Performance Issues

Troubleshooting:

• Reduce number of form fields
• Simplify dependent field logic
• Remove unnecessary form styling
• Use standard HubSpot form instead of custom
• Load form scripts asynchronously

Advanced Performance Techniques

Implement Resource Hints

Use resource hints to optimize loading:

<!-- Preconnect to required origins -->
<link rel="preconnect" href="https://js.hs-scripts.com">
<link rel="preconnect" href="https://js.hs-analytics.net">

<!-- Prefetch next page -->
<link rel="prefetch" href="/next-page">

<!-- Preload critical fonts -->
<link rel="preload" href="//fonts.googleapis.com/css?family=Open+Sans" as="style">

Optimize Above-the-Fold Content

Critical rendering path optimization:

• Inline critical CSS in <head>
• Defer non-critical CSS
• Minimize render-blocking scripts
• Optimize hero images and text
• Remove layout shift causes

Example:

<!DOCTYPE html>
<html>
<head>
  <!-- Critical inline CSS -->
  <style>
    /* Above-the-fold critical styles */
    .hero { min-height: 400px; background: #000; }
    .nav { height: 60px; }
  </style>

  <!-- Defer non-critical CSS -->
  <link rel="preload" href="{{ get_asset_url('./styles.css') }}" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="{{ get_asset_url('./styles.css') }}"></noscript>
</head>

Implement Lazy Loading

Lazy load images and modules:

{# Lazy load images #}
<img src="{{ module.image.src|resize_image_url(800) }}"
     loading="lazy"
     alt="{{ module.image.alt }}">

{# Lazy load module content #}
<div class="lazy-module" data-module-id="12345">
  <noscript>
    {% module "blog_subscribe" path="@hubspot/blog_subscribe" %}
  </noscript>
</div>

<script>
// Lazy load modules on scroll
const lazyModules = document.querySelectorAll('.lazy-module');
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Load module content
      observer.unobserve(entry.target);
    }
  });
});
lazyModules.forEach(module => observer.observe(module));
</script>

Monitor Real User Metrics

Integration with monitoring tools:

• Connect Google Analytics for Web Vitals
• Use HubSpot's built-in analytics
• Implement custom performance tracking
• Monitor Core Web Vitals in Search Console

Custom performance tracking:

// Track Core Web Vitals to HubSpot
var _hsq = window._hsq = window._hsq || [];

if (window.PerformanceObserver) {
  new PerformanceObserver((list) => {
    for (const entry of list.getEntries()) {
      _hsq.push(['trackCustomBehavioralEvent', {
        name: 'web_vital',
        properties: {
          metric: entry.name,
          value: entry.value
        }
      }]);
    }
  }).observe({entryTypes: ['largest-contentful-paint', 'layout-shift']});
}

Ongoing Maintenance

Regular Performance Audits

Monthly tasks:

1. Run Lighthouse audits on key templates
2. Check Core Web Vitals in Google Search Console
3. Review HubSpot performance recommendations in Design Manager
4. Test page load times across different locations
5. Monitor third-party script performance
6. Check CDN cache hit ratios

Theme and Template Updates

• Review and optimize templates quarterly
• Remove unused modules and partials
• Update theme dependencies
• Test templates after HubSpot platform updates
• Monitor HubSpot product updates for performance improvements

Asset Optimization

Regular maintenance:

• Audit and remove unused CSS/JS files
• Compress and optimize new images before upload
• Review and minimize third-party integrations
• Check font usage (remove unused fonts)
• Monitor total asset size

HubDB Maintenance

• Archive old or unused HubDB rows
• Optimize table structure
• Review and optimize queries
• Keep tables under recommended size limits
• Monitor query performance

HubSpot-Specific Best Practices

Use HubSpot's Built-in Features

Leverage optimized built-in features:

• Native blog functionality
• Standard form modules
• Default templates and modules
• Built-in SEO tools
• Native CTA modules

Staging Environment Testing

Always test in staging before publishing:

• Preview performance changes
• Test on different devices
• Validate before going live
• Use staging for development

Content Optimization

Performance-friendly content practices:

• Optimize images before upload
• Use appropriate image dimensions
• Minimize embedded videos (use lazy loading)
• Limit number of elements per page
• Keep page HTML under 200KB

General Fixes

For universal performance concepts, see the Global Performance Issues Hub.

Related Guides

• HubSpot Troubleshooting Overview
• Tracking Issues