Hi all,
I was looking in to improving site speed and performance lately and found the biggest opportunity in reducing un-used Javascript. At the moment, it seems like certain Javascript is being loaded before rendering images reducing first contentful paint drastically. I have seen some suggestions on basically "lazy loading" this Javascript using a function in theme.liquid that would load Javascript on a human interaction of the site (e.g scroll)
This is especially relevant for the privacy policy, Shopfiy chat and other apps I have installed to my store.
Can somebody please help me out in defining the function that I could add to {content_for_header} to improve this?
Currently this looks like this in my Impact theme
{%- if tinyscript -%}{{ content_for_header }}{%- else -%}{% render 'tiny-script-control' %}{%- endif -%}And the tiny script referenced here looks like this:
{% assign tiny_template_suffix = template.suffix | append: ".liquid" %}{% assign tiny_page_name = template.name | replace: tiny_template_suffix, "" %}{%- if tiny_page_name == "index" -%}{{ content_for_header | remove: "https:\/\/productreviews.shopifycdn.com\/embed\/loader.js?shop=kas-eelman.myshopify.com" | remove: "https:\/\/productreviews.shopifycdn.com\/embed\/loader.js" | remove: "https:\/\/cdn-bundler.nice-team.net\/app\/js\/bundler.js?shop=kas-eelman.myshopify.com" | remove: "https:\/\/cdn-bundler.nice-team.net\/app\/js\/bundler.js" | remove: "https:\/\/api.fastbundle.co\/scripts\/src.js?shop=kas-eelman.myshopify.com" | remove: "https:\/\/api.fastbundle.co\/scripts\/src.js" | remove: "https:\/\/cdn.shopify.com\/shopifycloud\/privacy-banner\/storefront-banner.js?shop=kas-eelman.myshopify.com" | remove: "https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"| remove:"https://www.googletagmanager.com/gtag/js?id=G-GQQC9KBC01" | remove: "https://www.googletagmanager.com/gtag/destination?id=AW-10955433657&l=dataLayer&cx=c" | remove:"https://www.googletagmanager.com/gtag/destination?id=MC-LYLSPX2RJH&l=dataLayer&cx=c" }}{%- elsif tiny_page_name == "product" -%}{{ content_for_header }}{%- elsif tiny_page_name == "collection" -%}{{ content_for_header }}{%- elsif tiny_page_name == "blog" or tiny_page_name == "article" -%}{{ content_for_header }}{%- elsif tiny_page_name == "page" -%}{{ content_for_header }}{%- elsif tiny_page_name == "cart" -%}{{ content_for_header }}{%- else -%}{{ content_for_header }}{%- endif -%}I'm not sure what this tinyscript does or when exactly it is triggered but if i add some of the problematic javascript from the async function in the header div and remove it in {{content_for_header | remove: "____"}} then I can improve performance. Except I don't want to remove it i just want it to be injected onScroll after the main content loads first.
I'm not a engineer so curious to know if there are any suggestions on this.
Thanks!
