PageSpeed Insights

SOLVE
Highlighted
Regular Contributor

Hi there,

is anyone able to help me in settling this issue and remove render-blocking JavaScript? I am not an expert...:-(

 

 

PageSpeed Insights.png

Reply
0 Upvotes
3 Accepted solutions

Accepted Solutions
Regular Contributor

Hi @Giuseppe

 

Page Speed Insights is definitely something we do take into consideration and we will always do what we can get to a score as high as possible, but at the same time, if you are running on a CMS of some kind, you have to take into account that you can't get your score to 100 so you have to just not get too hung up on it. It does massively depend on your site but if you can get your score around 70/80, your doing alright.

 

At the end of the day though, as long as you have made sure that you have done everything that is in your power to do, you should have a pretty decent score. 

 

It is not uncommon for things to come up in the recommedations that although are true, there is a reason for it being the way it is. as @Jsum has described with the HubSpot stuff. I am sure that if HubSpot could move some of these elements to improve the scores, they would, but sometimes things need to be done in a certain way.

 

In terms of moving the scripts to the footer, what you want to do is looker in the header of your site (unfortunately it is very difficult to say where this would be without knowing the specifics of your template) and look for bits of code like this:

<script src="http://some-kind-of-url-here.com"></script>  

 Then you want to cut that from there, and paste it before the closing </body> tag which will be in your footer somewhere.

 

Then most importantly, test test test!! As stated, some times things need to be where they are for a reason, and by moving something, you could cause something to break.

 

I hope that is of some help, sorry I can't give more specifics but it is hard without knowing your project intimately.

 

Good luck Smiley Wink


All the best

David

Top Advisor

@Giuseppe,

 

Google Page Speed Test and GT Metrix are grading various factors of page performance. While these factors are real, how to test them and what is conisidered passing or perfect is opinion based. Google doesn't own the internet but they are popular enough that they can say how your supposed to build a website, penalize you in their search engine for doing it wrong, and everyone just goes with it. You shouldn't diregard the page speed checkers because they are a good indication of user experience, and user experience is everything. 

 

Just remember to cater to user experience and not to google. As a Hubspot user you have the added bonus of being in the content marketing game, not the seo game. seo is important and proper seo should be practiced but for you it's all about the inbound marketing strategies. Becuase of this you can get away with a lower Google Page Speed score, as long as your user experience does not suffer.

 

If you are using a coded template than you have more control over your code in my opinion. I prefer to work with and build coded templates over template builder templates. If your a developer I think it is the better option. The question is whether or not you are using global modules for your header and footer. If yes then you just need to copy and paste your script calls from the header to the footer global module once. If not then you need to do it per page. You will want to find your script tags:

<script src="script-name.js"></script>

and move them to your page footer.

 

 

Reply
0 Upvotes
Top Advisor

@Giuseppe,

 

That's what we're here for! 

 

You can move things around and worst case scenerio you just need to move them back. If you move your scripts to the footer of your page and you get errors in your console (ctr + shift + i) or if your javascript features no longer work then you will want to restore things back to normal. 

9 Replies
Top Advisor

@Giuseppe,

 

When it comes to dealing with perfornace issues on any cms there are two types of issues:

 

1. things you can control

 

2. things you can't control

 

For instance image size and quality is 100% controllable by you. All images, vectors, logos, icons, etc should be sized to fit the maximum width required for your website, they should not have a resolution hire than 72dpi, and you should lower the quality as much as you can wihtout losing visibile quality. 

 

With render blocking javascript and css, you are able to control the scripts and styles that you have added to your site. It is best practive to add all of your javascript calls in the footer of your site so if it is not a hubspot generated script file then you should move it. Hubspot generated javascript is typically placed where it needs to be in order for dependant functions to work, such as CTAs and Forms. You will find this with many cms's. Jquery needs to be in the head and light scripts will be called through out the page in order to make tracking happen. You can't and don't want to change this. 

 

Img's and moving your personal scripts alone should be enought to get you to an A or a B.

Regular Contributor

Hi

 

I completely agree with @Jsum on this one. If you are building a site on top of another platform such as a CMS, E-commerce system etc, you have to take tools like Page Speed Insights with a pinch of salt. There are so many elements that are outside of your control, there is severe limitations on how high a score you can get.

 

It is only really if you are building a bespoke application from the ground up that you can do something about all of these comments and even then, some are incredibly difficult, espeically if you are still depending on some 3rd party services.

 

All the best

David

Regular Contributor

@dessery

are you saying that you would be inclined not to rely too much on Google Page Speed? Thanks a lot

Reply
0 Upvotes
Regular Contributor

Hi @Giuseppe

 

Page Speed Insights is definitely something we do take into consideration and we will always do what we can get to a score as high as possible, but at the same time, if you are running on a CMS of some kind, you have to take into account that you can't get your score to 100 so you have to just not get too hung up on it. It does massively depend on your site but if you can get your score around 70/80, your doing alright.

 

At the end of the day though, as long as you have made sure that you have done everything that is in your power to do, you should have a pretty decent score. 

 

It is not uncommon for things to come up in the recommedations that although are true, there is a reason for it being the way it is. as @Jsum has described with the HubSpot stuff. I am sure that if HubSpot could move some of these elements to improve the scores, they would, but sometimes things need to be done in a certain way.

 

In terms of moving the scripts to the footer, what you want to do is looker in the header of your site (unfortunately it is very difficult to say where this would be without knowing the specifics of your template) and look for bits of code like this:

<script src="http://some-kind-of-url-here.com"></script>  

 Then you want to cut that from there, and paste it before the closing </body> tag which will be in your footer somewhere.

 

Then most importantly, test test test!! As stated, some times things need to be where they are for a reason, and by moving something, you could cause something to break.

 

I hope that is of some help, sorry I can't give more specifics but it is hard without knowing your project intimately.

 

Good luck Smiley Wink


All the best

David

Regular Contributor

@Jsum

thanks a lot. The template is not a HubSpot template but purchased on the Template Marketplace (bad choice). So your suggestion is "With render blocking javascript and css, you are able to control the scripts and styles that you have added to your site. It is best practive to add all of your javascript calls in the footer of your site so if it is not a hubspot generated script file then you should move it". Do you have any suggestion on how to do it? Sorry about that, I am not a designer and have very basic experience. Thanks 

Reply
0 Upvotes
Top Advisor

@Giuseppe,

 

Google Page Speed Test and GT Metrix are grading various factors of page performance. While these factors are real, how to test them and what is conisidered passing or perfect is opinion based. Google doesn't own the internet but they are popular enough that they can say how your supposed to build a website, penalize you in their search engine for doing it wrong, and everyone just goes with it. You shouldn't diregard the page speed checkers because they are a good indication of user experience, and user experience is everything. 

 

Just remember to cater to user experience and not to google. As a Hubspot user you have the added bonus of being in the content marketing game, not the seo game. seo is important and proper seo should be practiced but for you it's all about the inbound marketing strategies. Becuase of this you can get away with a lower Google Page Speed score, as long as your user experience does not suffer.

 

If you are using a coded template than you have more control over your code in my opinion. I prefer to work with and build coded templates over template builder templates. If your a developer I think it is the better option. The question is whether or not you are using global modules for your header and footer. If yes then you just need to copy and paste your script calls from the header to the footer global module once. If not then you need to do it per page. You will want to find your script tags:

<script src="script-name.js"></script>

and move them to your page footer.

 

 

Reply
0 Upvotes
Regular Contributor

@dessery & @Jsum

that's very kind of you and your suggestions are so helpful. I will be in touch in the case I need more experienced hands (if I may) :-)

Regular Contributor

@Jsum

 

I have looked at my template (again purchase at the Market Template) and the header does use a global module (like the footer). If I hit on 'Edit the Global Module' there are three modules (one with my logo, and the others with navigation menu) but on top of them there is a custom HTML module the label of which is "// Site Java Script Please Don't Remove This //". When I hit on 'Edit HTML' of this module the following appears "<!-- All Plugins files should be above this -->
<script src="{{ get_public_template_url("Custom/page/Marketplace_Templates/oceania_script-1486821530091.js") }}" type="text/javascript"></script>".

If I understand correctly you suggest to cut this from the header and copy on the footer, right?

If my understanding is correct I do not have 'fear' in having a try and see if this will harm the layout or not. I am instead scared by the 'warning label' the developer of the template give...(if it does make sense to you). Thanks again.

Reply
0 Upvotes
Top Advisor

@Giuseppe,

 

That's what we're here for! 

 

You can move things around and worst case scenerio you just need to move them back. If you move your scripts to the footer of your page and you get errors in your console (ctr + shift + i) or if your javascript features no longer work then you will want to restore things back to normal.