Eliminating Render-blocking resources?

[dchambers]

Deleted

[ROverson]

Did you find a solution to this @kyle4  @stefen ?

[stefen · Accepted solution]

@dchambers in your HubSpot site settings you can move all the code that's in the Site Header HTML section to the Site Footer HTML section. You should also make sure the "Load jQuery in the footer" toggle switch is turned on.

[kyle4]

Hi Stefan, 

When I do this for my website, the menu no longer shows up on mobile. 

Any I ideas what could be causing this?

[stefen]

@kyle4 it's most likely because your mobile menu is being created with a jquery script that's trying to run before jquery is loaded. When you move jQuery to the footer you should also make sure all your javascript is using the require_js functions so it gets loaded in the proper order.

For example, if your mobile script is inline in your header, you should wrap it like so:

{% require_js %}
<script>
// the mobile nav script
</script>
{% end_require_js %}

 This will force it to load in the footer below jQuery and it will work again.

[kyle4]

Hi Stefan,

I was unable to get it to work. This is likely an error on my end. Is there anything glaringly wrong with the why I implemented the require_js 

[stefen]

If that's an inline script you need to enclose it with the script tag. e.g.:

{% require_js %}
<script>
function myfunctionsHere(){
// my function statements
}
myfunctionsHere();
</script>
{% end_require_js %}

If that's an external js file, you should reference that file using the following syntax:

{{ require_js('https://example.com/main.js') }}

[kyle4]

Hi Stefan,

This is an external JS file. Where is it that I should reference it? Sorry if this is a noob question. 

[kyle4]

Thank you for such a fast reply. I will try this now and post and update with how I make out. Thanks