Re: Benefits of {{ content_for_header }}

RFI · ‎03-22-2020

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_headerWith content_for_header

Thanks

JoesIdeas · ‎03-23-2020

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 [auto tag, fulfill, connect FBA, daily jobs]
• Co-Creator of Product Automator [suite of features for products / collections]
• Shopify developer for 10+ years, store owner for 7 years
• Blog: Shopify Tips, Guides, and Automation Tactics

View solution in original post

JoesIdeas · ‎03-22-2020

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 [auto tag, fulfill, connect FBA, daily jobs]
• Co-Creator of Product Automator [suite of features for products / collections]
• Shopify developer for 10+ years, store owner for 7 years
• Blog: Shopify Tips, Guides, and Automation Tactics

RFI · ‎03-23-2020

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 · ‎03-23-2020

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 [auto tag, fulfill, connect FBA, daily jobs]
• Co-Creator of Product Automator [suite of features for products / collections]
• Shopify developer for 10+ years, store owner for 7 years
• Blog: Shopify Tips, Guides, and Automation Tactics

Wenjian_Zhao · ‎09-01-2020

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 · ‎09-28-2020

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 %}

{% 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 %}

{% endif %}

Any ideas?

iSimpli · ‎12-31-2020

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 · ‎02-06-2021

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 · ‎09-22-2021

Awesome, this finally worked for me! 🙌

Thank you so much for sharing 😁

DeltaAJM · ‎11-04-2021

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 %}

hk2295 · ‎02-27-2022

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 · ‎06-16-2022

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 · ‎06-16-2022

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

Preben_Frenning · ‎06-16-2022

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.

MiguelAngelFF · ‎11-05-2021

{% 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 ?

drewboater · ‎06-16-2022

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 · ‎06-16-2022

I found the other way

{% if template != "index" %}

{% 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 · ‎06-16-2022

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!

attotasolutions · ‎03-14-2023

Hi,

Please let me know if there is any REST service at Admin API to edit this information.

base10digital · ‎11-06-2021

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 · ‎11-07-2021

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

bobbylight · ‎12-02-2022

I blocked it entirely from my site. I also blocked "content-for-layout". Be warned, you have to know how to code in order to make it all work after you block it. This is what I did:

{% if template contains 'laksjdfoiwetruutjwh213938a;lkdsjf' %}
{% render '{{content_for_header}}' %}
{% endif %}
{% if template contains 'laksjdfoijwh2139asdfasdff438a;lkdsjf' %}
{% render '{{content_for_layout}}' %}

--- obviously my templates don't contain the above random letters so Shopify's hidden scripts never get injected because content for header and content for layout never get rendered. Worked like a charm ---
{% endif %}

Re: Benefits of {{ content_for_header }}

What are the benefits of improving website performance?

Community Blog Articles