How We Increased HubSpot Website Performance and PageSpeed Score

by Iwan Price-Evans on Tips and Tricks • August 26, 2021

HubSpot is a great platform for sales and marketing teams. Unfortunately, the HubSpot CMS does little to help marketers and web developers to optimize their websites for a fast user experience, short page load times, and a good Google PageSpeed score. The CMS backend is relatively slow (with a server response time as high as 1.5 seconds), and exposes few native options for developers to improve on some of the biggest bottlenecks.

We overcame the performance limitations of HubSpot's CMS backend by using our own product – Snapt Aria ADC – to accelerate the HubSpot website with automatic caching, minifying, compression, rewriting, and SSL offloading. We also replaced most of the HubSpot template and style framework with Tailwind CSS. Altogether, we took our PageSpeed score from 20 to 95.

If you have built your website in HubSpot and are struggling to get the PageSpeed score you want, book a demo or try Snapt free to see the difference it makes.

Power up your website and get the Page Speed score you want

 

Snapt and HubSpot

Snapt has been using HubSpot for a couple of years for marketing automation and CRM. In August 2020, we migrated our websites to HubSpot’s content management system (CMS).

Over time, we saw our HubSpot website performance and page load times degrade significantly, with Google PageSpeed scores dropping deep into the red. This is the story of how we fixed it.

Why build a website on HubSpot?

If website performance and PageSpeed was a problem, why did we build our website on HubSpot? Why not migrate to another CMS and hosting service?

One word: integration.

The Snapt marketing team has consolidated almost all its operations on HubSpot. This means that our team members only need to learn one UI and can move between different tasks and roles easily. Someone running social media through HubSpot’s social tools can also learn to create a landing page using HubSpot’s website tools, with very little friction.

We also benefit from integrated reporting, with HubSpot website metrics existing alongside CTA clicks, form submissions, and CRM data on contacts, companies, deals, and tickets. This means our team can easily evaluate the website in the full context of sales and marketing, and not in isolation.

Why is PageSpeed so important?

In May 2021, when our PageSpeed hit a low of 20, we decided to fix our performance problems as a matter of urgency.

The bad PageSpeed score was affecting our Google Ads (contributing to a bad quality score) and our SEO. This made our cost-per-click (CPC) higher and reduced our volume of leads (and eventually customers). Our bad PageSpeed was literally costing us money.

Further, Google’s switch to mobile-first indexing made it impossible to ignore the particularly bad PageSpeed score for mobile. The vast majority of Snapt’s website traffic and conversions come from users on desktop devices, so it was always tempting to deprioritize the mobile UX and performance because it was not relevant to our audience. However, Google’s mobile-first approach to indexing and its impact on ad quality scores and organic ranking meant we had to prioritize it.

We set ourselves a goal of achieving a 90+ PageSpeed score for mobile. With a starting point of 20 and no realistic option to change the website CMS, this was a big challenge for our team.

 

Download the ebook: How To Survive A Traffic Surge

 

Why did our PageSpeed get so bad on HubSpot?

To begin with, HubSpot website performance was OK – not good, but not bad either. We did some basic optimization at launch, and Google PageSpeed scores were around 50 on mobile and desktop.

In the year since launch, PageSpeed plunged to around 20. Why did that happen?

  1. HubSpot's CMS backend infrastructure is slow. The server response time (1.5s), the excessively large document object model (DOM), the tracking scripts, and the relaxed approach to caching all contribute significantly to an overall slow PageSpeed. HubSpot does not expose any settings for controlling these things, so users of the HubSpot CMS cannot easily improve on some of the biggest performance bottlenecks.
  2. HubSpot does not automatically minify and compress CSS, JavaScript, and templates very well. This allowed a lot of unused styles, scripts, and template components to propagate through our site after the initial site development project, inflating the size of the resources served on page load. 
  3. HubSpot does not automatically optimize images in the latest formats. With multiple people creating and editing website content, many of whom are not familiar with optimization techniques, our CMS became bloated with images that were unnecessarily large. Images 4,000px wide were used when 800px was sufficient, and HubSpot didn't correct this. Furthermore, it took HubSpot until Summer 2021 to add native lazy loading of images, which defers image loading until after the rest of the page layout and content has loaded.

Here’s an example of a delightful stock photo served on our website’s blog in all its 7,383px glory.

snapt-website-unoptimized-image

 

What did we do on HubSpot to improve PageSpeed?

We started with the simple things.

  • We enabled lazy loading for all images below the hero section.
  • We optimized our CSS and JavaScript libraries.
  • We optimized our Google Tags.
  • We changed our font to avoid loading a Google Font.
  • We removed pixels and tracking scripts that we could do without.

The result of these changes was that our mobile PageSpeed score increased from 20 to 40. Great, but still in the red zone and a long way off where we wanted to be.

snapt-website-page-speed-46

Why was it difficult to improve PageSpeed on HubSpot?

We had done nearly everything possible with HubSpot's native options to optimize our content inside the HubSpot CMS, and our PageSpeed was still bad. We realized we were limited by HubSpot’s backend and what they expose to users.

The biggest problem was our server response time, which ranged from 1.2s to 2.5s. For reference, a good response time would be less than 100ms. We had no option in HubSpot to affect this. We suspect HubSpot’s hosting service co-locates multiple customers on the same servers, which can degrade performance. We raised this issue with our HubSpot account manager; since then we have seen the server response time improve to around 600ms – better, but not satisfactory.

Other problems:

  • HubSpot takes a not-very-aggressive approach to caching, which results in more requests between the client’s browser and the webserver.
  • HubSpot offers limited options for compressing images, with per-image rather than global settings.
  • HubSpot has a heavy document object model (DOM), with every template module nested in numerous divs and spans.
  • HubSpot’s tracking scripts are substantial and cannot be altered.

snapt-website-page-speed-diagnostics

How to significantly improve PageSpeed on HubSpot with Snapt Aria web accelerator.

HubSpot’s own limitations seemed to put an artificial ceiling on how high we could take our PageSpeed score. But the story didn’t end there. We had an idea, put in a bit of work, and took our mobile PageSpeed score from 40 to 80, at a stroke. How did we do it?

You might have noticed that Snapt builds solutions for web application uptime, security, and performance. We sell application delivery controllers (ADC) that include load balancing, application firewalling, and web acceleration. The web accelerator component provides SSL proxying, caching, and content compression / minifying. Maybe we could eat some of our own dog food, get the marketing and product teams working together, and use our own product to solve our HubSpot website woes?

At first, we weren’t sure if it would work. HubSpot is a closed system – you can’t install your own applications like load balancers into HubSpot’s environment. Fortunately, Snapt’s Aria ADC supports routing via DNS, so we could run Aria in our own data center, and it would still accelerate our website running in HubSpot’s environment.

Here’s what we did:

  1. Downloaded and installed Aria ADC in our own data center. You can register and try it for yourself here: https://www.snapt.net/platforms/aria-adc/register
  2. Connected Aria to our website on HubSpot using the website’s DNS config.
  3. Went to the Accelerator options and ... well, we just turned on all the options.

snapt-website-aria-config

We didn’t think too hard about the configuration – we just wanted Aria to be as aggressive as possible in optimizing our HubSpot website. Aria was up and running in minutes. We got immediate feedback in the Aria dashboard that it was connected and accelerating live sessions on our website, with validation for our site’s SSL status.

snapt-website-aria-statusIn our testing, we immediately saw server response time drop from 1.2s to 80ms when running our HubSpot website through the Aria ADC, solving the single biggest performance limitation in HubSpot’s CMS. Items previously flagged by Google’s PageSpeed Insights (like image size, code size, first contentful paint) simply went away.

Using Snapt Aria to accelerate our HubSpot website took our PageSpeed score to around 80. Subjectively, web page load times dropped and general browsing became more responsive. Much better.

snapt-website-page-speed-80

Bypassing HubSpot’s DOM with Tailwind CSS

We liked our new PageSpeed score, but we didn’t stop there. We wanted a score of 90+, with its lovely green color-coding to tell us that everything is going to be all right.

We previously identified one of the challenges of optimizing on HubSpot: the document object model (DOM) is quite heavy, with every template module nested in numerous divs and spans. Our next project was to bypass the HubSpot template system as much as possible, to reduce the load.

Our website team identified Tailwind CSS as their preferred framework for developing customizable modules that use a lightweight element structure and stylesheet, and which integrate well with HubSpot’s page editor.

That second part is important. We have several non-developers creating and editing content on our website. The fastest website backend is useless if our less technical team members can’t get in there and edit their content with the HubSpot CMS GUI they know and love.

We have replaced the website menu and we are currently in the middle of replacing existing pages with new ones built using Tailwind. So far, on the pages we have updated, the results are exactly what we want.

PageSpeed is 90+ and green!

 

snapt-website-page-speed-93

Conclusion

Our website and product teams did a great job optimizing our HubSpot website PageSpeed within the limitations of HubSpot’s ecosystem. Adopting Tailwind CSS within HubSpot is a significant upgrade. But it was the Snapt product itself, acting as a web accelerator via DNS, that was the biggest surprise.

The Snapt marketing team spends all day promoting the capability of Snapt’s ADCs to keep websites and applications available, secure, and fast, but we were still astonished to see for ourselves the difference Snapt Aria made, and to see how effective it was even when our website was running in a separate environment and not immediately adjacent to Aria.

Are you running your website on HubSpot? Is your Google PageSpeed score in the red? Let us know and we will accelerate your HubSpot website. You can get started yourself with a free trial or book a free technical consultation with our expert team.