d
Topic
Posts:
9
November 04, 2016
g
1
upvotes

How do I edit {{ content_for_header }}? Classic theme

Hi!

Is there a way to edit {{ content_for_header }}? I need it in order to change a link to a minified version of this script

https://cdn.shopify.com/s/javascripts/shopify_stats.js?v=6

I'm still on a quest to maximise my stores Google PageSpeed Insights score and it wants me to minify all the javascripts that are used

,,,,,^..^,,,,, ~
i
Replies
Jason Shopify Expert freakdesign.com.au
Posts:
8096
November 04, 2016
g
1
upvotes

content_for_header is not an object that you're able to edit. You could try and do some string replacement on the contents but I highly recommend against that since you don't control the content it contains, and can't rely on it being the same.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
9
Last edited November 04, 2016

I see..

Is there anything else I can improve my stores google pagespeed score? 

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fezpet.net&tab=desktop

 

,,,,,^..^,,,,, ~
Posts:
11
10 months ago

It appears that whoever internally at Shopify owns the code that inserts https://cdn.shopify.com/s/javascripts/shopify_stats.js?v=6 into the page should minify that content. Can someone from Shopify respond?

@ezpet.net - if you’re looking for more performance increases, you might also be interested in having Shopify support HTTP/2: https://ecommerce.shopify.com/c/ecommerce-design/t/http2-will-it-be-supported-soon-306241

Posts:
3
Last edited 5 months ago

This is a nice little hack that allows you to load in all the `content_for_header` data asynchronously. 

  <!-- 
  Need to output content_for_header here as theme.liquid wont save without it
  {{ content_for_header }}
  -->

  <!-- Shopify Content START -->
  <script>
  $(document).ready(function() {
    // Store result in a string
    var content_for_header = "{{ content_for_header | replace: '/', '\/' | replace: '"', '\"'| strip_newlines }}";
    // Output content to the head, and add newlines where required
    $('head').append(content_for_header
      .replace(/}        /g, "}        \n")
      .replace(/\/\/<!\[CDATA\[/g, "//<![CDATA[\n")
      .replace(/\/\/]]>/g, "//]]>\n")
    );
  })
  </script>
  <!-- Shopify Content END -->

After implementing this method, my pagespeed score jumped from 72 to 97.

FAIR WARNING Due to the nature of strings, and the fact that the Shopify header content could change at any time, this method may be prone to breaking in the future. Unless you know what you're doing, perhaps it's best avoided.

Posts:
2026
5 months ago

Hey Davey, you can actually even do it like this in  <head>:

{% comment %}
  {{ content_for_header }}
{% endcomment %}

to save some bandwidth :)

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
Jason Shopify Expert freakdesign.com.au
Posts:
8096
Last edited 5 months ago

This can break your theme.

In the case of the commenting - will remove any built in tracking (facebook, GA) and reporting. Apps that use scripts tags won't load. I'd also expect you to run into issues with how payments gateways are shown on the cart page (eg, apple pay). Also expect issues with the theme editor in the Admin.

Be very sure you want to do this and understand the implications. If you're not in a position to fully test the results, leave your content_for_header well alone.

If the developers here want talk about this - go for it - but always remember that there's plenty of non devs here that read the forums. Always give fair warning for risky ideas like this.

★ Winning Partner of the Build a Business competition. ★ http://freakdesign.com.au
Posts:
2026
5 months ago

Oh, Jason, that's so very true -- test, test and then test once more.

However, we are not about removing the {{ content_for_header }} completely, but just processing it at a later time. Do you still think this can be dangerous?

I must admit I have not tried it myself, but at least there is an app in the store, which recently was recommended in the forums and have at least 40 5-star reviews (Pagespeed Guru), which simply moves it to be above the </body>, which I find less safe then what Davey suggested. But then it is an app and people who use it have no idea what's going on under the hood!

Want to hire me to tweak a theme? Mail me at tairli@yahoo.com! My post solved your problem? This is my Paypal too :)
Posts:
3
5 months ago

@Jason - yes you are quite right. I have edited my post to include the warning as you suggest.

However as Tim pointed out, we're not aiming to remove the {{content_for_header}} (because that would be silly) - just delay the processing of it until after the page has rendered. It would be interesting to hear your thoughts about the implications of this being processed at this time? Are there any items in the Shopify header content that are critical path? 

My testing so far has been positive - everything still appears to function as intended. If this is a viable approach, it would be worthwhile for other devs to contribute - especially around the string parsing, which could be prone to breakage should the content change in the future. 

fadi Member
Posts:
2
5 months ago

I am getting this error

 where "$ is not defined"

any help would be appreciated

Deepak Basnal Member
Posts:
2
2 months ago

How can i edit or change injected content from {{ content_for_header }} . The problem is my previous FB Pixel code is injected by {{ content_for_header }} in the site. I want to remove old one.