At if/else agency, we're convinced that website loading speed is essential to delivering the best possible user experience. We're often asked how to ensure that page loading on Hubspot is as optimized as possible? In this article, we share our tips for optimizing the loading speed of your HubSpot pages.
Optimize your modules
HubSpot modules are great for adding functionality to your pages, but they can also slow down loading speed. To improve the loading speed of your pages :
- Scope your module code so that each module works independently and loads only its own code.
- Use macros for reusable code. For example, if you use buttons in several modules, a button macro will be relevant.
- Make only the necessary elements modifiable.
Use only the code you need in your templates
HubSpot pages can contain all kinds of modules and developments, but the HTML architecture can quickly impact your page's loading time. To improve your page loading speed:
- Use pages that contain only the code actually used by your modules.
- Remove sections that are not used, and JS libraries that are not used (hello jQuery).
- Rationalize the number of modules per page.
- Check that there are no hidden sections in the page (in the HubSpot editor).
Use optimized CSS and JavaScript files
CSS and JavaScript files can be very heavy and slow down the loading speed of your pages. To improve loading speed :
- Use files that contain only the code required for your modules to function properly.
- Use Webpack to minify your files so that only web-optimized files are loaded into HubSpot.
Optimize your images
Images are often one of the main causes of page load times. Yet it's super easy to optimize them! Here's our advice:
- Use image compression tools such as Squoosh to optimize the size of your images without altering their quality.
- Use image formats adapted to your needs. Whenever possible, use WebP for the images on your site.
- This new format is lighter than JPG or PNG.
- Reduce the size of your images by resizing them before uploading them to HubSpot.
Understanding and using Lazyload
Delayed-load images are loaded automatically when the user sees them. This means that images are not loaded immediately, which improves the loading speed of your pages.
However, if you use lazyload on images that are supposed to be visible above the waterline, this can impact your performance score.
So use “eager” loading for images above the waterline and “lazy” loading for the rest of your images.
Loading JavaScript files on the fly
You'll often hear the terms “async” or “defer” used in the development world. At if/else, we prefer to load external libraries on the fly. For example, let's say our code uses a carousel that uses an external library: we'll observe this carousel and, when it's visible on the page, load the library and then the script linked to this carousel. In this way, page loading will not be affected.
Place scripts below the waterline
The simplest solution is to place these external files at the bottom of the page, just before the </body> tag. Most of the content can then be loaded before the scripts.
Avoid fads that overload the code
We're often asked to code modules, each more outlandish than the last. The problem with these modules is that they often have the wrong ratio between added value and code overload.
Starting out with a good intention, you'll sometimes be asked to develop the moon, only to be surprised at how long the code takes to load.
Simply don't hesitate to say no to this kind of request, or if you have no choice, to warn that the performance score will be impacted.
Would you like to improve the performance and loading time of your website? Book your free audit with Garance by clicking here.
Photo credit : Photo from Rodion Kutsaiev on Unsplash
