Introducing the Generator Theme
The Generator theme was built specifically for HubSpot CMS users who want clean design, full control, and fast‑loading pages—without needing to touch a line of code. It’s designed from the ground up with performance in mind, so you’re not fighting against your theme every time you add content.
That said, even with a fast theme and a powerful CMS, page speed still depends on how your site is built. This guide explains what’s already handled for you behind the scenes—and what you, as a non‑technical site manager, can do to keep your site fast.
What does the Generator theme do for you?
The Generator theme includes performance best practices out of the box. Most of the technical decisions that affect speed are already made for you, so you don’t have to think about them while building your pages.
Built‑in speed optimizations
Generator is designed to avoid unnecessary bloat. It keeps page weight low, limits the number of requests the browser needs to make, and avoids loading anything that isn’t needed.
Lightweight JavaScript
Instead of relying on large libraries like jQuery, Generator uses modern, lightweight JavaScript. This reduces file size and improves responsiveness, especially on mobile devices.
Deferred CSS and JavaScript
Stylesheets and scripts are loaded at the bottom of the page, allowing the visible content to appear first. This prevents render‑blocking and helps pages feel faster as they load.
Module‑level loading
Only the code for modules that are actually used on a page is loaded. If a feature isn’t present on the page, it isn’t slowing anything down.
Lazy‑loaded images
Images are lazy loaded by default, meaning they only load when a visitor scrolls to them. This significantly improves initial page load time.
What does HubSpot handle automatically?
HubSpot CMS takes care of many advanced performance optimizations behind the scenes. These features require no setup and work automatically with the Generator theme.
CDN and automatic image optimization
All assets are delivered through HubSpot’s global CDN, ensuring fast load times regardless of where visitors are located. Images are automatically converted to modern formats like WebP when supported.
Compression and caching
HubSpot compresses your site’s code using Brotli or GZIP and applies smart browser caching so repeat visitors experience faster load times.
CSS and JavaScript minification
Your CSS and JavaScript files are automatically cleaned and reduced in size to improve performance without affecting functionality.
AMP and prerendering
Blog posts support AMP for faster mobile performance, and some pages are prerendered so they load more quickly during navigation.
Efficient module loading
HubSpot ensures that module‑level CSS and JS are only loaded once, even if the same module appears multiple times on a page.
What you can do to improve your site speed
With HubSpot and the Generator theme handling the technical foundation, your role is to make smart content and layout decisions. The biggest performance gains come from a few simple areas that are completely under your control.
Optimize your images
Images are the most common cause of slow HubSpot websites—and the easiest thing to fix.
Choose the right size
Before uploading an image, think about how much space it will take up on the page. Once you know the approximate display size, double that width to support retina screens.
For example, if an image displays at 600px wide, upload it at 1200px wide. This keeps images sharp without wasting bandwidth on oversized files.
Use the right format
Use JPEG for most images, especially photos or large visuals. JPEGs are smaller and load faster.
Use PNG only when you need transparency, such as for logos or icons. PNG files are much larger and should be used sparingly.
Compress before uploading
Even properly sized images are often too large straight out of a design tool or camera. Always compress images before uploading.
If you use Photoshop, use Save for Web (Shift + Option + Command + S).
If not, use tools like:
-
TinyPNG
-
Squoosh
This step alone can reduce file sizes by 50–80% with no visible quality loss.
Let Generator handle lazy loading
The Generator theme automatically lazy loads images. This improves page speed by loading images only when they’re about to be seen. In most cases, you should leave this enabled and not override it.
Use forms where it makes sense
HubSpot forms load additional scripts and make external requests, which can slightly slow down a page.
On conversion‑focused pages—such as landing pages, demo pages, or lead capture pages—this tradeoff is absolutely worth it. Getting the conversion is more important than maximizing page speed.
On non‑conversion pages, such as your homepage or informational pages, consider removing forms if they aren’t tied to a specific goal. Fewer scripts mean faster load times.
A simple rule of thumb:
-
Conversion page → use a form
-
Informational page → only use a form if it adds real value
Use live chat strategically
The live chat widget also adds scripts and background activity, which can slightly affect page speed.
On bottom‑of‑funnel pages like pricing or product pages, live chat can be extremely valuable. Answering a last‑minute question may be the difference between a conversion and a bounce, so the performance tradeoff makes sense.
On general browsing pages, live chat is often unnecessary. If speed is a priority, consider disabling it on pages where visitors are just learning or exploring.
Always prioritize conversion intent over raw speed.
How to check your page speed
You don’t need technical expertise to evaluate your site’s performance.
Use Google PageSpeed Insights
Go to pagespeed.web.dev and enter the URL of the page you want to test. You’ll receive a score and a list of recommendations.
Focus on:
-
Mobile performance
-
Image sizing and compression
-
Cumulative Layout Shift (CLS)
-
Large or unused resources
Don’t obsess over getting a perfect score. The goal is a fast, smooth experience for real users—not chasing numbers.