FROM CACHE - en_header

Benefits of {{ content_for_header }}

Solved
RFI
Shopify Partner
6 0 0

Hi,

 

Can anyone help me with a list of benefits of {{ content_for_header }}, because the impact over website performance is huge 😞

Without content_for_headerWithout content_for_headerWith content_for_headerWith content_for_header

Thanks

Accepted Solution (1)

Accepted Solutions
JoesIdeas
Shopify Expert
1740 152 451

This is an accepted solution.

You could do something like this:

 

{% capture h_content %}
  {{ content_for_header }}
{% endcapture %}

{% if template contains "blog" %}
  {{ h_content | remove: "stuff you want to remove" }}
{% else %}
  {{ content_for_header }}
{% endif %}

If removing scripts, you might need to escape the slashes, like this:

{{ h_content | remove: "https:\/\/script_url.com\/file.js" }}
• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people

View solution in original post

Replies 20 (20)
JoesIdeas
Shopify Expert
1740 152 451

It's a common place to inject scripts from various places.

 

I personally prefer more control, but a benefit is that app developers can inject scripts in there instead of directly into your theme. The reason that's a benefit is because it allows the script to be removed when you uninstall the app.

 

I've optimized a lot of Shopify sites and probably at least half of them have leftover app code loading from uninstalled apps (because apps lose access at the point of uninstall). This prevents that problem.

 

Ideal solution (in my opinion) would be a section in the Shopify admin where you can control content_for_header and content_for_footer and choose where you want scripts to load, which ones, and on which pages.

 

Current solution you can employ conditional loading by omitting scripts not needed on certain pages. For example if you find a script in the content_for_header loading on every page but it's only needed on the product page, you can capture the content_for_header in theme.liquid, then remove the string that loads the script (you'll have to view source to find it), then use a conditional statement to only load it on the template it's used for.

 

 

• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
RFI
Shopify Partner
6 0 0

Thank you, JoesIdeas, for the reply.
Your permanent solution sounds good, but until Shopify decide to implement something like that, can you please help me with a practical example of conditional loading by omitting scripts? How do I target some exact parts from content_for_header?
For example, I have some shopping related <meta> or <script> that I do not need on blog pages.
Thank you

JoesIdeas
Shopify Expert
1740 152 451

This is an accepted solution.

You could do something like this:

 

{% capture h_content %}
  {{ content_for_header }}
{% endcapture %}

{% if template contains "blog" %}
  {{ h_content | remove: "stuff you want to remove" }}
{% else %}
  {{ content_for_header }}
{% endif %}

If removing scripts, you might need to escape the slashes, like this:

{{ h_content | remove: "https:\/\/script_url.com\/file.js" }}
• Creator of Order Automator (app to save time + automate tasks, monitor orders, tag, fulfill, FBA)
• Shopify developer for +10 years
• Contributor on the Speed Boostr blog
• Guy who likes to help people
Wenjian_Zhao
Excursionist
73 0 9

Hi, Joe:

Thanks for your instruction! 

However, why my code doesn't work? I referred to your instruction and wrote this code and then insert into my theme ( Old version of Minimal ) header area.

Would you please tell me what is wrong?

<head>
.....

"
{% capture h_content %}
{{ content_for_header }}
{{ content_for_footer }}
{% endcapture %}

{% if template == "index" %}
{{ h_content | remove: "https:\\connect.facebook.net\signals\config\581739415821802?v=2.9.23&r=stable" }}
{{ h_content | remove: "https:\\brain-assets.boldapps.net\js\widget.js?shop=forevershop.myshopify.com" }}
{{ h_content | remove: "https:\\sdk.beeketing.com\js\beeketing.js?20200901" }}
{{ h_content | remove: "https:\\www.gstatic.com\recaptcha\releases\QVh-Tz10ahidjrORgXOS1oB0\recaptcha__en.js" }}


{% elsif template == "collection" %}
{{ h_content | remove: "https:\\connect.facebook.net\signals\config\581739415821802?v=2.9.23&r=stable" }}
{{ h_content | remove: "https:\\brain-assets.boldapps.net\js\widget.js?shop=forevershop.myshopify.com" }}

{% else %}
{{ content_for_header }}
{{ content_for_footer }}
{% endif %}

"

....

</head>

After I inserted this code into my them and tested my website: https://iloveforeverfashion.com/  from Google PageSpeed Insights, I still saw that google suggested to eliminate these javascripts. That means these apps: facebook app, brain bold app, beeketing app, and recaptcha app are still working when loading my home page.

Would you please help me?

Thanks!

Jane

09/01/2020

Preben_Frenning
Shopify Partner
39 0 13

This looks like a very VERY interesting technique!..but I also couldn't get it to work, even when escaping the / in the urls, or copying them exactly as they stand in the source code.

Here's what I did for a test:

 {% capture h_content %}
    {{ content_for_header }}
{% endcapture %}
 
  {% if template contains "product" %}
  {{ h_content | remove: "https:\/\/tabs.stationmade.com\/registered-scripts\/tabs-by-station.js?shop=hyttefeber.myshopify.com" }}
  {{ h_content | remove: "https:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-2.2.4.min.js" }}
  
  {% else %}
  {{ content_for_header }}
  {% endif %}
 
Any ideas?
iSimpli
New Member
2 0 3

Hi @Preben_Frenning and @Wenjian_Zhao .

First: @Wenjian_Zhao , I think you forgot to escape the slashes as mentioned by @JoesIdeas .

Second: For both I think your approach is not entirely correct.

By doing:

 

{{ h_content | remove: "https:\\connect.facebook.net\signals\config\581739415821802?v=2.9.23&r=stable" }}
{{ h_content | remove: "https:\\brain-assets.boldapps.net\js\widget.js?shop=forevershop.myshopify.com" }}
{{ h_content | remove: "https:\\sdk.beeketing.com\js\beeketing.js?20200901" }}

 

you are removing the string from one output, but printing it in the others. i.e.:And actually what we want is to remove multiple strings from the same reference, it means using the | remove filter multiple times for the same reference.

So the correct way to use it in the  @Preben_Frenning 's example would be:

 

{% capture h_content %}
    {{ content_for_header }}
{% endcapture %}

{% if template contains "product" %}
    {{ h_content 
        | remove: "https:\/\/tabs.stationmade.com\/registered-scripts\/tabs-by-station.js?shop=hyttefeber.myshopify.com"
        | remove: "https:\/\/ajax.aspnetcdn.com\/ajax\/jQuery\/jquery-2.2.4.min.js" 
    }}
  
{% else %}
    {{ h_content }}

{% endif %}

 

Honestly, I am not using this technique yet, so I can not say for sure that this would work, I am just assuming it will, because it makes sense.

Hope it help you guys and, please let us know if this solution works.

NSEImports
Excursionist
29 0 7

I've been trying to get this to work for me but not having much luck, reading this page and a couple of others I have been trying to rid certain pages of this .js used by the Vimeo app to improve those critical Google Pagespeed scores, my code should work but it's not playing ball. Any suggestions greatly appreciated. 😃

{% capture h_content %}
    {{ content_for_header }}
{% endcapture %}

{% if template contains 'index' or 'article' or 'collection' or 'blog' %}
    {{ h_content | remove: "https:\/\/www.magisto.com\/media\/shopify\/magisto.js?shop=nse-imports.myshopify.com" }}
  
{% else %}
    {{ content_for_header }}

{% endif %}

 

Doing many things all day everyday
Preben_Frenning
Shopify Partner
39 0 13

Awesome, this finally worked for me! 🙌

 

Thank you so much for sharing 😁

DeltaAJM
Tourist
6 0 1

Hello.

I have used the call but checking the metric reports it continues to appear on the home page and the others.

Can someone guide me on what am I doing wrong?

Thank you.

 

{% capture h_content %}
    {{ content_for_header }}
{% endcapture %}
{% if template contains "index" or "article" or "collection" or 'blog' %}
    {{ h_content 
        | remove: "https:\/\/cdn.aplazame.com\/aplazame.js?public_key=73032fd5e474fd221c4d0eb34ba8bf5825024bdb\u0026host=https:\/\/api.aplazame.com\u0026shop=hannun.myshopify.com"        
    }}
{% else %}
    {{ h_content }}
{% endif %}

 

MiguelAngelFF
Shopify Partner
4 0 0
{% capture h_content %}
  {{ content_for_header }}
{% endcapture %}

{{ h_content | remove: "\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.10.2\/jquery.min.js"}}

Do you know Why something like this is not working with remove ?

base10digital
New Member
1 0 1

I stumbled upon this post while working on a NationBuilder site (which also use Liquid Templates) and trying to figure out how to pull a CSRF token out of {{ content_for_header }} because I wanted to embed a form on a non-form page. Because NationBuilder is woefully behind the times, I'm basically not using any of their pre-packaged header content, except for the CSRF token. 

So far, the best solution I found to plucking a single piece of content out of the {{ content_for_header }} code, without it actually loading any of the scripts/styles into memory, is to write the {{ content_for_header }} into a <noscript> tag; which basically renders it all as a string. Then use a JS regex match to pull out the CSRF Token and set it in the actual CSRF metatag in the actual head, then delete the <noscript> node. 

...which is completely ridiculous and circuitous way of achieving something which should be rather trivial. But hey, that's NationBuilder in a nutshell.

Anyway, I hope this helps someone in the future. 

MiguelAngelFF
Shopify Partner
4 0 0

Thanks for answering, 🙂 I'll take a look to try it 🙂

hk2295
New Member
3 0 0

hi can you help me its not working for me

 

{% capture h_content %}
{{ content_for_header }}
{% endcapture %}

{% if template contains 'index' %}
{{ h_content | remove: "https:\/\/connect.facebook.net\/signals\/config\/1917694488318162?v=2.9.52&r=stable" | remove "https:\/\/static.zbcdn.net\/__bkotmav/asset\/bundle.js" | remove: "https:\/\/d1liekpayvooaz.cloudfront.net\/apps\/customizery\/customizery.js?shop=twent3.myshopify.com" | remove: "https:\/\/cdn-stamped-io.azureedge.net\/files\/widget.min.js?shop=twent3.myshopify.com" | remove: "https:\/\/cdn1.stamped.io\/files\/widget.min.js?shop=twent3.myshopify.com" }}

{% else %}
{{ content_for_header }}

{% endif %}

drewboater
Shopify Partner
5 0 4

Hi Preben_Frenning, you seem to be the only person that has made this work.  Can you please share more?  I have had no luck and have tried to simplify this code down even more for testing.  I can't get any character, even simple test characters to be removed from {{ content_for_header }}.

 

hk2295
New Member
3 0 0

Its seems not working but i found the other way to resolve the issue and i fixed it 😁

Preben_Frenning
Shopify Partner
39 0 13
Glad you made it work! 🙂

This is how I have solved it:



{% capture h_content %}
{{ content_for_header }}
{% endcapture %}


{% comment %} Below, we exclude redundant scripts and assets, as well
as we remove them from the code and implement natively
wherever possible. The two redundant Klaviyo scripts below gave a 0.4s
increase in loading times for PDP.

Next up will be to download, merge, and upload assets we can host
ourselves {% endcomment %}

{% if template contains "product" %}
{{ h_content
| remove: "https:\/\/storage.googleapis.com
\/gsf-scripts\/global-remarketing\/hyttefeber.js?1623001064\u0026shop=
hyttefeber.myshopify.com"
| remove: "https:\/\/storage.googleapis.com
\/gsf-scripts\/global-remarketing\/hyttefeber.js?1650026765\u0026shop=
hyttefeber.myshopify.com"
| remove: "https:\/\/static.klaviyo.com
\/onsite\/js\/klaviyo.js?company_id=RZLEec\u0026shop=
hyttefeber.myshopify.com"
| remove: "https:\/\/static.klaviyo.com
\/onsite\/js\/klaviyo.js?company_id=SqFFVH\u0026shop=
hyttefeber.myshopify.com"
| remove: "\/\/app.getwoohoo.com\/23484\/script.js?1654250078\u0026shop=
hyttefeber.myshopify.com"
| remove: "\/\/app.getwoohoo.com\/23484\/script.js?1653685710\u0026shop=
hyttefeber.myshopify.com"
}}
{% else %}
{{ h_content
| remove: "https:\/\/storage.googleapis.com
\/gsf-scripts\/global-remarketing\/hyttefeber.js?1623001064\u0026shop=
hyttefeber.myshopify.com"
| remove: "https:\/\/storage.googleapis.com
\/gsf-scripts\/global-remarketing\/hyttefeber.js?1650026765\u0026shop=
hyttefeber.myshopify.com"
| remove: "https:\/\/tabs.stationmade.com
\/registered-scripts\/tabs-by-station.js?shop=hyttefeber.myshopify.com"
| remove: "https:\/\/static.klaviyo.com
\/onsite\/js\/klaviyo.js?company_id=RZLEec\u0026shop=
hyttefeber.myshopify.com"
| remove: "https:\/\/static.klaviyo.com
\/onsite\/js\/klaviyo.js?company_id=SqFFVH\u0026shop=
hyttefeber.myshopify.com"
| remove: "\/\/app.getwoohoo.com\/23484\/script.js?1654250078\u0026shop=
hyttefeber.myshopify.com"
| remove: "\/\/app.getwoohoo.com\/23484\/script.js?1653685710\u0026shop=
hyttefeber.myshopify.com"
}}
{% endif %}



Pretty much 🙂 It helps A LOT to remove unused assets from various page
classes, as well as some services add duplicate codes that aren't needed
from time to time. Splitting the shopify header up into different page
classes is highly recommended. I know there are apps that can do this too,
but this is free and leaves you in control.
drewboater
Shopify Partner
5 0 4

Hi Joe,
I feel in theory, this should work great.  However, with much testing even using simple conditions where there is no need to escape characters, it seems that the remove filter will not remove anything from the captured {{ content_for_header }} variable {{ h_content }}.  I have tried so many variations, including just trying to remove a simple character. 

 

I removed the if that is testing the template condition, because this script loads on every page.  

{% capture h_content %}
     {{ content_for_header }}
{% endcapture %}

{{ h_content | remove: "fbevents.js" }}

 

However, I also tried a version of it with the if condition.

{% capture h_content %}
     {{ content_for_header }}
{% endcapture %}

{% if template contains "index" %}
     {{ h_content | remove: "fbevents.js" }}
{% else %}
     {{ content_for_header }}
{% endif %}

 

Again, in theory this should work great, but it seems not many people have had any luck.  Ideas on why the remove filter would not remove any text that I try?  I have even tried removing the string "src".  Yes that would break all of the javascript files, but I am just testing to see why the remove filter does nothing for this variable.  Someone must know the answer.  Does Shopify prevent filters from being run on {{ content_for_header }} or any captured variable of it?

hk2295
New Member
3 0 0

I found the other way

 

{% if template  != "index" %} 

{{ content_for_header }}

{% endif %}

 

 

{% if template  == "index" %} 

Header code copied from view source

Find all the scripts which are slowing down the page, 

 

Add delay to those scripts for few seconds

{% endif %}

 

drewboater
Shopify Partner
5 0 4

Hi Hk2295, 

This is not really a solution, it is just delaying the script, not really preventing it from loading.  Using your method, you are not really decreasing the overall page size. 

  

I have so many of them being loaded that need to go away.  This can reduce the javascript asset size by about 30%.  That is quite the savings and will make for a faster page and better user experience.

 

The big question is why does the other method of removing the text string not work?  This should work great!