Website performance has stopped being a 'nice to have' — it's a ranking factor, a conversion factor, and a trust factor all at once. Slow pages don't just frustrate visitors; they actively cost you leads, revenue, and search visibility.
If you're running your website on HubSpot Content Hub, you already have a solid performance foundation: HubSpot's CDN, automatic image optimization, and built-in caching infrastructure handle a lot of the heavy lifting. But that doesn't mean every Content Hub site is fast by default. The way you build pages, structure modules, and load assets makes a measurable difference.
This guide walks through the practical performance optimizations we apply across HubSpot Content Hub projects in 2026 — the same techniques we've refined across more than 100,000 pages built since 2011.
Google's Core Web Vitals are now firmly embedded in the ranking algorithm. The three metrics that matter most:
Beyond rankings, performance directly affects conversions. Industry data consistently shows that every additional second of load time reduces conversion rates by 5-7% on average. On a high-traffic site, that's not a marginal loss — it's a meaningful business problem.
Images are almost always the heaviest assets on a webpage. Get this right and you've solved 60% of typical performance problems.
Use modern formats — WebP and AVIF
HubSpot Content Hub now serves images in WebP format automatically when supported by the browser. AVIF support is also expanding. WebP files are typically 25-35% smaller than JPEGs at equivalent quality; AVIF goes even further. You don't need to do anything special to enable this — HubSpot's CDN handles format negotiation per visitor.
Right-size before you upload
Don't upload a 4000px image to display at 800px. Resize images to the maximum dimensions they'll actually be displayed at, then let HubSpot's CDN handle responsive serving from there.
Compress without losing quality
Run images through a tool like TinyPNG, Squoosh, or ImageOptim before uploading. Most images can be compressed by 40-60% with no visible quality loss.
Use proper alt text and dimensions
Always set explicit width and height attributes on images. This prevents Cumulative Layout Shift (CLS) when images load. HubSpot's image module does this automatically when you specify dimensions.
Lazy-load images below the fold
Images that aren't visible on initial page load shouldn't block rendering. HubSpot's image module supports the loading="lazy" attribute — make sure it's enabled for all below-the-fold images.
JavaScript is the second-biggest performance lever, especially for interactive sites. The wrong approach to JS can completely tank your performance scores.
Avoid jQuery and legacy frameworks
jQuery had its place in 2010, but in 2026 it's mostly performance overhead. Modern JavaScript (ES6+) handles every common task jQuery once solved — natively, faster, and without the bundle size. If you're still loading jQuery, audit whether it's actually being used and replace it with native JavaScript where possible.
Defer non-critical scripts
Most JavaScript doesn't need to load before the page renders. Use defer or async attributes to push non-critical scripts out of the critical rendering path. In a HubSpot theme, add the defer attribute in your base.html template:
<script src="..." defer></script>
Audit third-party scripts
Marketing pixels, chat widgets, A/B testing tools, and analytics scripts add up fast. Each one slows down your site. Audit your third-party scripts quarterly and remove anything you're not actively using. Tools like WebPageTest and Lighthouse will show you exactly which scripts are eating performance budget.
CSS optimization is more nuanced than JavaScript optimization but equally important for perceived performance.
Minimize render-blocking CSS
CSS in the document head blocks rendering until it loads. Keep your critical CSS lean and defer non-essential stylesheets. HubSpot's module configuration supports css_render_options to control how module CSS loads — use this strategically.
Use HubSpot's preconnect for external resources
If you're loading fonts, third-party scripts, or external APIs, add preconnect hints in your base.html template:
<link rel="preconnect" href="https://fonts.googleapis.com">
This establishes the connection early, reducing latency when those resources are actually requested.
Self-host fonts when possible
Google Fonts and other external font services add an extra DNS lookup and connection. For frequently-used fonts, self-hosting via HubSpot's file manager is often faster — especially with proper preload hints.
Custom modules are the building blocks of HubSpot Content Hub themes. How you build them dramatically affects performance.
Use built-in modules where possible
HubSpot's built-in modules are performance-optimized by default. Custom modules give you more flexibility but require more discipline. If a built-in module solves the problem, use it.
Configure module loading carefully
HubSpot lets you control how each module's CSS and JS load via the module's meta.json file. The relevant options:
These are advanced options — only use them if you understand exactly when each module is rendered. For details, see HubSpot's developer docs on module configuration.
Avoid duplicate dependencies
If multiple modules each load their own copy of, say, a slider library, you're paying that performance cost multiple times. Consolidate shared dependencies at the theme level.
The theme you build (or buy) determines your performance ceiling.
Start with a lean base
Heavy themes with hundreds of unused features are a performance liability. We recommend starting with a lean theme and adding only what you need — rather than starting with a feature-rich theme and trying to disable what you don't use.
Use HubL to render efficiently
HubL (HubSpot's templating language) compiles server-side, so most performance considerations apply to the rendered output, not the HubL itself. But avoid heavy nested loops or excessive HubDB queries on every page render — these add server-side latency.
HubSpot provides several tools to monitor and improve performance:
The Performance tab in the page editor
Every page in HubSpot's editor has a Performance tab that shows load time and key metrics for that specific page. Check this regularly during development.
Lighthouse audits in Chrome DevTools
Run Lighthouse on your live pages to get specific, prioritized recommendations. Address Lighthouse warnings systematically — they tend to map directly to Core Web Vitals improvements.
Google PageSpeed Insights
Use this for the most authoritative read on Core Web Vitals. PageSpeed Insights uses real Chrome user data (CrUX) for its core metrics, which is what Google actually uses for ranking.
Performance optimization is iterative, not one-and-done. The teams who consistently rank well treat performance as an ongoing discipline:
HubSpot Content Hub gives you a strong starting point. The discipline you bring to images, JavaScript, CSS, modules, and ongoing measurement determines whether your site stays fast as it grows.