Prerendering Content on HubSpot Websites for Marketers

Hardly a day goes by that clients don't ask about SEO. One way to improve your HubSpot site's performance is prerendering and serving static versions of web pages (not the same as caching). But, not all pages can be prerendered.

What Is Prerendering?

Prerendering is the process of creating static versions of your web pages ahead of time. Instead of dynamically assembling a page’s data and layout for every request, HubSpot renders these pages in advance and stores them on its Content Delivery Network (CDN). This ensures faster delivery to users, as local copies of the prerendered pages are distributed globally for quick access based on the visitor’s location.

Benefits of Prerendering:

• Improved Page Load Speed: Static pages eliminate the need for server-side processing during each request, enabling near-instant loading times.
• Enhanced Security: Static pages reduce exposure to vulnerabilities associated with dynamic code execution or database queries.

Prerendering vs. Caching

While caching temporarily stores frequently accessed resources like CSS or JavaScript files, prerendering creates a fully static version of the page itself. Even if a page isn’t cached, prerendering ensures faster delivery since the page is already preassembled in its final form.

Eligibility for Prerendering

Not all pages can be prerendered due to certain dynamic features (such as a date in the footer or a personalization token in the content). When a page includes elements like user-specific content or adaptive testing, HubSpot may serve it dynamically or use partial prerendering, where only static portions are prerendered while dynamic elements are rendered at serve-time.

How to Check If a Page Is Prerendered

You can verify whether a page is prerendered by inspecting its HTTP response headers:

• Look for the X-HS-Prerendered header, which indicates the last time the page was prerendered.
• Alternatively, use the query parameter ?hsDebugOnly=true to identify issues preventing prerendering. If debug information is hard to read, use ?hsDebug=true for a formatted HTML comment at the bottom of your page.

Optimizing Pages for Prerendering

To make your pages compatible with prerendering:

1. Use ?hsDebugOnly=true to identify incompatible features or variables.
2. Replace incompatible HubL variables (e.g., request.cookies, request.query) with JavaScript-based alternatives.
3. Shift dynamic rendering tasks to JavaScript executed in the user’s browser or use HubSpot Serverless Functions for dynamic data retrieval (advanced).

Partial Prerendering

For pages that include both static and dynamic content (e.g., personalized greetings), HubSpot employs partial prerendering. While these pages aren’t cacheable on the CDN, they still deliver faster than fully dynamic pages by rendering only specific elements at serve-time.

To check if your page uses partial prerendering:

• Add ?hsPrcDebug=true to your URL to view debug output about partially rendered content.

CSS Optimization Without Page-Level Combining

HubSpot no longer combines CSS at the page level due to advancements like HTTP/2, which supports simultaneous loading of multiple files over a single connection. Instead:

• Place unique styles in module-specific CSS files using require_css.
• Share common styles across modules by creating reusable CSS files tied to those modules.
• For global components like headers and footers, centralize their CSS into shared files for better caching efficiency[5].

Prerendering is a great feature for content developers and marketers looking to enhance website performance on HubSpot CMS. By understanding its mechanisms and optimizing your site according to content optimization best practices, you can significantly improve load times, UX, and even search engine rankings.

For those of you evaluating HubSpot Themes for their SEO-worthiness, look no further than DropZone Pro Theme...fully customizable, installed, and warranted by our team at Kayak.