Using Google Lighthouse to Optimize Your HubSpot Websites

This article was authored by a member of the HubSpot developer community, Jonathon Pavoni.

Performance optimization on websites and landing pages is more important than ever. Your search engine rank is tied to overall website performance, as is the experience visitors have when they click on your site.

Google Chrome has a built-in tool called Lighthouse that provides a roadmap to ensure your website is optimized for both desktop and mobile users. In this article, I’m going to discuss a few of Lighthouse’s performance indicators and offer some quick, tactical ways to solve those problems that Lighthouse identifies when building a HubSpot website or landing page.

You can open Lighthouse in Google Chrome by right-clicking the page and clicking "Inspect." Then, in the developer tools, navigate to the "Lighthouse" tab (see the attached screenshot below). 

You’ll see there are categories that you can toggle on and off, like: Performance, SEO, Accessibility, Best Practices, and Progressive Web App. Before you jump into editing your code, it’s important to define a few key performance terms.

Google will look at these core web vitals on every page analyzed: 

1. First Contentful Paint measures how long it takes the browser to render the first piece of Document Object Model (DOM) content after a user navigates to your page.
2. Speed Index measures how quickly content is visually displayed during page load.
3. Largest Contentful Paint measures when the largest content element in the viewport is rendered to the screen.
4. Time to Interactive measures how long it takes a page to become fully interactive.
5. Total Blocking Time measures the total amount of time that a page is blocked from responding to user input such as mouse clicks, screen taps, or keyboard presses.
6. Cumulative Layout Shift measures unexpected movement of page content that happens when resources are loaded asynchronously or DOM elements get dynamically added to the page above existing content.

Google uses these six metrics to measure the overall performance of your website and landing pages. It will then present opportunities for improvement along with specific suggestions on things that can be changed. We will look at a few below.

First Contentful Paint & Largest Contentful Paint

Images and video are by far the heaviest assets on your page, so it’s critical to ensure that these are as small and compact as possible while still looking good on the page. 

A tool I use daily, to compress image files, is Sqoosh. Compression is most notable on PNGs with transparency, as these are often the heaviest images on the page. 

You can also use the resize image URL function from Hubspot to resize the image on the server before it ever gets sent to the browser and lazy load your images (unless they are in the header section).

For background video, it’s very important to run compression on the files before they get loaded into Hubspot. My go-to tool for this is HandBrake. 

Compression is more of an art than a science—balancing file quality vs. file weight is a bit like walking a tightrope, more experience will yield more understanding. 

Solving for Cumulative Layout Shift

Poor performance scores in cumulative layout shifts frequently happen because you don’t have explicit width and height parameters on your images. Without these parameters, when the page loads into the browser the content will shift around and decrease your Lighthouse score. The best way to solve this is by explicitly setting the width and height of all your images. Then, use the CSS aspect ratio to further instruct the browser that this aspect ratio should be preserved across screen sizes.

Conclusion

This is by no means an exhaustive list of Google Lighthouse’s features or the performance tools available, only to offer some quick tactical wins that you can easily get by having a working knowledge of Google Lighthouse and some performance tools that come with your CMS Hub instance. 

Hubspot has a great help article on additional performance best practices that can be used to ensure your sites are performant. For a more exhaustive tutorial on how to use Lighthouse, check out this YouTube video. 

Happy coding!