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
- Browser and server caching
- Domain Rewriting
- Brotli compression (with fallback to GZIP Compression)
- HubSpot Blog posts support AMP
HubSpot Image Optimization
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
HubSpot Coding DO’s and DON’T’s
DO optimize every module on your site.
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
- 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.