Page Speed Optimization

What is page speed optimization?

Page speed optimization is the process of optimizing a website to ensure that it loads quickly and efficiently.

This includes reducing server response time, compressing files, using browser caching, minifying HTML and JavaScript, optimizing images and leveraging content delivery networks (CDN).

Optimizing page speed improves user experience, reduces bounce rates and increases search engine rankings. It is essential for websites to achieve fast loading speeds in order to remain competitive.

Why is page speed optimization important?

Page speed is an important factor for website success and user experience. It affects how quickly a page loads, which can impact user engagement, conversion rates, and search engine rankings.

Page speed is influenced by many factors, such as the size of web pages and their assets, server configuration, and code efficiency.

By optimizing these elements, website owners can ensure that their sites load quickly and deliver a seamless experience to users.

What does HubSpot handle for you?

HubSpot's CMS automatically handles many common performance issues for you. These optimizations include:

• CDN with Image optimization and automatic WebP conversion
• HTTP2
• Javascript and CSS minification
• Browser and server caching
• Prerendering
• Domain Rewriting
• Brotli compression (with fallback to GZIP Compression)
• HubSpot Blog posts support AMP

What page speed optimization features are included in the Generator theme?

The Generator theme uses the following best practices to ensure that your website's page speed is optimized for the best user experience possible.

No bulky JavaScript libraries

The Generator theme takes page speed optimization to the next level by utilizing Vanilla JS instead of relying on bulky JavaScript libraries like jQuery. By keeping the amount of code required to run your site to a minimum, the Generator theme ensures your website loads lightning fast.

Optimized CSS & JavaScript loading

HubSpot automatically minifies the CSS and JavaScript included in the Generator theme, and in addition, the Generator theme loads all CSS and JavaScript just before the closing </body> tag, which is a page speed optimization best practice to prevent render blocking.

Optimized module-level code loading

To optimize page load time, the Generator theme's module-level JavaScript is designed to load only when necessary. This means that JavaScript specific to a module will only load if and when that module is actually present on the page, ensuring that only the JavaScript that is needed is loaded.

Lazy loaded images

Lazy loaded images are images that are loaded only when the user scrolls down to the section where they are displayed which helps to improve page load time by reducing the number of resources loaded at once. The Generator theme's images are all set to lazy load by default to improve page speed.

Autoplay video optimization

The Generator theme offers a video background feature that can elevate the look of your website. However, auto-playing videos can slow down your page speed and cause issues for users with limited data or slow connections. To ensure optimal performance, the Generator theme automatically disables auto-play on mobile devices and displays a fallback image instead. This allows your website to look its best without compromising on speed and accessibility.

Web Accessibility

Web accessibility plays an important role in website performance optimization. When websites are accessible, they are easier for users to navigate and use, which can improve engagement and conversion rates. Additionally, accessible websites are often more compatible with different devices and platforms, which can improve overall performance.

The Generator theme is optimized for web accessibility. This means that the theme includes features and design elements that make it easier for users with disabilities or limitations to navigate and interact with the website. For example, the theme includes a high contrast mode and keyboard navigation support, which can be helpful for users with visual impairments or mobility issues. Additionally, the theme includes alt text fields for images, which can make the website more accessible for users with visual impairments who use screen readers.

What can you do to optimize your site for speed?

Although the Generator theme for HubSpot CMS already includes numerous page speed optimizations, HubSpot customers who build their own sites can further enhance their page loading speed by following these instructions.

Optimize your images

Optimizing images is important for increasing page load time because large images can significantly slow down a website. When images are optimized properly, they can be compressed without sacrificing quality, resulting in smaller file sizes and faster load times.

Although HubSpot's CMS automatically converts images to WebP format, there are additional steps you can take to optimize your images for page speed. You can use image compression tools to reduce the file size of your images, resize your images to the appropriate dimensions, and choose the correct file format (such as JPEG or PNG) depending on the type of image. Additionally, you can maintain the lazy loading techniques included in the Generator theme to ensure that images are only loaded when they are actually needed, and not all at once when the page is first loaded.

Prevent “Cumulative Layout Shift” (CLS)

CLS is a website performance metric that measures the visual stability of a website by calculating the amount of unexpected layout shift that occurs during the loading process. In simpler terms, it refers to the degree to which visual elements on a webpage move around as the page loads.

To reduce Cumulative Layout Shift, you can follow several best practices, including optimizing image and video sizes, setting definitive dimensions for media elements, and avoiding third-party scripts that can impact the layout of the page.

Optimize (or eliminate) HubSpot forms

We understand that HubSpot forms are an important tool for collecting user data, but if page speed is of utmost importance then we recommend removing them from the page to improve page load time.

Loading a HubSpot form on a page can add extra resources that need to be loaded, which can slow down the page. If you need to include a form on your page, you can try to use a simple form with only the necessary fields to reduce the amount of data that needs to be transferred. Additionally, you can consider using a pop-up form that only appears when the user clicks a button or takes a specific action, rather than having the form loaded on the page from the start.

Optimize the HubSpot’s Live Chat widget

Adding the HubSpot live chat widget to your website can provide an easy way for customers to get in touch with your business. However, it's important to consider the impact on page speed when adding this feature.

HubSpot's live chat widget is designed to load asynchronously, meaning that it won't block other resources from loading on your page. Additionally, the widget is hosted on HubSpot's servers, which can help to reduce the impact on your own server's performance.

To further optimize the performance of the live chat widget, you can take the following steps:

• Use a minimized version of the widget: HubSpot provides a minimized version of the live chat widget that can help to reduce the amount of screen real estate that the widget takes up. This can be especially useful on mobile devices, where screen space is limited.
• Use a delayed load: If you're concerned about the impact on page load time, you can use a delayed load for the live chat widget. This means that the widget won't load until the user has spent a certain amount of time on the page, or until they've scrolled down to a specific section.
• Test the impact on page speed: It's important to test the impact of the live chat widget on your page speed to ensure that it's not causing any significant slowdowns. You can use tools like Google PageSpeed Insights or GTmetrix to analyze the performance of your website with and without the live chat widget.

By taking these steps, you can ensure that the HubSpot live chat widget is a useful tool for your website visitors without negatively impacting their experience on your site.

By implementing best practices such as image optimization, lazy loading, and minimizing bulky JavaScript libraries, website owners can ensure that their sites load quickly and smoothly for users. HubSpot's CMS offers automatic handling of many common performance issues, but website owners can take additional steps such as optimizing HubSpot forms and the Live Chat widget to further improve page speed.

By prioritizing page speed optimization, website owners can enhance user experience, reduce bounce rates, and ultimately increase their search engine rankings and competitiveness in the online marketplace.