8 Ways to Speed Up Your HubSpot Website

Let's face it, these days we live in a world of short attention spans.

Information is more easily accessible and people are busier than ever. Users want to find what they're looking for quickly and they're not going to wait around to get it if the same information is available elsewhere. There's data to prove it. Per Google, the probability of bounce rate increases by 32% as page load time goes from 1 second to 3 seconds, and it gets worse very quickly. That's why page speed is a major ranking factor for Google, especially on mobile.

Luckily, the HubSpot CMS takes care of a lot of the performance enhancements for you. It's one of the big reasons HubSpot is such a great option for developing CMS. Here's a list of some of the big enhancements you get out of the box:

• Content Delivery Network (CDN)
• Secure Socket Layer (SSL)
• HTTP/2
• JavaScript Minification
• CSS Minification and Combining
• Browser and Server Caching
• And more...

Awesome, thanks for making my life easier, HubSpot. 😀 But they can only do so much. How can I build off of that to make a super-fast website? Let's take a look at the biggest culprits for slow websites and eight ways we can improve them.

Images

This is the big daddy. You see them on nearly every page and they're usually the largest files on said page. But a website without images and visuals is boring and who wants boring? Plus if you're like me, you need some visual breaks. A long blog post of only paragraph copy is hard to read. You gotta break it up with headings, lists, and images to keep things interesting.

1. Optimize Your Images

Raw images are large in size and typically contain unnecessary data in them that can be eliminated with smart lossy compression. With the right tool, you can take a raw image and reduce its size significantly. These tools selectively decrease the number of colors in an image thus reducing the file size. And the difference after compress is so minimal, only a trained design eye would notice the difference. Want to go deeper on image optimization? Check out this blog.

2. Lazy Loading

Lazy loading is a technique for loading content when it's needed, rather than all at once. If an image is outside of the viewport, it won't be loaded until the user scrolls down closer to it. This technique now has native support by all the latest versions of modern browsers. It's as easy as adding loading="lazy" to your image. Quick wins!

3. Choose the Right Image Format

JPG, PNG, SVG. GIF... which format is the right format? The quick and dirty answer to this is to use JPG for photos, PNG for photos with transparency, SVG for vector images + illustrations, and GIF well, maybe for animated GIFs. This is not always the case, but more often than not. Here's a great article that dives deeper into choosing the right image format.

4. Size Your Images Appropriately

You should try not to serve images that are larger than the version that's rendered on a user's screen. Anything larger than that is really just unnecessary. Some image formats like SVG are vector-based and responsive by nature. I reach for SVGs for all things illustrated now, from logos to icons, to accents. SVG should stand for So Very Good. JPG and PNG are still big players too and when using these, make sure to size them appropriately and use responsive image techniques like srcset. You can also leverage HubSpot's resize_image_url function to ensure marketers don't upload images that are larger than necessary.

JavaScript and CSS

5. Remove jQuery and Go Vanilla

jQuery is really a great tool. I've used it religiously throughout my career and it's created tremendous efficiencies on those projects. However, you might not need jQuery. And if you don't, that's one less dependency that you need. I've been working hard over the past year to get out of the jQuery mindset and train myself how to accomplish the same tasks I reached for it on and replacing it with vanilla JS. If you still want to use jQuery, make sure you're using the latest version for security sake and load that baby in your footer.

6. Use Async and Defer

A website is made up of CSS and JS files. How you load them can impact your page speed. These two techniques can resolve render-blocking issues.

For JS, you can load synchronously or asynchronously. Synchronously means the files load one at a time. Asynchronously allows you to load multiple files at the same time. If possible, load JS files with the async attribute.

Deferred loading can be used for both CSS and JS. The defer attribute allows you to execute the scripts when the page has finished parsing, in turn, loading the important, necessary information first.

7. Add Only What You Need

Similar to images and using only the size you need, the same can be applied to code. Every little bit counts so why not try some of these quick tips:

• Consider writing custom javascript rather than loading a large third-party library in which you only use a small portion of it.
• Load CSS and JS within the modules instead of globally.
• Leverage modern HTML and CSS techniques instead of relying on frameworks like Bootstrap or Foundation.
• Leverage CSS animation techniques instead of plugin solutions.

Redirects

8. Fix Redirect Chains

A redirect is when you forward from one URL to another. You click an old URL with a redirect and you're sent to the new URL. A redirect chain is when there are multiple URLs set up to redirect to another page. For example, you click an old URL with a redirect to another old URL which redirects to the new URL. There's that unnecessary middle mad redirect. Redirect chains negatively impact your site with lower page rank, slower page loads, and making your site harder to crawl to name a few. Use tools like Ahrefs to analyze what redirects are truly needed and what ones aren't.

Go Get 'em, Speedy

Hopefully, you got a nugget or two of info on how you can speed up your HubSpot site. And remember, getting that perfect 100% page speed score isn't the goal—the goal is to get results. Use your best judgment on when and where to implement some of these more optional items such as animations and image-heavy pages. Good luck with your page speed adventures!