topic Re: Improving mobile site speed on HubSpot CMS in CMS Development

Improving mobile site speed on HubSpot CMS

lfr — Thu, 06 Jan 2022 14:23:40 GMT

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

Re: Improving mobile site speed on HubSpot CMS

webdew — Fri, 07 Jan 2022 08:36:35 GMT

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.

Re: Improving mobile site speed on HubSpot CMS

lfr — Fri, 07 Jan 2022 09:14:31 GMT

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

Re: Improving mobile site speed on HubSpot CMS

webdew — Fri, 07 Jan 2022 12:48:06 GMT

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.

Re: Improving mobile site speed on HubSpot CMS

lfr — Fri, 07 Jan 2022 12:52:48 GMT

Hi @webdew ,

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

Best regards,

Laure

Re: Improving mobile site speed on HubSpot CMS

webdew — Fri, 07 Jan 2022 12:53:59 GMT

Sure @lfr ,

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

Thanks and Regard.

Re: Improving mobile site speed on HubSpot CMS

lfr — Tue, 11 Jan 2022 16:46:12 GMT

Hi @webdew ,

Thanks a lot for your answer 🙂

Re: Improving mobile site speed on HubSpot CMS

Anton — Fri, 14 Jan 2022 16:49:11 GMT

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