Improving Hubspot Performance
Hubspot and Google Lighthouse
Dan MacleodIn recent years I’ve noticed an increasing shift in emphasis on Hubspot projects from aesthetics & functionality to how well the sites perform against the gold standard of Google Lighthouse metrics. This has become priority for many content owners and marketers.
I’ve found that site owners come to me with existing builds that look great and do everything asked but are not hitting the green numbers. Hubspot Marketplace themes offer a huge variety of templates and modules but these are often bloated with unused css/js dependencies and can come at a significant cost to performance.
How do you build a Hubspot theme that performs well?
Firstly, if you’re intending to use a pre-built theme from the Hubspot Marketplace, make sure you test it for performance yourself prior to deployment. You can test any demo site by running Lighthouse from Chrome – hit F12 (Win) or Option Cmd I (Mac) and select Lighthouse from the DevTools pop-up, run both Mobile and Desktop analysis to get a complete picture of performance.
In my experience the best approach is to develop a bespoke theme from first principles, this starts with using the Hubspot Boilerplate (which scores extremely highly), stripping it back and adding content and functionality incrementally, assessing performance at each stage.
Ultimately performance will always be a balancing act, tuning the optimum levels of aesthetics and interactivity/functionality. If you want green numbers there may be some compromises required!
How do you fix the performance of an existing site?
There are quick wins to be had and your first stop should be to use the baked-in Hubspot Performance/SEO audit tools - often they will throw up tasks that you’ll need developer support for. These might typically include tidying up unused css/js, deploying “lazy loading” rules, image alt tags and ensuring images are correctly sized and formatted.
