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

0 Likes
JoesIdeas
Shopify Expert
1402 124 373

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.

 

 

Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
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

0 Likes
JoesIdeas
Shopify Expert
1402 124 373

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" }}
Founder of Speed Boostr (Shopify optimization experts, theme customization, custom app development).
Creator of Shopify Analyzer (first performance analysis tool for Shopify sites, free for the Shopify community).
Creator of Order Automator (auto tag orders and customers + auto fulfillment + more automations).
More apps: Theme Scientist (A/B testing), Tip Jar (add a tip button), File Optimizer (optimize CSS, JS, Liquid).
Wenjian_Zhao
Excursionist
42 0 8

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
38 0 12

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?
0 Likes
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
15 0 5

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

 

Preben_Frenning
Shopify Partner
38 0 12

Awesome, this finally worked for me!

 

Thank you so much for sharing

0 Likes