In this series of articles on website optimization, we’ve established how important it is to keep your website running smoothly. Search engines care about your website performance, so do your users, and so should you.So far, we have discussed the key performance indicators for website performance and how to measure and optimize them. We’ve also covered some of the most common problems with website performance and how to fix them. In this article, we will explore how the HubSpot CRM gives websites built on its platform a significant advantage when it comes to speed and performance.
The HubSpot Advantage
HubSpot boasts a number of built-in features that set your website up for success right out of the box including:
- CDN with Image optimization and automatic WebP conversion
- HTTP2
- Javascript and CSS minification
- Browser and server caching
- Domain Rewriting
- Brotli compression (with fallback to GZIP Compression)
- HubSpot Blog posts support AMP
HubSpot Image Optimization
WebP Conversion
WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.
Easily Replace Image Files
One way that HubSpot makes optimizing images much easier than other platforms is the ability to replace an image file without having to update the image tags across all pages. Once you’ve cropped and compressed images that need to be optimized, you can simply replace them in the File Manager following the instruction below.
To replace a file with an updated version:
- In your HubSpot account, navigate to Marketing > Files and Templates > Files.
- If you have a Marketing Hub Starter account, navigate to Marketing > Email > click the More tools dropdown menu in the left sidebar menu, and select File Manager.
- Click the name of the file.
- At the bottom of the right panel, click Replace.
- Browse your computer hard drive and select a new file.
Keep in mind that the old file may be cached for up to two hours after it is replaced, so you may not see the file update immediately. Allow some time before retesting the performance.
Image Lazy Loading
HubSpot has several built-in options for lazy loading, which are outlined in this article from the HubSpot blog. Lazy loading is a technique used by web pages to optimize load time. This type of loading lets the web page render only required content at first and waits to load any remaining content when the user needs it. This 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.
HubSpot Code Optimization
jQuery is a fast, small, and feature-rich JavaScript library that is used by many developers to create websites. HubSpot allows you to include jQuery across your website through your settings, but many developers include it in their theme or module code. Make sure that you only require jQuery once throughout your entire site.
One thing you won’t have to worry about is minifying your code because HubSpot does that for you. While other platforms require developers to use extra plugins or advanced development workflows to minify CSS and JavaScript, HubSpot does this automatically with all the assets it renders on a page.
HubSpot Coding DO’s and DON’T’s
DO optimize every module on your site.
Code can be included in a HubSpot website in a variety of ways, and it’s important to keep track of where and when that code executes. For example, each page, module, and template in HubSpot can have its own unique code, including HTML, CSS, and Javascript.
When optimizing module code, you’ll need to make sure that it follows these best practices:
- All CSS is wrapped in a “require_css” tag
- All javascript is wrapped in a “require_js” tag
- If it’s not needed to render above the fold content, add position=”footer”
- If it relies on code that takes longer to load, add “defer”
DON’T use the font-family property outside of your main stylesheet.
Font families that appear in Advanced CSS areas, such as those located in HubSpot CTAs, will automatically require that font’s stylesheet in the header. This can cause duplicate copies of this font to be loaded if this font is used in the regular stylesheets or if the CTA is used more than once on a page. Instead, add font-family CSS declarations to your main CSS files.
To put it simply: slow websites turn visitors away.
A high-performing website that loads fast and looks great is essential to a positive user experience on the web. In 2019, the average amount of time a web page takes to display visible elements, or the Average Speed Index, trended around six seconds. And even this span of time tests our patience. Get the detailed checklist that we use to optimize our HubSpot sites and get an A every time.
