Question about Minifying content_for_header

Oislt
Shopify Partner
9 1 5

Hello Shopify Community,

I hope you're all doing well. I'm currently working on optimizing my Shopify store's performance, and I've come across a question regarding the content_for_header liquid variable. I'd like to inquire whether it's possible to minify the content stored in content_for_header.

Here's the code snippet that I'm referring to:

{%- capture content -%}
   {{ content_for_header }}
{%- endcapture -%}

{{- content | strip_newlines | replace: '  ', '' | replace: '>  <', '><' | replace: '> <', '><'' -}}

I'm interested in minifying this code further to reduce unnecessary spaces, line breaks, and characters. This would contribute to improved page loading times and overall performance. Could anyone guide me on whether this is possible and if so, how I could achieve it?


I greatly appreciate any insights or suggestions you might have on this matter. Thank you in advance for your assistance!

 

Best regards,

Oislt

Replies 3 (3)

PaulNewton
Shopify Partner
6339 580 1350

So is possible? yes, easily explainable for a forum post... no.

Question is waaaaaay to broad, your basically asking to be taught how to use liquid.

 

If you care this much to try and eek out a few milliseconds by parsing such things in liquid without already having an idea of the how then it would be 100x saner to just remove as much app cruft as possible uninstalling apps.

If your trying to just improve overall theme performance instead start elsewhere with general web development performance techniques.

 

 

Otherwise your talking about doing string parsing and manipulation of html,css,and javascript with a templating language.

If your not already confident enough from that starting code you have to do more optimizations with liquid code that should tell you something about the problem difficulty.

 

You can have a long learning curve and a lot of digging in front of you if you waste time on this if it's not going to be a specialization your constantly doing. If your doing this to be able to offer a service then look into theme optimization apps on the app store install some and learn from that.

 

Good hunting.

 

 

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org


Oislt
Shopify Partner
9 1 5
PaulNewton,

Thank you for your detailed response and insights. I appreciate your perspective on the challenges involved Liquid and optimizing Shopify themes.

Regarding my initial question, I'm wondering if you could kindly offer some guidance. Specifically, I'm interested in understanding how I can access of the code after the execution of the line window.performance && window.performance.mark && window.performance.mark('shopify.content_for_header.end');, It appears that following this point Shopify initiates owns automatic code manipulation and injection process, even when starting from a blank theme. Any advice or insights you can share regarding this aspect? I would be incredibly valuable as I continue to explore this area in order to enhance the performance.

Once again, I want to express my sincere appreciation for your generosity in sharing your time.

PaulNewton
Shopify Partner
6339 580 1350

A theme with {{ content_for_header }} isn't very blank. 

If you really want to enforce performance the straightforward solution is to just comment out content_for_header if you do not care about losing things like apps and analytics, etc etc in the process.

 

If some feature X does not have a defined api,  or is not in the dev docs etc, then it's just not supported.

Third parties don't have, and wont get access to shopify's backend source code for systems like content_for_header.

There are experiment type articles on the internet like "Get the url querystring values with Liquid in Shopify" that show basics or parsing content_for_header, and forum discussions, if your a partner join the partner-slack and research. There's also installing 

 

If it's something rendered to the frontend you just have to intercept it through liquid , or if your don't know how to parse it in liquid some javascript....

 

If you do not know where to start in intercepting javascript by replacing native browser functions and also not sure where to begin trying to parse something like this in it in liquid seriously consider that a warning sign this is probably your going to be wasting a lot of time on this.

 

 

Save time & money ,Ask Questions The Smart Way


Confused? Busy? Get the solution you need paull.newton+shopifyforum@gmail.com


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Buy Paul a Coffee for more answers or donate to eff.org