HTTPS is also 70% faster than HTTP (you can discover why here) and is now used by Google as a core ranking factor for your website.
How can I get an SSL certificate for my HubSpot hosted website?
HubSpot has a standard SSL service for anyone with the Marketing Hub Starter tier or above. But, depending on whether you have Starter, Professional, or Enterprise, the number of applicable subdomains varies.
So long as you are using the standard service, the certificate is free.
You also have the option of using a custom SSL service, but this would only be necessary depending on the structure of your domains or higher levels of authentication.
If this option sounds like the better solution, you would need HubSpot Marketing Professional or Enterprise, and it would have an additional $100 monthly cost.
HTTP stands for 'hypertext transfer protocol' and is the method computers and servers use to send and request information.
All websites hosted on HubSpot with SSL are served using HTTP/2, which has helped improve end-user perceived latency (how long it feels something takes to load) on websites and improve server performance.
But what exactly does this look like in detail?
When someone visits impactplus.com on their desktop, the browser they’re using sends an HTTP request to HubSpot's servers (remember, HubSpot hosts our site) for the content on that page.
HubSpot's servers respond by sending the page’s images, text, and formatted code back to the browser for it to display.
The first-ever version of HTTP was called HTTP/1.1 and was established back in 1997. Back then, requests were loaded one after the other. If one request failed, all others behind it were blocked.
Users were forced to wait for the server to send each asset one by one as the user asked for it, in whatever priority the browser wanted to load them in.
In comes HTTP/2 in 2015, the newest version of the protocol, and with it, advances to website performance and speed.
Rather than loading one at a time, with HTTP/2, the server can send several streams of data to the browser all at once.
Better yet, developers can now see all the requests (files) that are loading and prioritize them appropriately.
Think of this as someone giving you all the tasks you need to complete at work that you need to prioritize, rather than receiving them one at a time in whatever order they prefer.
Hosted on HubSpot, but not sure if you have HTTP/2 enabled?
You’ll only be allowed to access HTTP/2 if you have SSL enabled on your site. If you know that to be the case, but are still not sure you have HTTP/2, you can use tools such as HTTP/2 Test to see if it's enabled.
If it comes back negative, or you still need to enable SSL, you can use this tutorial to add HubSpot's SSL to your site and update your HTTP version (listed as TLS or Transport Layer Security) to 2.0
These files can range in sizes depending on how much language is added to them. The more content that's in the file, the bigger the document.
When your website loads a large CSS file or multiple CSS files, it takes longer for the browser to fetch them from the server and load them.
To help reduce the load time and file size, HubSpot “minifies” your CSS files by removing unnecessary spaces and line breaks, and combines them into one.
It’s also important to note that HubSpot uses a compression algorithm, called Brotli (which was developed by Google), which offers several advantages over other compressors like gzip. Some of those most notable being:
HTML files are 21% smaller with Brotli
CSS files are 17% smaller with Brotli
Knowing HubSpot has a built-in way to do this (as opposed to your finding a way to automate this yourself) is a huge win for the performance of your website.
It's important to note that pages that include inline CSS (CSS written in the same document as your HTML) will not be combined.
HubSpot also verifies that pages look the same before and after combining CSS. This way you’re reassured HubSpot will not push combined CSS files live if something breaks.
4. Page and server caching
Whenever you visit a website, your browser needs to send a server a series of complex requests. These requests result in many calculations that help render the files in the browser.
But every time you revisit the same page, there are a multitude of files and requests that are the same every time.
For example, a page might have text or images that don’t constantly change. Knowing this, the browser and server can temporarily store assets such as images, media, and written text, so it can easily retrieve them again. This is the cache.
Think of this as your browser or server’s memory. If the browser already knows that a photo of a dog will always get loaded on your homepage, it remembers that for the next several times you visit.
If your website page, a module, or any smaller piece of it changes, HubSpot automatically expires the cache until the next time a user visits and encounters the updated version.
This is especially important for folks visiting a site on a mobile device, where internet connection may not be as strong, making page load time take that much longer.
What should you do if the browser still hasn’t changed after an update?
Don’t fret! HubSpot’s cache sometimes takes a few minutes to refresh.
If you just pushed something live, but can’t get the new version to show on your end as quickly as you need it to, you can add ?nocache=1 to the end of your URL.
This method, called cache busting, allows the browser to refresh the cache because the website URL no longer matches what the caches version was.
An example with IMPACT’s URL
5. Image compression
Images are one of the top reasons why so many websites have high load times. This is normally because of high-resolution images from stock websites that could be 3000px in width or more.
On average, your images shouldn’t be any larger than 1920px in width (which works best for a hero section). The file sizes should also be no larger than 150kb.
The larger the file size, the harder it is for your browser to fetch the file from the server and load all that data.
While you must resize your images to a more appropriate size for their use case, HubSpot also offers the advantage of automatically optimizing your images when you upload them to their file manager.
You can see an example happening real time in the GIF below:
So, what’s actually happening?
HubSpot removes any metadata (like details about where the image came from or the camera that produced it) associated with the image, which normally adds to its file size.
Image pixel data is also compressed to look visually lossless, which means although the image quality has been decreased, it looks the same to the naked eye. The resolution is also changed to 72dpi, which is standard for screens.
Finally, whenever an image with a specified width and height is added to a page, HubSpot updates the code that renders the image on your website to include other size variations of the image that will show depending on the screen size of your viewing the site on.
This way, website visitors are being served the smallest file size possible automatically, helping the site load faster.
How do I resize my images?
Bulk Resize is one of my preferred tools because it’s both free and allows you to upload multiple files at once. For any new images you're adding to a webpage, I recommend uploading them to this tool to resize appropriately for their intended use case.
Another helpful tip is to only use PNG files if the image has areas in it that need to be transparent. PNG files are usually larger in size and can sometimes be used unnecessarily. (Screencaps on mac computers are PNGs by default.)
So, if you're writing a blog article and taking screen captures to use in your article, consider converting the files to JPGs, which can shave off a good portion of the file size.
Looking for what you can do outside of these tips?
Once you’ve made it through these tips and have a better understanding of HubSpot's built in ways to speed up your site, you can start to look at other important factors that can help improve speed.
In addition to everything in this article, there are additional measures Google recommends that can bring you even closer to a perfectly-optimized website.
If you're interested in what that looks like, I recommend checking out Google Lighthouse to get a complete understanding of what information Google uses to judge your sites ranking when it comes to speed.
Once you’re able to grasp these concepts, you’ll have a website that's built to Google's standards, which will inevitably increase your ranking on search result pages across the board.