Fix Largest Contentful Paint (LCP) on HubSpot | Blue Frog Docs

Fix Largest Contentful Paint (LCP) on HubSpot

Improve LCP scores and page load speed on HubSpot CMS by optimizing images, modules, and scripts.

Fix Largest Contentful Paint (LCP) on HubSpot

Largest Contentful Paint (LCP) measures how quickly the largest content element becomes visible. Good LCP is critical for user experience and SEO. This guide covers HubSpot-specific LCP optimization.

What is LCP?

LCP measures: Time until the largest visible element is fully rendered

Target scores:

  • Good: < 2.5 seconds
  • Needs Improvement: 2.5 - 4.0 seconds
  • Poor: > 4.0 seconds

Common LCP elements on HubSpot:

  • Hero images
  • Banner images
  • Large text blocks
  • HubSpot modules (sliders, galleries)
  • Background images

Measuring LCP on HubSpot

Use PageSpeed Insights

  1. Visit PageSpeed Insights
  2. Enter your HubSpot page URL
  3. Click Analyze
  4. View Largest Contentful Paint metric
  5. Check Diagnostics for specific issues

Use Chrome DevTools

  1. Open page in Chrome
  2. Press F12 → Performance tab
  3. Click Record → reload page → Stop
  4. Find LCP in timeline (marked with LCP flag)

Check Multiple Pages

Test different page types:

  • Homepage
  • Blog posts
  • Landing pages
  • Product/service pages

Each may have different LCP elements.

Common LCP Issues on HubSpot

1. Large Unoptimized Images

Problem: Hero images are too large (file size and dimensions)

Impact: Largest LCP issue on HubSpot sites

Symptoms:

  • LCP > 4 seconds
  • PageSpeed shows "Properly size images"
  • Network tab shows multi-MB image downloads

Solutions:

Optimize Images Before Upload:

Recommended dimensions:
- Hero images: 1920px wide (max)
- Banner images: 1200px wide (max)
- Thumbnail images: 400px wide (max)

Recommended formats:
- WebP (best compression)
- JPEG (for photos)
- PNG (for graphics with transparency)

Recommended file sizes:
- Hero: < 200KB
- Banner: < 100KB
- Thumbnail: < 50KB

Use HubSpot's Image Optimization:

HubSpot automatically optimizes images, but you can help:

{# Use HubSpot image module with optimization #}
{% module "hero_image"
  path="@hubspot/image",
  img={
    "src": "your-image.jpg",
    "alt": "Hero image",
    "loading": "eager",
    "width": 1920,
    "height": 1080
  }
%}

Serve Responsive Images:

<img src="hero-image.jpg"
     srcset="hero-small.jpg 640w,
             hero-medium.jpg 1024w,
             hero-large.jpg 1920w"
     sizes="100vw"
     alt="Hero image"
     width="1920"
     height="1080">

2. Render-Blocking Scripts

Problem: JavaScript/CSS blocks page rendering

Impact: Delays LCP element appearance

HubSpot-specific causes:

  • Multiple tracking scripts in Site Header
  • GTM container loading synchronously
  • Custom module scripts
  • Third-party integrations

Solutions:

Async Load External Scripts:

In Site Header HTML:

<!-- Use async for GTM -->
<script async src="https://www.googletagmanager.com/gtm.js?id=GTM-XXXXXX"></script>

<!-- Use async for GA4 -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>

<!-- Defer non-critical scripts -->
<script defer src="your-custom-script.js"></script>

Load Scripts in Footer:

Move non-critical scripts to Site Footer HTML instead of header.

Inline Critical CSS:

For above-the-fold content:

<style>
  /* Critical CSS for hero section */
  .hero {
    background-image: url('hero.jpg');
    height: 600px;
  }
</style>

3. HubSpot Module Loading Delays

Problem: Heavy HubSpot modules slow page load

Modules that impact LCP:

  • Image sliders/carousels
  • Video modules
  • Rich text modules with images
  • Custom modules with heavy JavaScript

Solutions:

Use Simple Modules:

Replace heavy sliders with static images:

{# Instead of slider module, use simple image #}
{% module "hero_image"
  path="@hubspot/image",
  img={
    "src": "hero.jpg",
    "alt": "Hero",
    "loading": "eager"
  }
%}

Lazy Load Non-Critical Modules:

For modules below the fold:

{% module "gallery"
  path="@hubspot/gallery",
  lazy_load=True
%}

Optimize Custom Modules:

  • Minimize JavaScript in module code
  • Async load module dependencies
  • Cache module data when possible

4. Server Response Time (TTFB)

Problem: Slow server response from HubSpot

Symptoms:

  • TTFB > 600ms
  • "Reduce server response time" in PageSpeed

Causes on HubSpot:

  • Complex HubL logic in templates
  • Multiple database queries
  • Smart Content with many rules
  • CRM data lookups

Solutions:

Simplify HubL Logic:

{# Bad: Multiple conditional checks #}
{% if contact.lifecycle_stage == "customer" %}
  {% if contact.total_revenue > 1000 %}
    {% if contact.country == "US" %}
      {# Complex logic #}
    {% endif %}
  {% endif %}
{% endif %}

{# Better: Simplified logic #}
{% set is_premium = contact.lifecycle_stage == "customer" and contact.total_revenue > 1000 %}
{% if is_premium %}
  {# Simplified content #}
{% endif %}

Cache Heavy Computations:

Use HubSpot's module caching:

{
  "meta": {
    "cache": {
      "enabled": true,
      "ttl": 3600
    }
  }
}

Optimize Smart Content:

  • Reduce number of Smart Content variations
  • Use simple targeting rules
  • Consider client-side personalization instead

5. Font Loading Delays

Problem: Custom fonts delay text rendering

Solutions:

Preload Critical Fonts:

In template head:

<link rel="preload" href="your-font.woff2" as="font" type="font/woff2" crossorigin>

Use font-display:

@font-face {
  font-family: 'YourFont';
  src: url('your-font.woff2') format('woff2');
  font-display: swap; /* Show fallback font immediately */
}

Use System Fonts:

For fastest loading:

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

6. CDN Not Utilized

Problem: Assets not served from HubSpot's CDN

Solution:

HubSpot automatically uses CDN for:

  • Images uploaded to File Manager
  • CSS/JS in Design Tools
  • HubSpot modules

Ensure CDN usage:

  • Upload images through HubSpot File Manager
  • Don't hotlink to external images
  • Use HubSpot's asset URLs

HubSpot-Specific Optimizations

1. Optimize Hero Modules

For best LCP on hero sections:

{# Hero module with optimized image #}
<div class="hero">
  {% module "hero_image"
    path="@hubspot/image",
    img={
      "src": "hero-optimized.jpg",
      "alt": "Hero",
      "loading": "eager",  {# Don't lazy load LCP image #}
      "width": 1920,
      "height": 1080
    }
  %}
  <div class="hero-content">
    <h1>{{ module.heading }}</h1>
  </div>
</div>

<style>
  .hero {
    position: relative;
    height: 600px;
  }
  .hero-content {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
  }
</style>

2. Preconnect to Required Origins

In Site Header HTML:

<!-- Preconnect to HubSpot CDN -->
<link rel="preconnect" href="https://cdn2.hubspot.net">

<!-- Preconnect to Google Fonts (if used) -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- Preconnect to analytics domains -->
<link rel="preconnect" href="https://www.googletagmanager.com">

3. Critical CSS for Above-the-Fold

Inline critical CSS in template:

<style>
  /* Critical CSS for immediate render */
  body { margin: 0; font-family: Arial, sans-serif; }
  .hero { background: #f0f0f0; height: 600px; }
  .hero h1 { font-size: 3rem; color: #333; }
</style>

<!-- Load full CSS async -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

4. Optimize Background Images

For CSS background images (common in HubSpot):

.hero {
  /* Use optimized image */
  background-image: url('hero-optimized.jpg');

  /* Or use responsive images */
  background-image: image-set(
    url('hero-small.jpg') 1x,
    url('hero-large.jpg') 2x
  );

  background-size: cover;
  background-position: center;
}

5. Remove Unused HubSpot Features

Disable features you're not using:

  • Settings → Website → Pages → Header HTML: Remove unused tracking scripts
  • Design Tools: Remove unused CSS/JS from templates
  • Modules: Delete unused custom modules

Advanced Techniques

Resource Hints

<!-- Preload LCP image -->
<link rel="preload" as="image" href="hero-image.jpg">

<!-- DNS prefetch for third-party domains -->
<link rel="dns-prefetch" href="//www.google-analytics.com">

Service Worker for Caching

For advanced users, implement service worker:

// Cache HubSpot assets
self.addEventListener('fetch', function(event) {
  event.respondWith(
    caches.match(event.request).then(function(response) {
      return response || fetch(event.request);
    })
  );
});

Note: Requires careful implementation to avoid caching issues.

Testing Improvements

Before and After Comparison

  1. Baseline: Test current LCP
  2. Implement fixes from this guide
  3. Retest: Measure new LCP
  4. Compare: Calculate improvement

Test on Real Devices

  • Mobile phones (especially)
  • Tablets
  • Desktop computers
  • Different network speeds (3G, 4G, WiFi)

Monitor Over Time

Use tools to track LCP:

Common Mistakes to Avoid

  1. Lazy loading LCP image - Never lazy load the hero/main image
  2. Too many tracking scripts - Consolidate through GTM
  3. Unoptimized images - Always compress before upload
  4. Blocking CSS - Inline critical CSS, defer the rest
  5. Heavy JavaScript - Minimize and async load

Quick Wins for HubSpot

Priority fixes for immediate LCP improvement:

  1. ✅ Optimize hero image (compress to < 200KB)
  2. ✅ Async load GTM/GA4 (add async attribute)
  3. ✅ Add width/height to images (prevent layout shift)
  4. ✅ Preconnect to CDN (add preconnect links)
  5. ✅ Move non-critical scripts to footer (from header to footer HTML)

Next Steps

For general performance concepts, see Web Performance Guide.

↑ Back to top
// SYS.FOOTER