```
**Web fonts without `font-display: swap`:** When the browser loads a web font, it may show text with the system font (FOUT) or not show it until the font is available (FOIT). Both behaviours can cause CLS. The solution is to use `font-display: swap` in `@font-face` declarations:
```css
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-regular.woff2') format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
```
For Google Fonts loaded from `fields.json`, HubSpot automatically manages font loading, but does not always apply `font-display: swap`. To force it, the `display=swap` parameter can be added in the Google Fonts `` in the template:
```html
```
**Third-party embeds without reserved dimensions:** YouTube, Vimeo iframes, HubSpot forms and other third-party embeds can cause CLS if they do not have reserved dimensions. The solution is to use the aspect-ratio padding trick:
```css
.video-embed-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
height: 0;
overflow: hidden;
}
.video-embed-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
```
**Cookie banners and notifications:** Cookie banners that appear at the bottom of the screen can cause CLS if they push content upward when they appear. The solution is to position them so they do not affect the main content layout (using `position: fixed` instead of `position: sticky` or adding them to the document flow).
### CLS Diagnostic Tool in Chrome DevTools
Chrome DevTools includes a specific tool for diagnosing CLS: in the "Performance" tab, after recording a page load, the "Layout Shift Regions" option can be activated to visually see which DOM elements are causing layout shifts. This tool is especially useful for identifying CLS causes that are not obvious at first glance.
---
## INP Optimisation in HubSpot CMS
### What Causes High INP
High INP on HubSpot CMS sites usually has the following causes:
**Heavy third-party scripts:** Analytics scripts (Google Analytics 4, HubSpot Analytics), chatbots (Intercom, Drift, HubSpot Chat), heatmap tools (Hotjar, Microsoft Clarity) and advertising platforms (Google Ads, LinkedIn Insight Tag) compete for the main thread with the page code. Each of these scripts can add tens or hundreds of milliseconds to INP.
**Synchronous event listeners on the main thread:** HubSpot modules with JavaScript containing synchronous event listeners that perform costly operations (DOM manipulation, complex calculations, synchronous requests) can block the main thread and increase INP.
**Costly CSS animations:** Animations that modify properties that trigger reflow (such as `width`, `height`, `top`, `left`) are more costly than those that only modify properties handled by the compositor (such as `transform` and `opacity`).
### INP Optimisation Techniques
**1. Defer third-party scripts:**
```html
```
**2. Use `requestIdleCallback` for non-critical tasks:**
```javascript
// Instead of executing heavy tasks directly
function initHeavyFeature() {
// ... heavy code ...
}
// Use requestIdleCallback to execute them when the browser is idle
if ('requestIdleCallback' in window) {
requestIdleCallback(initHeavyFeature, { timeout: 2000 });
} else {
setTimeout(initHeavyFeature, 1000);
}
```
**3. Optimise CSS animations:**
```css
/* BAD: animation that causes reflow */
.card:hover {
width: 110%;
height: 110%;
}
/* GOOD: animation that only uses the compositor */
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
will-change: transform;
}
.card:hover {
transform: scale(1.05);
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}
```
**4. Fragment long tasks with `scheduler.yield()`:**
In 2026, the `scheduler.yield()` API is available in all modern browsers and allows fragmenting long tasks to yield control to the browser between fragments:
```javascript
async function processLargeDataset(items) {
for (let i = 0; i < items.length; i++) {
processItem(items[i]);
// Yield control to the browser every 50 items
if (i % 50 === 0) {
await scheduler.yield();
}
}
}
```
---
## Third-Party Scripts and Their Performance Impact
### The Third-Party Script Problem in HubSpot
Third-party scripts are, in most cases, the main cause of poor performance on HubSpot CMS sites. Unlike WordPress, where plugins like WP Rocket can be used to centrally manage third-party script loading, in HubSpot CMS managing third-party scripts requires a more manual approach.
The most common third-party scripts on B2B HubSpot sites and their typical performance impact are:
| Script | Typical LCP impact | INP impact | Alternative |
|---|---|---|---|
| HubSpot Analytics (hs-analytics) | Low (< 100 ms) | Low | Not removable |
| Google Analytics 4 | Low-medium (100–300 ms) | Medium | Load deferred |
| Google Tag Manager | Medium (200–500 ms) | High | Audit active tags |
| Hotjar / Microsoft Clarity | High (300–800 ms) | High | Load deferred or remove |
| Intercom / Drift | High (500–1000 ms) | High | Load deferred, only on necessary pages |
| LinkedIn Insight Tag | Low-medium | Low | Load deferred |
| Facebook Pixel | Low-medium | Low | Load deferred |
| Cookiebot / OneTrust | Medium (200–400 ms) | Medium | Optimise configuration |
### Deferred Loading Strategy for Third-Party Scripts
The most effective strategy to minimise the impact of third-party scripts on Core Web Vitals is to load them deferred, after the user has interacted with the page ("load on interaction" strategy) or after the `load` event has fired.
In HubSpot CMS, third-party scripts can be added in the "Tracking & Analytics" section of the portal configuration, or directly in the theme templates. For scripts added in the portal configuration, HubSpot automatically injects them into the `` of all pages, which can negatively impact performance.
The alternative is to add scripts directly in the theme templates with deferred loading:
```html
```
### Google Tag Manager and Performance
Google Tag Manager (GTM) is one of the main causes of poor performance on HubSpot CMS sites because it acts as a container for third-party scripts: each tag added to GTM is an additional script loaded on the page. In projects where GTM manages 20–30 active tags, the performance impact can be very significant.
Best practices to minimise GTM's impact on performance are:
1. **Regularly audit active tags:** Remove tags that are no longer used or have duplicates.
2. **Use specific triggers:** Instead of firing all tags on "All Pages", use specific triggers that limit script loading to pages where they are needed.
3. **Consolidate pixels:** If you have Facebook, LinkedIn and Twitter pixels, consolidate them in GTM instead of adding them separately.
4. **Use Server-Side GTM:** Google Tag Manager Server-Side moves third-party script processing to the server, reducing client-side impact. This option requires additional infrastructure but can significantly improve performance.
---
## CDN and Cache Configuration in HubSpot
### HubSpot's CDN Infrastructure in 2026
HubSpot CMS uses a global CDN network based on Fastly to serve website content. In 2026, HubSpot's CDN infrastructure includes more than 200 points of presence (PoPs) worldwide, ensuring low load times for visitors from any geographic region.
Static theme assets (CSS, JavaScript, images) are served directly from the CDN with long-duration cache headers (generally 1 year). This means that once a visitor has loaded the theme CSS, subsequent visits retrieve it directly from the CDN cache without needing to make a request to the origin server.
### Cache Headers and Asset Versioning
HubSpot automatically manages theme asset versioning: when a CSS or JavaScript file is updated, HubSpot generates a new URL with a version hash, which invalidates the CDN cache and ensures visitors receive the updated version.
However, there are situations where cache can cause problems:
- **Changes to the theme's `fields.json`:** Design token changes may not immediately reflect for all visitors if their browsers have cached the previous CSS version.
- **Modules with JavaScript that make requests to external APIs:** If the module caches API responses, the data may become stale.
To force cache invalidation in HubSpot, the "Purge CDN Cache" function available in the portal configuration (Settings → Website → Pages → Purge CDN cache) can be used.
### TTFB Optimisation via HubSpot Cache
HubSpot CMS implements page-level cache for static pages (pages without Smart Content or dynamic content). When a visitor requests a cached page, HubSpot serves it directly from the CDN cache without processing the HubL template on the server, which significantly reduces TTFB.
To maximise the benefit of page caching:
- **Minimise Smart Content usage:** Each Smart Content variant requires server processing and may prevent the page from being fully cached.
- **Avoid using session variables in templates:** Templates that access session data (such as the logged-in visitor's name) cannot be cached.
- **Use global modules for common elements:** Global modules (header, footer) are cached independently and reused across all pages.
---
## Optimisation Checklist for HubSpot Sites
The following table summarises the most important optimisations for each Core Web Vital metric on HubSpot CMS sites:
| Optimisation | LCP impact | CLS impact | INP impact | Difficulty |
|---|---|---|---|---|
| Hero image preload | High | None | None | Low |
| `fetchpriority="high"` on LCP image | High | None | None | Low |
| Explicit dimensions on images | None | High | None | Low |
| `font-display: swap` on fonts | Medium | Medium | None | Low |
| Preconnect to third-party domains | Medium | None | None | Low |
| Deferred loading of third-party scripts | Medium | None | High | Medium |
| Removal of unused scripts | High | None | High | Medium |
| CSS animation optimisation | None | Low | Medium | Medium |
| Inline critical CSS | High | None | None | Medium-High |
| Server-Side GTM | Medium | None | High | High |
| GTM tag audit | Medium | None | Medium | Medium |
| Aspect-ratio for embeds | None | High | None | Low |
---
## Frequently Asked Questions
**Can a HubSpot CMS site achieve a score of 100 on PageSpeed Insights?**
Technically possible, but in practice very difficult for sites with dynamic content, analytics scripts and interactive modules. The PageSpeed Insights score is a lab metric that measures performance under controlled conditions (simulated Moto G4 device, slow 4G connection), and is designed to identify improvement opportunities, not to be an absolute target. At Emovere, our goal for HubSpot CMS sites is to achieve scores of 80–90 on mobile and 90–100 on desktop, with all Core Web Vitals in the "Good" range according to field data. A score of 100 on mobile generally requires removing all third-party scripts (including HubSpot Analytics), which is not viable for most B2B projects.
**Does the HubSpot Analytics script (hs-analytics) significantly impact performance?**
The HubSpot `hs-analytics` script has a moderate performance impact: it typically adds between 50 and 150 ms to TBT and can slightly delay LCP on slow connections. However, this script is necessary for the functioning of HubSpot features that depend on visitor tracking (Smart Content, behaviour-based workflows, lead attribution). It cannot be completely removed on HubSpot CMS sites. What can be done is to ensure it loads asynchronously (it does by default) and does not block page rendering.
**How does Smart Content affect site performance?**
Smart Content has two performance impacts: an impact on TTFB (because it requires server processing to determine which variant to show) and a potential impact on CLS (if different variants have different heights and the browser does not reserve the correct space). To minimise Smart Content's performance impact, it is recommended to: (1) use Smart Content only in modules where the personalisation benefit justifies the performance cost, (2) ensure all Smart Content variants have similar dimensions to avoid CLS, and (3) use cookie-based Smart Content (resolved client-side) instead of CRM property-based Smart Content (which requires server processing) when possible.
**Which tool is more reliable for measuring Core Web Vitals on a HubSpot site: PageSpeed Insights or Google Search Console?**
For optimisation decision-making, Google Search Console is more reliable because it shows real field data from users who have visited the site, while PageSpeed Insights shows lab data (simulated) that may not reflect the real user experience. However, PageSpeed Insights is more useful for technical diagnosis because it shows specific recommendations and allows analysing any URL, not just those with enough traffic to appear in Search Console. The recommended workflow is: use Search Console to identify pages with the worst Core Web Vitals according to field data, then use PageSpeed Insights and Chrome DevTools to diagnose specific causes and test optimisations.
**Is it possible to implement lazy loading of modules in HubSpot CMS to improve INP?**
Yes, it is possible to implement lazy loading of modules in HubSpot CMS, although it requires additional technical work. The most effective technique is to use the Intersection Observer API to load module JavaScript only when they enter the viewport. This is especially useful for heavy modules that are below the fold (such as carousels, interactive maps or videos). In the module, instead of executing JavaScript code directly, an observer is registered that executes the code when the module is visible:
```javascript
const moduleEl = document.querySelector('.my-heavy-module');
if (moduleEl) {
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
initMyHeavyModule();
observer.disconnect();
}
}, { rootMargin: '200px' });
observer.observe(moduleEl);
}
```
---
## Conclusion
Optimising Core Web Vitals in HubSpot CMS in 2026 requires a systematic approach: identify LCP elements, diagnose CLS and INP causes, and apply optimisations in the correct order (highest impact and lowest difficulty first, then more complex ones). The good news is that HubSpot CMS offers a solid performance foundation thanks to its global CDN and managed infrastructure, meaning the starting point is generally better than unoptimised WordPress.
The optimisations with the highest return on investment are, in order of priority: hero image preloading and optimisation (LCP), explicit dimensions on all images (CLS), deferred loading of third-party scripts (INP and LCP), and removal of unused scripts. By applying these four optimisations, most HubSpot CMS sites can achieve "Good" thresholds across all Core Web Vitals.
At Emovere we perform performance audits for HubSpot CMS and WordPress sites. If your site is not reaching Core Web Vitals thresholds, contact our team for a detailed technical audit.
---
## References
[1] Google — Core Web Vitals. https://web.dev/vitals/
[2] Google — Optimize Largest Contentful Paint. https://web.dev/optimize-lcp/
[3] Google — Optimize Cumulative Layout Shift. https://web.dev/optimize-cls/
[4] Google — Optimize Interaction to Next Paint. https://web.dev/optimize-inp/
[5] HubSpot Developer Documentation — Performance. https://developers.hubspot.com/docs/cms/performance
