How do I disable JavaScript and CSS render blocking

[#1]

I'm trying to sort out the page speed issues we're having with the template we bought for our website.

Firstly I'd like help explaining how I fix these 22 items that Google's flagged, but secondly, what will that do to the page? How will it affect the current look/functionality of the template? (I'm not a developer - I just have very basic HTML/CSS knowledge, I'm terrified I'm going to break the template)

www.spitfireinbound.com

Screen shot of Google's page insights:

[#2 · Accepted solution]

Hi @LaurenLokker, Here are some steps which you may need to apply to optimize your HubSpot website.

1) Optimize website image resources: Website name tinypng is used to optimize images, you just need to upload your image and download compressed image. Here is the reference link for image Optimize image

2) Minified website javascript resources: Website name javascript-minifier is used to minified your javascript code, you just need to input your javascript code on the left panel and get the minified javascript code from the right panel, here is the reference link JS Minify

3) Minified website CSS resources: Website name cssminifier is used to minified your css style sheet code, you just need to input your javascript code on the left panel and get minified css stylesheet code from the right panel, here is the reference link CSS Minify

Note: As many as CTAs are available on your website, the website will request for individual javascript for each CTA as you attached screenshot many requests are generated for javascript file, i.e https://js.hscta.net/cta/current.js, As per our knowledge of HubSpot we can't handle the render behavior for the CTA javascript.

[#3 · Accepted solution]

Hey @LaurenLokker,

This is a question I get all the time from clients on the COS. Unfortunately a lot of what you called out is part of the core COS coding and can't be modified. Here's some more info on it: https://knowledge.hubspot.com/articles/kcs_article/cos-general/how-can-i-optimize-my-hubspot-site-fo...

[#4 · Accepted solution]

@LaurenLokker,

This is a very common question with a dissapointing answer.

consider first that in order for jquery scripts to work, jquery need to load. Now consider how cta's and forms work in hubspot, the scripts are called inline as the cta or form is loaded by the page. If jquery was loaded in the footer than your ctas and forms wouldn't work. This is actually pretty common with all content management systems. I think Hubspot runs a little fast and loose with script loading but for the most part they do what they can. 

The parts of the page that you have found are not editable are located in the header and footer include tags that are required to create a page. If you have ever tried to publish a coded page without these include tokens then you will have seen the error about them beign required. They aren't editable because most all of what is pulled in by these tokens is required for hubspot to work so removing them would be detrimental to your sbuscription benefits. 

You shouldn't need the cta or form script to load for each instance though and it looks like it is... that might be something to bring up with hubspot as I beleive that happens with everyone. You can swap cta modules/tokens for embed codes and strip the call to the script for all of them and maybe place it in the head or footer of your page but I haven't tested that so you would have to experiment. 

I get hired to optimize hubspot sites all of the time and I can tell you that while you are being flagged for above the fold scripts it is usually the css and images that get you. Most sites are build using Hubspots default frame work css, and custom css is placed on top of that. Even worse, in alot of cases (usually with purchased templates) I have seen the default framework css under the evast theme css, under the purchased theme css, under the theme customization css. That is thousands of lines of unused or redundant css that gets loaded and read by the browser. Fixing it is a nightmare because you have to go through the css and transfer only what is needed into a new file.

Images are a monster resource hog to. I wrote a blog about this here. There are step by step instructions on how to fix a image as well. Bad images are an epedemic on the internet, Always optimize your images!

The best you can do to optimize your scripts is to keep a global script file that contains scripts needed for all pages, then page specific script files. don't dump all of your javascript into one global file because even if the script isn't relavant to the page it is still read and attempted to process. 

It takes alot to optimize a site correctly and the best way to do it is as you build it. Going back after the fact is a nightmare. I make a living off of it but it is a nightmare. The only fault that Hubspot holds in this is that they make building a website deceptively easy so anyone can go in their and play developer without even being aware of the consequences. The errors you get are not Hubspot specific, you will get them with WordPress, Joomla, or any content management system when you template and content is properly optimized, and in situations where a script is required in the head or etc. 

Here's a secret though: Google can't pass it's own page speed checker. go to any of googles thousands of pages and run it through the checker. I show this to cients all of the time. 

Here's another secret: If you are using Hubspot then you aren't in the SEO game. Yes you should 100% optimize your site, and yes search engine rankings are always important, and your site should always load within a second at least, but you are in content marketing. You can get to the top of google with any free-ware cms or even with plain old coded files. If you paying for Hubspot you should be putting your efforts into creating awesome content, campaigns, and workflows. If I can't get a client focused on content over SERP then I put them in WordPress with Inbound Pro then pass them off to some old school SEO company. 

[#5 · Accepted solution]

Thanks Jsum, this is really helpful to know.

[#6 · Accepted solution]

You can do something like that:

{{ standard_header_includes|cut('https://static.hsstatic.net/jquery-libs/static-1.4/jquery/jquery-1.11.2.js')|cut('https://static.hsstatic.net/content_shared_assets/static-1.4049/css/public_common.css')|cut("hsjQuery = window['jQuery']") }}
...
{{ standard_footer_includes|cut('https://static.hsstatic.net/content_shared_assets/static-1.4049/js/public_common.js') }}

to remove .js and .css which you don't need.

And this is my score, which I have finally achived on the HubSpot page - jointacademy.com.

There is plenty of problems with HubSpot if you want to build a good website. You need hacky solutions and there are still issues which you can't solve, btw you can't use service worker. ;/

[#7]

@PatrykJ, I bookmarked this, excellent solution.

Do you know if this interferes with forms or ctas? They need jquery in the header to load correctly as far as I know, unless maybe a load delay function is written.

[#8]

Thanks.

I am using HubSpot contact form on few pages and it's working if I have the form js code (which is not deffered or async) before jquery and then not deffered jquery but in the last line of the code that it shouldn't be render blocking:

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</body>
</html>

You can try this or different, similar solutions and check which is the best for you.

[#9]

Where / how have you implemented the code? I can't get it to work

{{ standard_header_includes|cut('https://static.hsstatic.net/jquery-libs/static-1.4/jquery/jquery-1.11.2.js')|cut('https://static.hsstatic.net/content_shared_assets/static-1.4049/css/public_common.css')|cut("hsjQuery = window['jQuery']") }}
...
{{ standard_footer_includes|cut('https://static.hsstatic.net/content_shared_assets/static-1.4049/js/public_common.js') }}

[#10]

... but this is not a site on hubspot...

[#11]

There's a lot of misinformattion in this thread.

Firstly there's a toggle to move jquery to the footer in content settings.

Minifying and combining of CSS and JS files is automatic HubSpot does this for you. There are very specific rare circumstances that will cause CSS to not minify, and it has to do with having certain things in your code.

You shouldn't put script tags in your head, if you need to call a script tag use require_js instead, it will load it in the footer.

Do not use the cut method to remove things from your header and footer includes, that's not a great idea and prone to breaking your site.

the public common js If i remember correct powers HubSpot's nav menu js which makes them automatically a11y friendly.

Cutting the layout css you do so at own risk, hubspot modules may not display correct. and the page editor may have problems.

When it comes to images in your HubSpot site, HubSpot actually does a great job at compressing the images for you.

If images are embeded not as img elements but as backgrounds then you should be using the resize_image_url function. That way Marketers can't make a 16000px wide image appear on the site slowing it down to a crawl.
https://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#resize-image-url


If you want to test how moving jquery to the footer will affect your site, as well as test your google page speed I have a chrome extension that will help you with that
https://chrome.google.com/webstore/detail/hubspot-developer-extensi/gebemkdecnlgbcanplbgdpcffpdnfdfo

@giozua I think you're in the wrong place then. This is the CMS forum, as in the HubSpot CMS. 

[#12]

@Jon_McLaren You make a lot of good points, and I like your suggestions. I am also glad that Hubspot has improved it's platform over the past two yours (this thread is from 11/17), but I don't think it is fair to discount the answers here just because of those recent updates to the platform. If Hubspot made this type of information public (like user docs) it would clear up a ton of the confusion anyway, but it is no coincidence that improvements to the system coincide with complaints here on the forum. 

I tested images in my portal, and hubspot doesn't do anything to optimize images as far as I can tell. I can cut 80% of the size out of most images I can find on Hubspot sites. 

[#13]

the image resizing is only seen on the front end, files stay at their real size in the file manager.

as I said if the image is not an img element you need to do your due diligence to add the resize_image_url otherwise the marketers can put rediculous sized images in on the site.

You can also take advantage of combining resize_image_url with srcset  for extra power.

[#14]

I meant on the front end of mine, and several of my clients, sites'. I am frequently hired to optimize the sites, among other things, and I know for a fact that unless you optimize the image, your getting an unoptimized image. You can use tricks to fix it, or just optimize it, but throw a 4mb pic in your template and view it live, it's 4mb.  I can get that same 4mb image down to 56kb. 

[#15]

as I stated before if you have an img tag, HubSpot auto resizes the image to it's width and height that it will display at.

If you are not using an img tag to display the image, you need to do your due diligence to add the resize image function at the URL.

It's not a trick it's officially supported functionality. Yes in some cases you may be able to save a few more bytes doing it manually but it generally does a pretty great job, and you don't have to worry about some one screwing it up at a later date by changing an image.

On top of all of this, HubSpot also automatically makes all images webp for browsers that support it. They do this server side so the file name will still read as jpg or png allowing their caching to continue to work solidly.

[#16]

Sure, sounds good.