Contact

    Optimise your HubSpot website speed

    Difficulty Level: Easy. This post assumes a basic understanding of HubSpot tools and little to no technical knowledge.

    The unfortunate truth is that when you're using a Content Management System (CMS) like HubSpot and marketing tools and scripts (Google Analytics, Hotjar... etc.), you're never going to have a perfect speed score, but you can still work on optimising your site to ensure that it loads fast for your readers and search engines.


    Site speed tools

    There are plenty of tools out there to check your site speeds. Some I like to use are: 

    All three will tell you how long it takes to load a page, give it a score and give you recommendations on how to optimise it.

    Optimise your website

    Optimise images

    Images are almost always the main culprits behind site speed issues. Pingdom, for example, does a good job of showing you size and requests by content types, and you'll likely see images at the top: 

    Pingdom - Content size and requests by type

    Automatic functionality

    If you're using a built-in module (like the Rich Text editor or Image module) to add your images, HubSpot automatically does a certain amount of optimising by resizing the image and converting them to webp.

    HubSpot also does some amount of image compression and also optimises page speed by using a Content Delivery Network (CDN). You can read some more technical details here.

    Custom modules and coded templates

    If you create custom modules, coded templates or are coding a blog listings template, you'll need to make sure you optimise any images.

    1/ resize_image_url

    Be sure to use the resize_image_url function to set widths (e.g. if you're using cards on your blog listings, load them at something smaller like 300px wide).

    2/ Responsive images

    You can also set different image sizes for different screens. For example, if I'm creating a hero background image module, I might use @media queries combined with the resize_image_url function to load the image at 1920px on large screens, at 480px on smaller screens and different widths at other breakpoints in between.

    File types, resizing and compressing images

    That being said, you'll improve your site speeds by a lot if you do some work upfront.

    1/ Make sure you're using the right file type

    As a rule of thumb, use JPEGs for photos, PNGs for images that require transparency and SVGs for vector images (icons, logos... etc.) 

    HubSpot have a post on specific that you can read here.

    2/ Resize the image beforehand

    Upload an image that's appropriate for the are you'll be using your image: 

    • Most websites set a maximum content width of anywhere between 1000px and 1300px. Therefore, if you're adding an image that takes up half the page, it shouldn't be any wider than 500px - 650px.
    • Similarly, if there are three cards on your page, the image shouldn't be wider than 335px - 435px.
    • If you're adding a hero image, most screens tend to go up to 1920px so I wouldn't recommend adding an image any wider than that

    So at no time should you be uploading massive 6000px images to your File Manager!

    3/ Apply compression

    There are tools out there like Squoosh or TinyJPG/TinyPNG where you can upload images and download a compressed version at a smaller size.

    Try to keep images as small as possible, ideally under 100MB in most cases. 

    Optimise styles and scripts

    The second main culprit tends to be the amount of scripts and stylesheets that need to be loaded. 

    Marketing tags

    Marketers can get carried away with all the great tools that exist out there: Google Analytics, AdRoll, HotJar, LinkedIn Insights... etc. However, each of these adds a new script to your page that needs to be requested and loaded. 

    1/ Do you really need that tool?

    If you're using a tool, great. But if you just added it in to test it out and aren't really using it, consider removing the tag from your website.

    2/ Use Google Tag Manager

    By adding all of your tags to Google Tag Manager, you reduce the number of requests.

    HubSpot forms and CTAs

    HubSpot forms and call-to-action buttons both make script requests when they're loaded, so you might see a lot of requests to /hs/cta/cta/current.js (for CTAs) and /_hcms/forms/v2.js (for Forms).

    You'll also notice a minor delay in loading them. The reason being that CTAs "currently have a small delay built into them to make sure that the HubSpot tracking code is fully loaded before the CTA, to make sure that the tracking for the CTA functions correctly" (see here). 

    Try reducing the number of requests for forms and CTAs. For example, do you really need a form in the footer of every page?

    Reduce the number of scripts and stylesheets

    This one is more for developers. Try to keep all of your scripts in your main.js and your styles in your style.css files. Files attached to your templates will be automatically combined and minified. 

    CSS and JS sections on custom modules

    Styles and scripts in your custom modules, however, are added to <style></style> and <script></script> tags on the page and are not minified. 

    I go back and forth on whether it's better to have your CSS/JS contained in the custom module (so it's only used where needed) or to add it to the main files so that it'll be minified. However, if I'm optimising for speed, I'll usually add CSS/JS to the theme files.

    Check settings, templates and pages to see if there is a lot of random code added to the head and footer of the page and try to combine those into the main files as well.

    Last Updated: January 29, 2020

    Thank you! I appreciate the feedback 😊

    Sorry to hear that! 🙁

    I'd appreciate if you could take a moment to let me know how I can improve this article.

    hand-drawn-monitor-and-mouse

    Looking for a HubSpot website developer?

    Let me help you with website themes, templates, page setup and custom modules. 

    Get in touch

    Stephanie O'Gay Garcia

    Hi! 👋 I'm a freelance HubSpot Website Designer & Developer based in Toronto (Canada). Give me a shout if you have questions about this post or there's anything I can help you with.