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.
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 :
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:
CSS and JavaScript files can be very heavy and slow down the loading speed of your pages. To improve loading speed :
When it comes to images, it’s all about finding the right balance between visual quality and website performance. Images that are too large will slow down your site, while overly compressed images can negatively impact the user experience.
The first rule of image optimization is to match image dimensions to their actual display size. For example, there is no need to use a 2000 × 2000 pixel image if it is only displayed at 180 × 180 pixels. On the other hand, avoid resizing images too small, as they may appear pixelated when displayed on larger screens.
File naming is also important for both technical performance and SEO. Always use clean, simple filenames: avoid accents, spaces, and special characters to ensure compatibility and better indexing by search engines.
To maintain optimal performance, keep your image file sizes under control:
There are many easy-to-use tools available to convert images to WebP and optimize them in just a few clicks. Using these tools can significantly improve your website’s performance with minimal effort.
At if/else agency, we particularly like Squoosh but there are many great alternatives out there. In fact, we relied on it so much that our development team built its own image optimization tool. The goal is simple: optimize images in bulk to save time and streamline workflows.
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.
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.
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.
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