CMS Development

FurqanAli
Participant

How to optimize hubspot website related to javascript for mobile based on google page speed report?

SOLVE

I'm facing issues in mobile optimization such as reducing unused javascript and reducing initial load time. Can someone please guide me how I can improve that specifically for mobile? The following steps are taken already:

- optimized images for mobile
- used conditional rendering in modules for javascript and css using hubl functions.

- enabled lazy loading for different images.

Thanks a lot

0 Upvotes
1 Accepted solution
Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

How to optimize hubspot website related to javascript for mobile based on google page speed report?

SOLVE

@FurqanAli 

Hi again 😉

Reducing unused JS is basicly what is says. Any JS you load that is not used, is "useless" and should be avoided. You can do this by setting JS up for each module, so it's only loaded when the modules is loaded itself.

 

Other JS are often scripts from HubSpot. Have a good look at what features you are using form HubSpot and if it's really nessesary. For example, a newsletter sighup in the footer of a website is barely used. If you remove that one, the forms.js file will not be loaded if you don't have any other forms. And the HubSpot chat should be delayed with 7 seconds to reduce initial JS load on page load.

That last bit, reducing initial load time is mainly focued on everything thats is loaded right after you go to a URL. You should remove/delay/defer every script, images and css file that is not nessesary above the fold or to make your webpage work right away.

 

For example, a slider that is below the fold does not have to "work" until you get there. If you only load that JS when the slider is on the webpage, and you defer that JS to the bottom, the JS is loaded after everything above the fold is done. If the slider has images, lazyload the images until it is in visible area of your window and make sure you set low priority hints for every image on the slider besides the first one, to make sure they are loaded later than the first slide.

I hope this helps a bit!

View solution in original post

4 Replies 4
Sjardo
Solution
Top Contributor | Elite Partner
Top Contributor | Elite Partner

How to optimize hubspot website related to javascript for mobile based on google page speed report?

SOLVE

@FurqanAli 

Hi again 😉

Reducing unused JS is basicly what is says. Any JS you load that is not used, is "useless" and should be avoided. You can do this by setting JS up for each module, so it's only loaded when the modules is loaded itself.

 

Other JS are often scripts from HubSpot. Have a good look at what features you are using form HubSpot and if it's really nessesary. For example, a newsletter sighup in the footer of a website is barely used. If you remove that one, the forms.js file will not be loaded if you don't have any other forms. And the HubSpot chat should be delayed with 7 seconds to reduce initial JS load on page load.

That last bit, reducing initial load time is mainly focued on everything thats is loaded right after you go to a URL. You should remove/delay/defer every script, images and css file that is not nessesary above the fold or to make your webpage work right away.

 

For example, a slider that is below the fold does not have to "work" until you get there. If you only load that JS when the slider is on the webpage, and you defer that JS to the bottom, the JS is loaded after everything above the fold is done. If the slider has images, lazyload the images until it is in visible area of your window and make sure you set low priority hints for every image on the slider besides the first one, to make sure they are loaded later than the first slide.

I hope this helps a bit!

FurqanAli
Participant

How to optimize hubspot website related to javascript for mobile based on google page speed report?

SOLVE

thanks a lot, delaying chat has improved the speed alot.

FurqanAli
Participant

How to optimize hubspot website related to javascript for mobile based on google page speed report?

SOLVE

thanks a lot, @Sjardo for taking out time to share your insights. Also, I have set a condition on modules and also enabled lazy load on different images. Regarding the chat widget can you please let me know how we can delay the chat widget? 

thanks a lot once again.

0 Upvotes
Jaycee_Lewis
Community Manager
Community Manager

How to optimize hubspot website related to javascript for mobile based on google page speed report?

SOLVE

Hi @FurqanAli 

Great question. I'm happy to help 😊 Let's see if our community experts have any thoughts.

 

Hey, @Chris-M do you have an insight here?

 

Thank you! – Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Upvotes