Optimizing your CMS Hub site for performance
- Professional or Enterprise
- Professional or Enterprise
Great User Experience (UX) is a factor of content quality, speed, security and accessibility. Optimizing for these generally also improves Search Engine Optimization (SEO).
Better performance is all about providing a better experience for end users. Achieving better performance is all about solving for your individual site's bottlenecks.
It's easier to build from a great foundation that was built with performance in mind, than trying to fix performance issues later. A metaphor, building a fast car from the ground up, is easier than buying a slow car and trying to make it fast.
When building from the boilerplate you know that without any code you've added, it achieves those scores. That means you can focus your attention on the code you added on top of the boilerplate.
Most web performance optimization techniques and best practices are not HubSpot specific. This is because most website performance bottlenecks are not HubSpot specific.
Most performance issues fall into a couple of categories, rendering and loading.
- Loading performance is the efficiency of transferring all of the files needed for your web page to the user's browser.
- Rendering performance is the efficiency for the browser to take everything it downloaded and display the end result to the user.
Images are prevalent on almost every page on the web. Images are usually the largest files on a page. The more images, and the larger the images, the longer your page will take to load. Animated images such as gifs and animated webp, also take up more space than non animated images of the same size. Some image formats also are more performant than others, and better for certain scenarios.
- The most important thing you can do is optimize your images for the web. Image optimization is very much a shared responsibility among both content creators and developers.
- Use fewer images per page.
- Use the right image format for the scenario.
- Use Scalable Vector Graphics (SVGs) where possible. SVGs can scale in size infinitely without losing quality. Inlining your SVGs makes sense when you are making animations. In static graphics creating an SVG sprite sheet or simply treating it as a normal img element, or background image is typically better for performance.
- Intelligently lazy load images.
- Make sure
imgelements contain height and width HTML attributes. This makes it easier on browsers during render time and also makes it so HubSpot can intelligently add a
srcsetfor you. Not only does HubSpot help optimize, but web browsers can intelligently optimize for cumulative layout shift when you provide width and height.
- Use resize_image_url to force images to be resized to a certain resolution.
Video backgrounds can certainly set a website apart. Unfortunately they come at a cost. Video backgrounds are often used for website headers. When a video auto-plays, it means the browser needs to start loading the video right away. This can be especially problematic for users on slower connections or using cellphone data.