Hello everyone,
I would like to ask for your advice on how to optimize our webapge, it takes too long to load.
We already hosted the video on Hubspot instead of youtube , optimized pagesto actual size. I wonder what would we still need to do. Too make it load faster
This is our website, https://www.besocialscene.com/
Thank you all
Hi @chrissa0000,
took some tests with Google Page Insigts and Seobility
Here the results:
Google Insight Result
Seobility Result
Looks that:
- you have to many different CSS and JS files
- your folder structure is not optimized
- your images are not optimized
- you have some/many unneeded html tags
I assume that the sum of those (and propably other) issues is the answer to the slow loading speed.
Here some things you can try:
CSS/JS issues:
don’t write page-specific CSS/JS stuff to the page directly.
I would recommend that you give your site a specific ID and transfer your specific CSS to the main CSS file.
Example:
You give your page the ID “Events”. Then add everything what’s a page specific CSS style to your main.css like this
#events .SOME-ELEMENT{
---
some-styling
---
}
If you have many custom JavaScript code/files, add it as the last element in the template, but first look at the footer(of it’s a global module) - most likely there are some JavaScript code/files to.
Number 1 Rule for JavaScript codefiles: They are loaded (most likely) as the last element of the page. HTML+CSS comes first. (There are some exceptions)
You should also consider to minify/compress those custom files. Normally HubSpot does this automaticly but sometimes it can’t do it. So look for some CSS / JS minifier/compressors and compress your files.
But:
Make a backup of them and store them somewhere safe(on your local maschine for example) so that you can restore them if needed.
Folder structur/images:
Your slider images and image paths contains “blanks”. This is very risky and “sub-optimal” because:
- blanks get translated to the unicode “%20”. That’s not really good. The longer the whole name the longer it takes to find/load the image.
- you have named the images and folder with capitals - it’s not a big deal but neither optimal
My recommendation:
replace all blanks with “dashes” and rename to lowercase
You have it something like this:
../My super Awesome Folder/Look ma I got an image for the page.png
Try something like this
../my-super-awesome-folder/look-ma-i-got-an-image-for-the-page.png
You should also consider to keep the namings as short as possible
../image-folder/super-image.png
HTML Tags
Look in every rich-text module/every module where you can add text in the “code-view”(</>-symbol) for empty unneeded html code.
I’ve seen often that clients paste their text straight from - let’s say - MS Word. That’s quite a bad thing, because this will paste the whole Word text formatting into HubSpot and you need to clean it afterwards.
Of course you can clean it with the wysiwyg-editor(What-you-see-is-what-you-get-editor;the normal look of the rich-text module) but this can very exhausting and sometimes the’re gonna be leftovers.
best solution(i.m.o):
- If you copy a text from Word(or another text programm) paste it into a “non-rich-text” editor like Editor(Windows) or TextEdit(OSX) and copy/paste it from there into HubSpot
You should also look in the code-editor view for empty code-snippets like
<span>%nbsp;</span>
and/or
<strong>%nbsp;</span>
those things are completly unnecessary and should be replace by a “blank”.
If you stumble upon a
%nbsp;
replace it with a blank. This “code” is the blank in “computer translated language” but has a downside - if a computer/browser reads it - he doesn’t break the line if it’s a long term. Sometimes this can be the root of all evil 
best
Anton
Hi @chrissa0000,
One thing you can try to do is move all your JS scripts to the footer (with exception of those like tag manager). This would allow the site to load up without having to wait on some of the JS files to be rendered. HubSpot does offer an option to load jquery in the footer as well (not sure how this would affect your site look while loading in the footer, but worth a try).
I would also look into removing the socialprove.com JS you have as it looks like your plan expired (there is a message in the console about this).
It also looks like fullcalendar.js is having an issue as the console is showing this:
Attempting to call a FullCalendar method on an element with no calendar.
Overall, a reduction in the amount of JS calls would be ideal for speeding up your site.
Some other things from a HS Build Perspective:
You can also look at replacing your calendar JS and simply use a custom module (mixed with HubDB) to create a calendar of events listing instead of showing a monthly view (as it looks like right now you don’t have many events monthly).
You can also look into creating a custom module for your “What’s New” and “Latest Videos” Section so you don’t have to rely on coding HTML or HubL to make the items every time.
Lastly, from a UI/UX perspective:
Your Mobile site needs some CSS love. The most minimum width of a screen is going to be around 330px. At this breakpoint, your timer is running off the page (the S for seconds is missing). Likewise, your image CTA’s are reduced and it makes your text almost unreadable.
There also appears to be some spacing issues which ends up breaking the flow of the site overall.
I would also recommend looking into your typefaces as you have many different sizes going on throughout your page. Also, your color choices might need to tweaked a bit as from an accessibility standpoint, some of your color combos (background and text color) fail minimum accessibility standards.
Hopefully, this helps point you in the right direction in optimizing your site.
-AJ
-----------------------
AJ LaPorte
www.wsol.com