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 your business website's speed and performance even further.
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.
That is why we care.
To speak about how iGoMoon can help you optimize your business website, get in touch with our space agents.
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.
What HubSpot does behind the scenes to optimize your website
(image source: 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 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.
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.
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.
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.
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.
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 makes 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 source: 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
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.
See also: Improve your page speed with lazy loading images
Load jQuery in the footer
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 CMS 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.
Get in touch with our space agents for more helpful tips and resources.