When it comes to your website, speed is everything.
In fact, according to Akamai and Gomez.com, 40% of visitors abandon a website that takes more than 3 seconds to load.
Visitors won't even make it through to your content if the website does not load fast. And what keeps your website from loading fast? If you have really large files, videos, or images on your website, it can add to the size of the page and greatly affect the load time.
Yottaa, a content delivery network (CDN) platform that helps speed up websites, recently benchmarked the speed of HubSpot's CMS. In this post, we will discuss three ways HubSpot keeps your website fast, and share some of the details of Yottaa's report.
#1. All Customers Hosting Their Website on HubSpot Are Powered by a CDN
HubSpot utilizes a leading CDN to help ensure all customers websites load quickly. There are numerous benefits to a CDN, such as keeping your website content on a server closest to them. But there are numerous front-end and back-end factors that contribute to the speed of a website loading. For example: the device type, operating system, and even location can all affect how a website loads and displays. If you have recently browsed the Internet on your smartphone and switched between WiFi and the cellular network, the speed difference was likely clear.
However, unlike the days where text-driven websites ruled supreme, visitors are demanding a rich experience that is relevant. To do this, we've built Smart Content and other capabilities directly into HubSpot to ensure you can easily build an experience for each unique visitor. But that experience also means that your pages will gain weight, but not necessarily sacrifice speed. According to Yottaa's performance test, the average page weight now exceeds 2MB in size for webpages, which is also close to the page weight from the HubSpot CMS.
Even though the rich features offered in HubSpot's CMS have increased the page weight, you can see in the chart below the time for the page to load is still incredibly fast. To explain this chart:
- T2D stands for Time To Display, which essentially means that the core elements of the web page have loaded and design is displaying properly (instead of just text or content without any CSS styling).
- T2I stands for Time To Interact, which means the moment you can actually start scrolling, or clicking links on the page. Time to interact follows the time to display as key pieces of your website need to load first before you can begin interacting with the site.
A fast website means more of the visitors that land on your pages will stay, and improves your overall business experience. Here at HubSpot, we utilize a CDN that hosts servers around the world to ensure you and your customers have a fast experience, wherever they may be.
#2. Responsive-Design is Built-In
The speed of the desktop version of your website is important, but it's become even more crucial to also offer a fast mobile experience. Now that mobile searches have surpassed desktop and search results are impacted by mobile-friendly websites, you should offer a fast and rich experience for mobile visitors. But offering that same rich experience on mobile can be difficult because it naturally increases page weight. That's where responsive design comes in.
Responsive design dynamically loads your website based on the screen size of the visitor. For example, open a new browser tab on your desktop or laptop, and take out your smartphone now and visit HubSpot.com from both. You will immediately notice the difference and how images on your smartphone appear to be properly sized, but naturally smaller. Responsive design is Google's #1 recommended design pattern as it only requires one set of code, and Google's crawler only has to go through your site once. If you have a separate version of your mobile site, such as mobile.example.com, it requires a duplication of all the assets on your homepage to the mobile version which can be costly from bandwidth and maintenance.
Going back to Yottaa's report, you can see the HubSpot CMS still outperforms the average on mobile due to the combination of responsive design and the CDN. This is shown by both the average time to start render, which essentially means that your website design appears on the device, and the time to display until your website is fully loaded and can be interacted with. This speed benefit means more mobile visitors will stick around your website and actually read your content.
#3. Dynamic Image Resizing and Image Compression
Have you ever experienced an image that loads sort of like a window shade? It slowly starts to fill-in from the top to bottom until it's finally done. One of the key reasons this happens is because the file size on the image is likely very large. Your connection can also play a key part, but even on a high-speed connection a large image can still have this effect. This is why using the HubSpot CMS you can solve this using dynamic image resizing and image compression which are built right in and how your website stays fast on HubSpot.
What is Dynamic Image Resizing? To explain, let's walk through an example. Let's say you upload an image to your website that is 5000 x 5000, but are only displaying the image at 500 x 500. This means that the browser still has to download the larger image and then display it within the smaller size. This can severely affect loading time, especially for any mobile visitors on a cellular connection. When you are using resizing within HubSpot though it means the browser will only display the image in the dimensions you specify. So in this example, instead of loading that large 5000 x 5000 image, the browser only loads the 500 x 500 image saving precious seconds that it takes your site to load.
Dynamic image resizing will take effect in a few different ways:
- Manually changing dimensions of an image after upload
- Using the resizing tool within HubSpot to change the dimensions of an image
- Editing the HTML code of an image that directly affects the image dimensions
Along with the image resizing, we also have taken steps to reduce the overall size of images. With image compression, any new image uploaded into your HubSpot account will have it's file size reduced while retaining image quality. This happens automatically when uploading an image and doesn't require any manual steps, but enhances and accelerates the experience for your visitors.
Note: dynamic image resizing and image compression only affect new images uploaded into your HubSpot portal. Existing images will not be affected, unless you change the dimensions. Also note, the speed benefits from HubSpot only apply to the content you are creating or hosting with HubSpot.
With the CDN that powers all websites using HubSpot, to responsive design, and image resizing and compression your website will consistently stay fast. A fast website helps rank better in search, and retains visitors once they land on your website which naturally helps all of your inbound marketing.
