Improving mobile site speed on HubSpot CMS

[lfr]

Hi all,

I hope that someone can help me. 

We have built our website on HubSpot CMS and we are now facing issues with our site speed on mobile. On the simplest page of our website, we get a score that doesn't go above 55.

I contacted HubSpot support to help me with that, and we've explored a couple of elements on this page, to see what would have a positive impact. Those did not have any impact on this: reducing the number of CSS and JS, working on the images, sourcing the google font on Hubspot rather than on the API (which is not possible in our configuration)  and load the JQuery on site's footer (which caused errors). 

One of the last conclusions that I got was that the HubSpot scripts have an impact on the speed and that there isn't anything I can do about that. 

Do you have best practices that I can implement and that would improve my site's speed on mobile? Have you faced a similar situation and improved your site's and page speed successfully?

Thank you, 

Laure

[IMakkar]

Hi,

Improving mobile site speed on a HubSpot CMS website is essential for enhancing user experience and boosting SEO. Here are some actionable steps you can implement:

1. Optimize Images

   • Compress images before uploading using tools like TinyPNG or similar.
   • Use modern formats like WebP to reduce file size without sacrificing quality

2. Minify JavaScript and CSS

   • Minimize and combine your CSS and JavaScript files to reduce load times. HubSpot’s Design Manager provides easy configuration for this.
   • Defer non-critical scripts until after the page has loaded.

3. Lazy Loading

   • Enable lazy loading for images and videos below the fold. HubSpot supports this natively for most assets.

4. Leverage HubSpot’s CDN

   • Ensure your assets are being served through HubSpot’s integrated CDN for faster global delivery.

5. Test and Monitor Performance

   • Utilize tools like Google PageSpeed Insights or HubSpot’s Website Grader to analyze performance and identify areas for improvement.

For additional optimization, you might consider tools that enhance core web vitals. One such option is the Website Speedy app, designed to optimize your website’s performance with minimal effort. The app offers a 14-day free trial, allowing you to test its effectiveness. Learn more about it here:  https://ecosystem.hubspot.com/marketplace/apps/website-speedy

[lfr]

Hi @webdew ,

Thanks a lot for your answer 🙂 

[webdew]

Hi @lfr ,

For increasing the speed of the page you can opt the following points

• minify the js and CSS files added on the site
• Use the lazy load option given by the HubSpot on images  
• For fonts, use google fonts instead of custom fonts 
• For Videos, use the external video URL for instance youtube instead of internal videos
• If you have some sections where you can remove the js and could use some other option then it will be a good approach to increase the speed. 
  
  Hope this helps!
  If we were able to answer your query, kindly help the community by marking it as a solution.
  Thanks and Regard.

[lfr]

Hi @webdew , Thank you for your answer! 

- We already tried to minify the JS and CSS files but that didn't have any impact. Also because the JS used are linked to the HubSpot elements and we can't reduce them.

- Yes, the lazy load is a great option that we use

- We use a google font, which we were advised to store locally instead of using the API, but we couldn't implement this

- For videos, thanks for the tip

- For the JS thanks for the tip 🙂 

Do you, by any chance, have any tips specifically for mobile? Because our speed is good on Desktop, but it is the mobile version that is a bit low. 

Best,

Laure

[Anton]

Hi @lfr, 

do you have a default theme, one from the marketplace, or did you create a custom one by yourself?

just asking because each option has it's benefits and drawbacks in case of optimization. 

for instance - you can't access needed parts/files in default ones - unless you duplicate them. 

To host your google fonts locally(only if you can edit all files in your theme):

• download the fonts 
• upload your fonts to a folder(recomended a new one without spaces and everything lowercase) in HubSpot filemanager
• open the theme-override.css(maybe it's called differently) and place a @font-face import at the very top with the links to the files in the filemanager.
• After this search for something like {% set font = ... %} at the top of the css file and delete it(or better: comment it out;with HubSpot comment function)
• search the css for something like {{ font }} and replace it with 'open sans'(the name in the font-face)
• sve the file
• navigate to your themes fields.json file of your theme
• search for the font settings
• look for "load_external_fonts" and set them to "false"
• save the file
• the fonts should now get loaded from HubSpot

best, 

Anton

[webdew]

Hi @lfr ,

The tips we shared earlier are for both desktop and mobile. And another tip is: if your website is working on the old version of the template in Hubspot then for improving the site speed go for the Hubspot boilerplate theme instead because the folder structure of the HubSpot boilerplate theme is highly optimized and it will improve the site speed. you can try the speed by building up 1 to 2 pages in HubSpot boilerplate.

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

[lfr]

Hi @webdew ,

Ok, thanks a lot for this new tip! We will try to apply it 🙂 

Best regards,

Laure

[webdew]

Sure @lfr ,

If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regard.