Ever wondered how to speed up your HubSpot website? In this guide, I will show you what you can do to improve your website speed on HubSpot.
Why is this important?
Google will rank your website based on these three principles: on-page content, off-page factors, and site speed. This plays a big part in where your website appears on a Google search page. It is also generally good practice to get your website to load in less than 3 seconds because Google reported that 53% of mobile users abandon slow websites after just 3 seconds.
Improving site speed on HubSpot can be tricker than a WordPress site because you haven’t got a plugin that will do it for you. But don’t worry, I’m here to help. I will highlight what you can and cannot do on Hubspot to help with site speed results.
This requires a HubSpot CMS subscription.
Firstly, let’s run your website through a page speed test
Go to Google Page Speed and enter your website URL and hit go.
This will only test the page you enter; if you would like to test all pages you can use Experte.
You will see results similar to the above. If you scroll down, you will see a breakdown and suggestions on how to improve your score.
What you can do on HubSpot:
Reduce image sizes
HubSpot automatically reduces the size of your images when you upload them to the Files folder. However, sometimes it doesn’t compress them enough or at all.
All your images on your website ideally need to be around 80 KB. You will need to find your image in HubSpot and upload it to a compression service such as TinyPNG or Image compressor.
If you need to compress files that are already on your HubSpot website, then follow these three simple steps.
1. To locate large images, go to Marketing > Files and Templates >Files.
2. From here you can filter by type. Click the drop-down and hit Images.
Then click on the size on the tab bar - this will show you the biggest file first.
3. Click on a large image - a sidebar will appear and you can see details about the image.
In the picture above, you can see information about the banner image I have selected.
Below is a breakdown of the information.
1. The dimensions for this file are far too big - to reduce this you would download it and use a photo program to crop it to around 1920 x 1080 pixels (this is only if it is a banner. If it’s a square or smaller image around 500px is good). Both Mac and PC have built-in programs to view images and have cropping options.
2. The file size is also far too big - to reduce this, use your downloaded and cropped photo and upload it to an image compression tool (Image compressor) and this will reduce the size of the image.
3. Lastly, we can see where the image is used on your website in a drop-down menu. You can click on that link which will take you to the place it is used and replace your image with the optimized one.
When to use PNG / JPG / SVG
JPG or JPEG is always the preferred image format for websites. They tend to be smaller and quicker to load. Choose a JPG file If your image contains any of the following:
- More than 5 colours
- Detailed photographs of buildings and or people
PNG is best used when:
- Less than 5 colours
- A transparent (see-through) background is needed
SVG is best used when:
- You have an icon that needs to be scaled
- Things like logos, slider arrows, social icons
Defer of screen images
Deferring an image simply means do not download this image until the user needs it.
On a HubSpot page when adding an image, click on that image, and on the left-hand sidebar you can change the size dropdown to be lazy (deferred) - you want to do this for all images that are below the fold.
Callout:
DEV TIP - if you are building your own custom blocks in HubSpot, make sure the loading attribute is loading correctly or set it manually using loading=”lazy” on the image tag
Reduce the amount of JavaScript used on your website
Websites tend to get bloated with a lot of 3rd party JavaScript. This could come from services like Facebook, statistics, HotJar, GTM and many more.
Although these tools may be useful for website tracking and statistics, ask yourself if you need all of them. Things like HotJar should be used for a limited amount of time, and not constantly on your website.
To add or remove these services, you would need to add the code snippets to the site settings in HubSpot. If you cannot find them in the settings consider asking a developer or customer service for support.
However, in the case where you are using a lot of JS on a page for animations or difficult functionality, you should consider asking a developer to make it more efficient or change how you are achieving this goal.
Remember, you are not your user and something you think is ‘cool’ or ‘flashy’ may be annoying to a user if it takes long to download or work.
Reduce unused CSS
Sometimes you will have a big amount of CSS in one file. All of that CSS is unlikely going to be used on one page.
A way to find out what isn’t used you can use the coverage tab in Chrome to show you visually what isn’t being used.
Above is an example of the coverage tab in Chrome. In the centre of this image, you can see the orange bars next to the CSS that isn’t used. This can be helpful in identifying bits of code you do not need.
Once you have this knowledge, you can edit custom CSS files in HubSpot by going to Marketing > Files and Templates > Design Tools.
Then use the search in the left-hand bar to find the file you wish to edit. If you are comfortable with CSS, I would recommend backing up the file or copy and pasting the file somewhere before you start editing it. If you are not comfortable, with making changes to the code yourself, get in touch with the team at Betta Webs for some help.
CALLOUT: Be careful removing CSS because it may be used for mobile styling so therefore would show as red on the desktop usage.
What you cannot do and what to do about them:
Edit the cache policy
HubSpot does not allow users to edit the .htaccess file (where most cache policies are put), because it’s an important file that if saved wrongly could break a website. However, if you strongly feel some pages should be cached, you could contact support and see what they can do to help you.
Reduce initial server time
HubSpot CMS is designed to look after the server-side of things for you; giving you less worry about the functionality and allows you to focus more on the website. Therefore there is no way to change your server or how dedicated it is. If you find your website gets thousands of hits and the server time is really an issue, then I would recommend contacting support to set up a custom setup for your business.
Change jpg/png to webp
HubSpot does this out of the box, but it will not show up on Google Site Speed Test. Here’s so more on why:
Currently, we automatically serve images in WebP format for browsers that support it (with a few exceptions, such as GIFs). If you are still seeing the recommendation in Google PageSpeed Insights to "serve images in next-gen formats" it is because the conversion happens server-side and the file extension in the URL does not change. However, you should still see an improvement in performance because of the image conversion. You can learn more about this feature in our developer documentation. - HubSpot Product Team
With this in mind, your score should be higher than it states if you are getting this in your report.
What you can do is visit this issue online and upvote it to include the webp in the URL which would make Google Page Speed happy.
To summarise - How to speed up your HubSpot site
- Make sure your images are the correct dimensions and file size (around 80kb)
- Use JPG most of the time, unless you need to use a PNG (for transparency) or SVG for logos
- Make sure to change your images to lazy load if it is below the fold (banner area generally)
- Reduce the amount of 3rd party scripts on your site
- Re-think that amazing animation that takes 2 minutes to load (if you have one)
- Reduce any unused CSS
Now you know six ways you can improve your website speed on HubSpot. Although you may need a developer's help, there are certainly things you can do to increase your website speed yourself.
As always, we are here to help. Get in touch with Betta Webs today to find out how we could speed up your website.
