It's easier to build from a great foundation that was built with performance in mind than trying to fix performance issues later. HubSpot's CMS Hub is one of the most advanced and optimized content management systems on the market. In this post, we will look at some things HubSpot CMS handles behind the scenes, as well as some steps you can take to improve the website speed and performance of your business even further.
*This post was originally written by Tayla Fagan and published on 7 May 2021
What is website performance?
Web performance is all about making your business website fast. Web performance refers to how quickly website content loads and renders in a web browser, and how well it responds to user interaction.
At its worst, poor performance can cause your content to be completely inaccessible to your visitors. A good goal for web performance is for your users to not notice performance. Excellent performance may not be obvious to your site visitors, but most will immediately recognize your website if it's slow.
Interested in building a fast website which is optimized to become your #1 lead generator? Read more about our Sales ready website service here.
We care about your website's performance
Web performance — and its associated best practices—are vital for your website visitors to have a pleasant experience. You might even consider web performance as a sort of branch of web accessibility. With performance, like with accessibility, you must consider what device your visitor is using to access your site and the device connection speed.
Common website performance bottlenecks
Most performance issues fall into two categories: rendering and loading.
Loading performance: The efficiency of transferring all the files needed for your web page to a user's browser. The number of files, size of files, and the speed of delivery of those files determine your web page's loading performance.
Related article: How to create an infinite scrolling blog in HubSpot
Rendering performance: Rendering performance is the efficiency of the browser to take everything it downloaded and display the result to the user. This is a more complex topic with far too many acronyms like CSS, JavaScript, CLS, DOM, CSSOM, etc. And all these factors need to be balanced and best practices followed to ensure a fast experience for all your website visitors.
What HubSpot does behind the scenes to optimize your website
(Image: Pexels)
Secure Socket Layer (SSL)
Since October 2017, Google Chrome has been flagging pages with forms that are not SSL-enabled as "not secure." Chrome has over 60% of the browser market share, so this warning impacts millions of websites and visitors across the web.
HubSpot CMS Hub includes Standard SSL for all websites, landing pages, and blogs hosted on HubSpot. This ensures that your user data remains safe and that Chrome does not display a warning when visitors load your pages.
JavaScript Minification
While spaces, line breaks, and comments dramatically ease editing and reading coded files, they take additional time for browsers to read. Smaller JavaScript files result in a smoother and quicker user experience for your website visitors. jQuery, the popular Javascript library, nicely illustrates how impactful minification is: minified jQuery is 86k compared to the unmodified version at 271k.
HubSpot will automatically remove any unnecessary spaces, line breaks, and comments from your design manager's JavaScript files to ensure browsers read them and they are delivered as quickly as possible.
CSS Combining
HubSpot also automatically minifies CSS (removes unnecessary spaces and line breaks) and combines all the CSS files on a page into one CSS file. This results in minimal HTTP requests and the speediest delivery and reading of CSS on your website.
After combining the CSS files, HubSpot CMS sends them using HTTP/2 Push, so browsers can start downloading all the CSS needed before the page’s HTML has finished loading.
The browser and Server Caching
Every time a visitor requests a page, their browser makes a complex string of requests. These requests hit various servers which make complex calculations and routes to serve visitors their files.
HubSpot automatically caches pages and files on both the server and browser level to ensure the quickest delivery of all page assets to your website visitors. When your page or any dependency of your page (such as a template or module) changes, we automatically expire the server caches for that page.
Server caching is especially effective for mobile website visitors.
Rewriting domains
Each additional domain used on your website incurs an additional DNS lookup and connection. The fewer domains you use, the faster your website will load.
With HubSpot's CMS Hub, the URLs of assets referenced in CMS pages such as files, CSS, and images are automatically re-written to match the domain of the current page when possible.
Text Compression
Before they are served to browsers, text-based files such as HTML, CSS, and JS are all compressed using gzip. Compression can reduce file sizes by up to 10x. While minification speeds up the parse time of CSS and JS files in the browser, compression gets those files to the browser faster.
If you're familiar with programming you should check out our Fields JS tool that makes life easier for developers.
Image Optimization and Automatic Image Resizing
When you upload images to HubSpot’s file manager, it automatically optimizes them for you. HubSpot strips JPEGs and PNGs of their metadata (and other things that make images bigger). HubSpot may serve images in a different encoding if it can represent them as smaller PNGs than JPEGs.
As HubSpot CMS renders a page, it automatically resizes images, looking for images that have width or height attributes. If those images are hosted on the file manager, we include width and/or height path segments to the image's URL. If the URL has a height or width guideline, HubSpot CMS intercepts that request and attempts to resize it to the specific dimensions. Browsers are given multiple options for the image resolution to load, so your images will look crisp on standard and high-resolution displays.
(Image: Pexels)
Accelerated Mobile Pages (AMP)
Accelerated Mobile Pages (AMP), is a mobile-specific page format that loads content nearly instantaneously. You can enable AMP on your HubSpot hosted blog posts. Read more in HubSpot's knowledge hub to learn how.
Things you can do to optimize your website
Image optimization
With images, the most important thing you can do is optimize them for the web. Image optimization is very much a shared responsibility among both content creators and developers.
- Use fewer images per page.
- Use Scalable Vector Graphics (SVGs) where possible. SVGs can scale in size infinitely without losing quality.
Use lazy load images
Lazy loading is a technique used by web pages to optimize load time. With lazy loading, a web page loads the required content first and waits to load any remaining page content until the user needs it. Lazy loading reduces the time it takes for a web page to open because the browser only loads a fraction of the content on the page at a time.
There are different ways to add lazy loading to your site, depending on whether you want to interact directly with your website’s code. Some content management systems might also apply lazy loading to your web pages automatically, like HubSpot. Make sure img elements contain height and width HTML attributes. This makes it easier on browsers during render time and also makes it so that HubSpot can intelligently add a srcset for you.
Related article: Improve your page speed with lazy loading images
Load jQuery in the footer
jQuery is a popular JavaScript library that is included by default on all HubSpot-hosted websites. We now have an option to include jQuery in the footer (as opposed to the head HTML) of your HubSpot-hosted websites. Loading jQuery in the footer will allow your page to render without pausing to read and load jQuery until it’s needed, ensuring that visual code, like HTML and CSS, renders first.
Only attach CSS and JavaScript files that are needed
Try and attach and use JavaScript and CSS files on pages or templates that use them because Google has a coverage tool that analyzes how much requested CSS and JavaScript are used on a page. Remember, the less JavaScript and CSS that lives on a page, the faster your visitors experience will be.
Minimize HTTP requests and cross-origin HTTP requests
Avoid making too many HTTP requests for resources on your pages. Do your best to include as few files as possible on your website (we automatically combine CSS files into a single, combined-CSS file). Cross-origin HTTP requests also slow down pages and rely on external services performing in an efficient and reliable manner. Host everything you can within HubSpot to avoid fetching external and cross-origin resources on your pages.
Making your site performance a priority
We hope this blog has provided you with a clearer idea of how Content Hub delivers the best experience to your visitors by quietly helping you to optimize your business website. Remember - prioritizing your web performance is the key to creating an exceptional online experience for your customers that will help you increase retention and customer loyalty.
Interested in learning more about the HubSpot Content Hub and how HubSpot's other features could be helpful for your business? Download our free "Complete guide to using HubSpot.