Optimizing for page speed

Important intro

Before getting started, you need to determine how important page speed is for your website and whether it's worth the extra effort—sometimes substantial—to achieve high or perfect scores on tools like Google's PageSpeed Insights.

While page speed is generally important, its priority can vary based on your website's specific goals and target audience. For some sites, rich content and user experience may take precedence over lightning-fast loading times. Not every website needs to be the fastest, but it should load efficiently enough to provide a positive user experience—and that's easily achievable with HubSpot and Act3.

The only metrics that actually matter for SEO and page ranking—though only slightly—are the Core Web Vitals. That's why we recommend using Google's PageSpeed Insights (which uses Lighthouse), to check your scores and identify any specific issues. A score above 50 means your page performs better than half of all the pages tested, which may be sufficient in most cases. Also, note that scores can vary slightly with each test due to factors like infrastructure (server speed, routers, etc.) and the timing of the test (e.g., scores may be higher at night when traffic is lower).

We highly recommend reading Google's FAQ to ensure that your website provides a solid user experience and to understand that page rank is not significantly impacted by minor metrics. As Google states, "Google Search always seeks to show the most relevant content, even if the page experience is sub-par." Content remains the most important aspect of your website regarding SEO, so your extra effort is better spent on creating valuable, relevant content rather than solely aiming for higher page speeds.

Desktop vs Mobile

Page speed will most often be slower on mobile than on desktop—Lighthouse applies network throttling on mobile tests. This is because mobile devices typically have less processing power and slower network connections compared to desktop computers. Therefore, having lower scores on mobile than on desktop is considered normal on many CMS platforms.

Many consider Google to have a very low benchmark for mobile devices. That's why you will encounter websites that successfully pass the Core Web Vitals on mobile with very poor Lighthouse scores.

It's also known that B2B websites typically have more desktop users than mobile users, so for most B2B businesses, Desktop performance is what matters most. In this regard, optimizing your website on HubSpot and Act3 will be relatively easier.

How to properly run a test

To avoid mistakenly testing your page with resources loaded specifically for system functionality and UI (e.g., HubSpot's CSS and JS used for the editor, authentication, etc.), we recommend opening an Incognito window and accessing PageSpeed Insights. Run the test once, close the window, and repeat these steps for each new test. This approach clears any session data saved to the browser, ensuring the test reflects how new visitors access your page. It also prevents interference from browser extensions, assuming they are disabled in Incognito mode.

If you run a test in a regular browser window while logged into HubSpot, the results may include inaccurate data and false warnings related to resources that aren't actually loaded when visitors access your page.

Also, avoid testing preview URLs, as they won't provide accurate results for live page performance.

Act3's optimization

We optimized the theme as much as possible, considering the CMS and theme resources (analytics, theme modules, design, features, etc.) and there's very little you can do in the theme's code to improve your page speed. Page performance depends on a lot of factors, not just the theme. Most SEO issues on websites built with Act3 are content-related or caused by third-party code.

To get an idea of how well Act3 is optimized, try running a test on our Home 1. For a page like this, the score will depend on the number of modules you add to the page, the features you're using, and the level of optimization of your images, videos, and other media. Adding forms, CTAs, embedded YouTube videos or other iframes, as well as a complex Google Tag Manager and additional scripts for extensive tracking, will definitely slow down your page.

Ultimately, it's about finding a balance—some tracking might be more valuable to your business goals than a perfect page speed score. However, if page speed is the priority, you might want to limit tracking and reduce additional scripts.

What you can do to further improve page speed

Here are a few things to consider, along with the common causes of page speed issues we see on our customers' websites—and what you can do to fix them.

Optimize your images

Optimize all your images by using tools like TinyPNG and resizing them for their specific use. For example, avoid using a 4000x3000px image in a card that's only 400px wide. In many modules, if you upload an image that's twice the size of its displayed dimensions, Act3 will show the full image size on HiDPI displays and a reduced size on standard displays. Therefore, it's ideal to upload an image that's double the size of its intended display dimensions to ensure it looks sharp on all screen types.

However, if page speed is a major concern, upload images at their intended display dimensions instead. Background images are different, so this rule doesn't apply there. For example, a full-screen background image sized at 1440x900 will look good across most devices without being too large in file size.

SVGs can also be optimized, although this may be insignificant for overall page speed. You can use a tool like SVGOptimizer to reduce the file size of graphics, logos, and other SVG elements.

Lazy-load images appropriately

It's always a good idea to lazy-load all images below the fold, but avoid lazy-loading images above the fold. If the Largest Contentful Paint (LCP) element is a lazy-loaded image, it can significantly lower your score. Most of our modules include options to lazy-load images; however, when this option is not available, we automatically lazy-load images that are known to be below the fold or not visible directly on page load.

Do not embed YouTube or external iframes

Embedding YouTube videos or other external iFrames can significantly slow down your page. Instead, consider using thumbnail images that link to the video in a Lightbox or on an external page. This approach reduces the initial load time, as the video or iFrame content only loads when the user interacts with it.

If possible, consider using the same approach for videos instead of embedding them directly on the page.

Limit the usage of forms, CTAs, and tracking scripts

On a typical HubSpot page, there are many scripts that aren't specifically part of Act3. Some of these are HubSpot scripts needed for tracking and functionality, often included when using certain tools. For example, HubSpot forms and CTAs are dynamically loaded on the page using JavaScript, which can significantly impact loading speed—similar to other tracking services, cookie consent banners, chatbots, and more. The more elements you measure, the more scripts are added, which can slow down the page. Additionally, some tracking scripts use a small invisible image to track visitors, which Lighthouse may mistakenly flag as a missing image.

So instead of adding a form on all pages (e.g., in the Footer) you could use a footer without a form, and just link to a separate page that includes the form. If there's no form on the page, the HubSpot form script won't be loaded.

Another example is a top sticky CTA banner, which can cause a large Cumulative Layout Shift (CLS). If possible, and if it's not absolutely necessary for your page, consider using a bottom sticky banner instead. Normally, if you use the sticky header or the overlapping header, you shouldn't have a non-theme sticky element there, because they are all placed at the top of the viewport. In that case, we recommend using the bottom CTA option.

Mouse tracking, chatbots, heatmaps, external A/B testing tools, and other similar services can impact your page speed. If you suspect one of these is slowing down your page, try disabling them one at a time and run tests to identify the culprit.

Use web-safe fonts or minimize font usage

Custom fonts can significantly impact page load times, especially if multiple font weights or styles are loaded, as the browser must download all those files before rendering the page. Using web-safe fonts (like Arial, Helvetica, or Georgia) can improve page speed, as they don't require additional loading time. If custom fonts are necessary—as they are in most cases—try to use as few fonts and weights as possible to keep loading times efficient.

For example, by default, we use only three variants of the Jost font in Act3: 400, 500, and 600. This means the browser needs to download three font files before rendering the page. You can use even fewer—such as normal and bold for all text, headings, and UI labels. Please refer to our theme settings for more details about fonts in Act3.

If you load different fonts for each text category, the browser will need to download multiple files to render the page: Text, Text Bold, Headings, Headings Bold, UI Labels, and UI Labels Bold. That's a maximum of six font files, compared to Act3's default of three—or even fewer, or zero, if you use web-safe fonts.

Do not load jQuery if you don't need it

jQuery can add extra weight to your page and slow down load times, especially if it's not essential for your website. Act3 is built with clean JavaScript and doesn't include or rely on external libraries like jQuery for its functionality.

If you're not using jQuery for any other purpose on your website, consider disabling it in your settings to improve performance.

Disable reCAPTCHA if possible

reCAPTCHA can add significant load time and slow down your page. If you don't absolutely need it, we recommend disabling it to greatly improve page speed.

Consider design compromises

Sometimes, small design adjustments can have a big impact on page speed. Certain components carry more weight than others, affecting load time based on your content. For instance, a video background or slider will load more slowly than a section with only text and a gradient background. Ultimately, it's about striking a balance between speed and functionality. Pages with multiple scripts, images, videos, and sliders will load more slowly than simpler pages—the more elements you have, the slower the load time.

Optimize your Google Tag Manager

Google Tag Manager (GTM) can affect page speed, especially if it contains numerous tags or complex tracking scripts. To optimize GTM, review all tags regularly and remove any that aren't essential. Consider setting up triggers to load certain tags only when needed, and avoid loading unnecessary tags on every page. Minimizing the weight of GTM can help improve overall performance.

There are many excellent articles online with examples on how to optimize your GTM, such as: Google Tag Manager Performance: 9 Tips for Faster Site Speed

Conclusion

These are the most important aspects we've encountered over the years regarding page speed optimization. Of course, HubSpot handles many additional optimizations behind the scenes, and things are constantly evolving in this area. As we discover more tips and tricks, we'll add them here. And as always, if it's within our power to further optimize the theme, we'll be sure to do so.

In the end, you can spend a lot of time and money trying to achieve a perfect score, but most of these improvements are just recommendations or guidelines that don't significantly impact your Google ranking. In most cases, they have minimal effect on your overall ranking. Content is still king!