If you are looking for ways to speed up your HubSpot website, you already know that every millisecond counts. A slow-loading site directly impacts user experience, bounce rates, and ultimately, search engine rankings and lead generation. Google's PageSpeed Insights and Core Web Vitals are not just abstract metrics; they are direct measures of how usable your site is. Achieving a high score is not about vanity—it is about ensuring your marketing asset performs as intended and converts visitors into customers.
Getting a score of 90 or higher on PageSpeed Insights is entirely achievable on the HubSpot CMS, but it requires a deliberate, technical approach. It is not a matter of installing a single plugin or flipping a switch. Performance optimization involves a systematic audit of your site's front-end code, assets, and server requests. You must address how your site loads images, scripts, stylesheets, and fonts to eliminate bottlenecks that frustrate users and search crawlers alike.
This article provides a comprehensive, technical checklist for diagnosing and fixing performance issues on your HubSpot website. We will walk through seven key areas, from initial auditing to advanced asset optimization. Following these steps will give you a clear roadmap to improve your Core Web Vitals, enhance user experience, and hit that 90+ PageSpeed score. For complex issues, a HubSpot technical SEO specialist can provide the necessary expertise.
1. Audit Your Current Performance with PageSpeed Insights
Before making any changes, you need a baseline. Google's PageSpeed Insights is the standard tool for this task. Run your homepage, a key landing page, and a blog post through the tool to get a complete picture. The report provides a performance score from 0-100 and measures your Core Web Vitals: Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS). LCP measures loading performance, INP measures interactivity, and CLS measures visual stability.
Pay close attention to the 'Opportunities' and 'Diagnostics' sections of the report. PageSpeed Insights will explicitly tell you what is slowing your site down. Common culprits include render-blocking resources, improperly sized images, unused JavaScript, and large network payloads. These recommendations are your initial to-do list. For example, an opportunity like 'Eliminate render-blocking resources' points directly to issues with how your CSS and JavaScript files are loaded.
Document your starting scores for both mobile and desktop. Mobile performance is often lower and should be your primary focus, as Google uses mobile-first indexing. Your goal is to see measurable improvements in your LCP, INP, and CLS scores as you work through this checklist. An initial audit prevents you from guessing and allows you to focus your efforts on the changes that will have the most significant impact on your site's speed.
2. Optimize All Website Images
Images are frequently the single largest contributor to page weight. Optimizing them is a critical step to speed up your HubSpot website. Your first rule should be to resize images to their correct display dimensions *before* uploading them to the HubSpot File Manager. If an image will be displayed at 800px wide, do not upload a 4000px version. Relying on browser resizing wastes bandwidth and processing power.
Next, use modern image formats. WebP and AVIF offer superior compression compared to traditional JPEG and PNG formats, resulting in smaller file sizes with little to no loss in quality. HubSpot's CDN automatically converts images to WebP for supported browsers if you append the `?format=webp` query string. You can use HubL filters like `|resize_image_url` to both resize and convert formats dynamically, ensuring the smallest possible file is served.
Finally, enable lazy loading for all below-the-fold images. Lazy loading defers the loading of off-screen images until the user scrolls near them. HubSpot automatically adds `loading="lazy"` to images inserted via rich text modules. For images in custom modules or coded files, ensure this attribute is present in your `<img>` tags. The only exception is your LCP element—usually the hero image—which should load immediately. For a full site build, this is a core part of our HubSpot website design and development process.
| Format | Best For | Key Benefit |
|---|---|---|
| JPEG | Photographs without transparency | Good compression for complex, colorful images. |
| PNG | Images requiring transparency (logos, icons) | Lossless quality and alpha transparency support. |
| WebP | General replacement for JPEG and PNG | Superior compression (25-35% smaller) with transparency. |
| AVIF | High-priority images where size is critical | Even better compression than WebP, but with less browser support. |
| SVG | Logos, icons, and simple illustrations | Vector-based, resolution-independent, and extremely small file size. |
3. Minimize and Defer Render-Blocking JavaScript
When a browser encounters a `<script>` tag in the `<head>` of your HTML, it must pause page rendering to download, parse, and execute the JavaScript. This is known as a render-blocking resource and is a major cause of slow LCP times. HubSpot loads several of its own scripts, and third-party tools for analytics, heatmaps, or advertising add even more. Your goal is to minimize and defer as many of these as possible.
Audit all scripts loading on your site. Use your browser's developer tools (Network tab) or the PageSpeed Insights report to see every JS file. For each one, ask: is it essential for the initial page render? Scripts for chatbots, social sharing, and secondary analytics tracking are almost never essential. These should be deferred. In HubSpot's website settings, you can choose to load scripts in the footer, which is a simple way to defer them.
For more granular control, use the `async` and `defer` attributes on your `<script>` tags. The `defer` attribute tells the browser to download the script in the background and execute it only after the document has finished parsing. The `async` attribute also downloads in the background but will execute as soon as it is downloaded, which can still interrupt rendering. For non-essential scripts, `defer` is almost always the safer choice. Managing these scripts is a common task within our HubSpot support and maintenance plans.
4. Refine CSS Delivery and Remove Unused Styles
Similar to JavaScript, CSS files loaded in the `<head>` are render-blocking. The browser needs the CSS to know how to style the page before it can display it. While HubSpot automatically combines your theme's stylesheets into one or two files to reduce HTTP requests, these files can become bloated over time, especially on older sites or those using complex Marketplace themes. This leads to the 'Remove unused CSS' warning in PageSpeed Insights.
Manually removing unused CSS in HubSpot is challenging. A better approach is to focus on keeping stylesheets lean from the start. During a HubSpot theme customization project, developers should write modular, component-based CSS and avoid large, monolithic files. If you inherit a site with bloated CSS, the most effective solution is often a targeted refactor of the theme's stylesheets rather than trying to use automated purge tools that are difficult to integrate with HubSpot's build process.
Another strategy is to inline critical CSS. Critical CSS is the bare minimum set of styles needed to render the above-the-fold content of the page. By placing this CSS directly in a `<style>` tag in the `<head>`, the browser can render the visible part of the page immediately, improving LCP. The rest of the CSS can then be loaded asynchronously. This is an advanced technique and typically requires a developer to implement correctly using build tools, but it offers significant performance gains.
5. Leverage HubSpot's Caching and Global CDN
HubSpot's infrastructure is built for performance, and it is important to understand the features working for you automatically. All HubSpot-hosted websites are served through a global Content Delivery Network (CDN) powered by Cloudflare. A CDN distributes your assets (images, CSS, JS) to servers around the world, so when a user visits your site, the files are delivered from a server geographically close to them. This dramatically reduces latency and speeds up download times.
HubSpot also manages caching for you. It sets appropriate `cache-control` headers on your assets, instructing the user's browser to store local copies of files. When a user returns to your site, their browser can load the CSS, JavaScript, and images from its local cache instead of re-downloading them, making subsequent page loads nearly instant. You do not need to configure any CDN or caching settings yourself; the key is to ensure your assets are properly hosted within HubSpot's ecosystem.
The main takeaway here is to trust the platform's built-in capabilities. Avoid using external services to 'double up' on caching or CDN delivery for assets hosted in HubSpot, as this can introduce complexity and points of failure. Your focus should be on optimizing the assets themselves—as discussed in the other sections—not on trying to re-engineer the delivery mechanism. Understanding this helps you focus your efforts where they matter most. For companies moving to the platform, we ensure this is handled correctly during a HubSpot website migration.
6. Optimize Font Loading and Prevent Layout Shifts
Web fonts, while great for branding, can negatively impact both LCP and CLS if not handled correctly. When a browser needs a custom font, it may hide the text until the font file is downloaded, causing a Flash of Invisible Text (FOIT). This can delay your LCP if the largest element on the page is text. To fix this, you must use the `font-display: swap;` descriptor in your `@font-face` rule. This tells the browser to display text immediately using a fallback system font, and then 'swap' in the web font once it loads.
This swap can, however, cause Cumulative Layout Shift (CLS) if the fallback font and the web font have different sizes. To mitigate this, use new CSS properties like `size-adjust`, `ascent-override`, and `descent-override` to make your fallback font metrically similar to your web font. This minimizes the jarring 'shift' when the font swaps, satisfying the CLS metric. Tools like the 'Perfect Fallback' generator from Malte Ubl can help you calculate the correct values.
Finally, consider preloading your most critical font files. If you know a specific font variant (e.g., the WOFF2 file for your main heading font) will be needed to render the above-the-fold content, you can add `<link rel="preload">` to your `<head>`. This gives the browser a hint to start downloading that font with high priority, even before it has parsed the CSS that requests it. This can shave hundreds of milliseconds off your LCP time. At HubStack, we prioritize these technical details to ensure client sites are fast from day one.
7. Analyze Server Response Time (TTFB)
Time to First Byte (TTFB) measures how long it takes for a user's browser to receive the first byte of data from your server after making a request. While HubSpot manages the server infrastructure, your site's specific configuration can still impact TTFB. A high TTFB (typically over 600ms) indicates a problem on the server-side, not the front-end. The PageSpeed Insights report will flag a high TTFB under its 'Diagnostics' section.
What causes high TTFB on HubSpot? The most common culprits are overly complex HubL logic, inefficient HubDB queries, or an excessive number of API calls within a custom module. For example, if a page template needs to loop through thousands of HubDB rows or make multiple `hubdb_table_rows` calls without efficient filtering, the server will take longer to generate the HTML for the page. This is server-side processing time that directly adds to your TTFB.
Fixing high TTFB requires a code-level investigation. The solution involves optimizing your HubL and HubDB calls. This could mean adding `|batch` filters to reduce loop iterations, restructuring your HubDB tables for faster lookups, or caching the results of expensive queries. This level of optimization is where an experienced HubSpot developer is essential. If you have optimized your front-end assets and your site is still slow, a high TTFB is the likely cause, and it is time to look at your site's back-end code and data structure.