Solved

Eliminate render-blocking resources in Stockholm Theme

AnnaSleep1997
New Member
6 0 0

Dear All,

 

 

I have been trying badly to reduce the rendering time of the main css file of my website in order to get more speed in google light house.

 

please note that my website is anna-sleep.ae

 

I have tried getting a minified critical css file then calling it while changing my main css call to the footer or the end of my html body but it didnt work.

 

my css errors was like this 

 

previous css rendering problems.PNG

 

kindly note that base.css and bootstrap-grid.css are main css files for the whole website in stockholm theme. add to that I have done some changes while trying to optimizer them and reduce the time. you can see the code for theme.liquid before and after below:

 

 

Before

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
	<head>
        <meta name="facebook-domain-verification" content="ht34ei49857br01r2b49qdxs1ie3cd" />
        <!-- Google Tag Manager -->
        <script defer="defer">
          window.dataLayer = window.dataLayer || [];
        </script defer="defer">
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-NK4ZC3P');</script>
        <!-- End Google Tag Manager -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta name="theme-color" content="">
		<link rel="canonical" href="{{ canonical_url }}">
		<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

		{%- if settings.favicon != blank -%}
			<link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
		{%- endif -%}

		{%- unless settings.type_header_font.system? -%}
			<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
		{%- endunless -%}

		<title>{{ page_title }}</title>

		{% if page_description %}
			<meta name="description" content="{{ page_description | escape }}">
		{% endif %}

		{% render 'meta-tags' %}

		<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>

		{{ content_for_header }}

		{%- liquid
			assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
			assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
			assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic' %}

		{% style %}
			{{ settings.type_body_font | font_face: font_display: 'swap' }}
			{{ body_font_bold | font_face: font_display: 'swap' }}
			{{ body_font_italic | font_face: font_display: 'swap' }}
			{{ body_font_bold_italic | font_face: font_display: 'swap' }}
			{{ settings.type_header_font | font_face: font_display: 'swap' }}
			{{ settings.type_button_font | font_face: font_display: 'swap' }}
			{{ settings.type_header_menu_font | font_face: font_display: 'swap' }}

			:root {
			--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
			--font-body-style: {{ settings.type_body_font.style }};
			--font-body-weight: {{ settings.type_body_font.weight }};

			--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
			--font-heading-style: {{ settings.type_header_font.style }};
			--font-heading-weight: {{ settings.type_header_font.weight }};
			--font-heading-letter-spacing: {{ settings.type_header_letter_spacing }}em;

			--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
			--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

			--font-button-family: {{ settings.type_button_font.family }}, {{ settings.type_button_font.fallback_families }};
			--font-button-style: {{ settings.type_button_font.style }};
			--font-button-weight: {{ settings.type_button_font.weight }};
			--font-button-text-transform: {{ settings.button_text_transform }};

			--font-button-family: {{ settings.type_button_font.family }}, {{ settings.type_button_font.fallback_families }};
			--font-button-style: {{ settings.type_button_font.style }};
			--font-button-weight: {{ settings.type_button_font.weight }};
			--font-button-text-transform: {{ settings.button_text_transform }};

			--font-header-menu-family: {{ settings.type_header_menu_font.family }}, {{ settings.type_header_menu_font.fallback_families }};
			--font-header-menu-style: {{ settings.type_header_menu_font.style }};
			--font-header-menu-weight: {{ settings.type_header_menu_font.weight }};
			--font-header-menu-text-transform: {{ settings.header_menu_text_transform }};

			{%- if settings.font_custom == 'custom' -%}
				--font-body-family: 'EudoxusSans';
				--font-body-style: normal;
				--font-body-weight: 500;

				--font-button-family: 'EudoxusSans';
				--font-button-style: normal;
				--font-button-weight: 600;

				--font-header-menu-family: 'EudoxusSans';
				--font-header-menu-style: normal;
				--font-header-menu-weight: 600;

				--font-heading-alt-family: 'Quentin';
				--font-heading-alt-style: normal;
				--font-heading-alt-weight: 400;
			{%- endif -%}

			{%- if settings.font_custom_heading == 'custom-1' -%}
				--font-heading-family: 'EudoxusSans';
				--font-heading-style: normal;
				--font-heading-weight: 600;
			{%- endif -%}

			{%- if settings.font_custom_heading == 'custom-2' -%}
				--font-heading-family: 'Coconat';
				--font-heading-style: normal;
				--font-heading-weight: 400;
			{%- endif -%}

			{%- if settings.font_custom_heading == 'custom-3' -%}
				--font-heading-family: 'Syne';
				--font-heading-style: normal;
				--font-heading-weight: 400;
			{%- endif -%}

			--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
			--color-title-text: {{ settings.colors_text_title.red }}, {{ settings.colors_text_title.green }}, {{ settings.colors_text_title.blue }};
			--color-secondary-text: {{ settings.colors_text_secondary.red }}, {{ settings.colors_text_secondary.green }}, {{ settings.colors_text_secondary.blue }};
			--color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
			--color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};

			--color-secondary-element-background: {{ settings.colors_secondary_element_background.red }}, {{ settings.colors_secondary_element_background.green }}, {{ settings.colors_secondary_element_background.blue }};

			--color-announcement-bar-background: {{ settings.colors_background_announcement_bar.red }}, {{ settings.colors_background_announcement_bar.green }}, {{ settings.colors_background_announcement_bar.blue }};

			--color-section-border: {{ settings.colors_background_border_section.red }}, {{ settings.colors_background_border_section.green }}, {{ settings.colors_background_border_section.blue }};
			--color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
			--color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
			--color-base-button-background: {{ settings.colors_solid_button_background.red }}, {{ settings.colors_solid_button_background.green }}, {{ settings.colors_solid_button_background.blue }};
			--payment-terms-background-color: {{ settings.colors_background_1 }};

			}

			*,
			*::before,
			*::after {
			box-sizing: inherit;
			}

			html {
			box-sizing: border-box;
			font-size: calc(var(--font-body-scale) * 62.5%);
			height: 100%;

			}

			body {
			position: relative;
			display: grid;
			grid-template-rows: auto auto 1fr auto;
			grid-template-columns: 100%;
			min-height: 100%;
			margin: 0;
			font-size: 1.4rem;
			line-height: 1.8;
			font-family: var(--font-body-family);
			font-style: var(--font-body-style);
			font-weight: var(--font-body-weight);
			overflow-x: hidden;
			}

			@media screen and (min-width: 750px) {
			body {
			font-size: 1.4rem;
			}
			}

			.spaced-section {
			margin-top: 5rem;
			}

			@media screen and (min-width: 990px) {
			.spaced-section {
			margin-top: {{ settings.indent_section }}px;
			}
			}

			{% endstyle %} 
      
       {{ 'base.css' | asset_url | stylesheet_tag }}
        {{ 'bootstrap-grid.css' | asset_url | stylesheet_tag }}
        {% if template contains 'product' %}
        {{ 'jquery.fancybox.css' | asset_url | stylesheet_tag }}
          {% endif %}
        {{ 'slick.css' | asset_url | stylesheet_tag }}
        {{ 'quickview.css' | asset_url | stylesheet_tag }}

      
		{%- unless settings.type_body_font.system? -%}
			<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
		{%- endunless -%}
		{%- unless settings.type_header_font.system? -%}
			<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
		{%- endunless -%}
        

		<script defer="defer">document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
			if (Shopify.designMode) {
				document.documentElement.classList.add('shopify-design-mode');
			}
		</script>
	
  {% render 'shogun-head' %}
  {% render "geo" %}
  </head>

	<body>
        <script defer="defer">window.KlarnaThemeGlobals={};{%case template.name%} {%when"product"%} {% if product.first_available_variant.price %}window.KlarnaThemeGlobals.data_purchase_amount = {{ product.first_available_variant.price }};{% endif %}window.KlarnaThemeGlobals.productVariants={{product.variants|json}};window.KlarnaThemeGlobals.documentCopy=document.cloneNode(true);{%when"cart"%} window.KlarnaThemeGlobals.data_purchase_amount={{cart.total_price}};window.KlarnaThemeGlobals.documentCopy=document.cloneNode(true);{%endcase%}</script>

		<a class="skip-to-content-link button visually-hidden" href="#MainContent">
			{{ "accessibility.skip_to_text" | t }}
		</a>

		{% section 'announcement-bar' %}
		{% section 'header' %}
		{% section 'information-bar' %}
		{% render 'breadcrumbs' %}
		<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
			{{ content_for_layout }}
		</main>

		{% section 'newsletter' %}
		{% section 'footer' %}

		{%- if request.page_type != 'cart' -%}
			{%- render 'cart-notification' -%}
		{%- endif -%}

		<ul hidden>
			<li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
		</ul>

		{{ 'jquery-3.6.0.js' | asset_url | script_tag }}
		{{ 'jquery.fancybox.js' | asset_url | script_tag }}
		{{ 'slick.js' | asset_url | script_tag }}
		{{ 'quickview.js' | asset_url | script_tag }}

		<script defer="defer">
			{% capture content %}{% include 'quickview' %}{% endcapture %}
			var content = {{ content | json }};
		</script>

		<script defer="defer">
			window.routes = {
				cart_add_url: '{{ routes.cart_add_url }}',
				cart_change_url: '{{ routes.cart_change_url }}',
				cart_update_url: '{{ routes.cart_update_url }}'
			};

			window.cartStrings = {
				error: `{{ 'sections.cart.cart_error' | t }}`,
				quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t }}`,
				empty: `{{ 'general.cart.empty_cart' | t }}`
			}

			window.variantStrings = {
				addToCart: `{{ 'products.product.add_to_cart' | t }}`,
				soldOut: `{{ 'products.product.sold_out' | t }}`,
				unavailable: `{{ 'products.product.unavailable' | t }}`,
			}

			window.theme = {
				moneyFormat: {{ shop.money_format | json }},
				quickviewText: `{{ settings.quickview }}`,
				quickviewMore: `{{ 'general.card.view__more' | t }}`
			}

		</script>
	</body>
</html>

After Changes:

<!doctype html>
<html class="no-js" lang="{{ request.locale.iso_code }}">
	<head>
      <link rel="alternate stylesheet" href="{{ 'base.css' | asset_url}}" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">
      <link rel="alternate stylesheet" href="{{ 'bootstrap-grid.css' | asset_url}}" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">
      <link rel="alternate stylesheet" href="{{ 'slick.css' | asset_url}}" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">
      <link rel="alternate stylesheet" href="{{ 'quickview.css' | asset_url}}" title="styles" as="style" onload="this.title='';this.rel='stylesheet'">
        <meta name="facebook-domain-verification" content="ht34ei49857br01r2b49qdxs1ie3cd" />
        <!-- Google Tag Manager -->
        <script defer="defer">
          window.dataLayer = window.dataLayer || [];
        </script defer="defer">
        <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
        })(window,document,'script','dataLayer','GTM-NK4ZC3P');</script>
        <!-- End Google Tag Manager -->
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width,initial-scale=1">
		<meta name="theme-color" content="">
		<link rel="canonical" href="{{ canonical_url }}">
		<link rel="preconnect" href="https://cdn.shopify.com" crossorigin>

		{%- if settings.favicon != blank -%}
			<link rel="icon" type="image/png" href="{{ settings.favicon | img_url: '32x32' }}">
		{%- endif -%}

		{%- unless settings.type_header_font.system? -%}
			<link rel="preconnect" href="https://fonts.shopifycdn.com" crossorigin>
		{%- endunless -%}

		<title>{{ page_title }}</title>

		{% if page_description %}
			<meta name="description" content="{{ page_description | escape }}">
		{% endif %}

		{% render 'meta-tags' %}

		<script src="{{ 'global.js' | asset_url }}" defer="defer"></script>

		{{ content_for_header }}

		{%- liquid
			assign body_font_bold = settings.type_body_font | font_modify: 'weight', 'bold'
			assign body_font_italic = settings.type_body_font | font_modify: 'style', 'italic'
			assign body_font_bold_italic = body_font_bold | font_modify: 'style', 'italic' %}

		{% style %}
			{{ settings.type_body_font | font_face: font_display: 'swap' }}
			{{ body_font_bold | font_face: font_display: 'swap' }}
			{{ body_font_italic | font_face: font_display: 'swap' }}
			{{ body_font_bold_italic | font_face: font_display: 'swap' }}
			{{ settings.type_header_font | font_face: font_display: 'swap' }}
			{{ settings.type_button_font | font_face: font_display: 'swap' }}
			{{ settings.type_header_menu_font | font_face: font_display: 'swap' }}

			:root {
			--font-body-family: {{ settings.type_body_font.family }}, {{ settings.type_body_font.fallback_families }};
			--font-body-style: {{ settings.type_body_font.style }};
			--font-body-weight: {{ settings.type_body_font.weight }};

			--font-heading-family: {{ settings.type_header_font.family }}, {{ settings.type_header_font.fallback_families }};
			--font-heading-style: {{ settings.type_header_font.style }};
			--font-heading-weight: {{ settings.type_header_font.weight }};
			--font-heading-letter-spacing: {{ settings.type_header_letter_spacing }}em;

			--font-body-scale: {{ settings.body_scale | divided_by: 100.0 }};
			--font-heading-scale: {{ settings.heading_scale | times: 1.0 | divided_by: settings.body_scale }};

			--font-button-family: {{ settings.type_button_font.family }}, {{ settings.type_button_font.fallback_families }};
			--font-button-style: {{ settings.type_button_font.style }};
			--font-button-weight: {{ settings.type_button_font.weight }};
			--font-button-text-transform: {{ settings.button_text_transform }};

			--font-button-family: {{ settings.type_button_font.family }}, {{ settings.type_button_font.fallback_families }};
			--font-button-style: {{ settings.type_button_font.style }};
			--font-button-weight: {{ settings.type_button_font.weight }};
			--font-button-text-transform: {{ settings.button_text_transform }};

			--font-header-menu-family: {{ settings.type_header_menu_font.family }}, {{ settings.type_header_menu_font.fallback_families }};
			--font-header-menu-style: {{ settings.type_header_menu_font.style }};
			--font-header-menu-weight: {{ settings.type_header_menu_font.weight }};
			--font-header-menu-text-transform: {{ settings.header_menu_text_transform }};

			{%- if settings.font_custom == 'custom' -%}
				--font-body-family: 'EudoxusSans';
				--font-body-style: normal;
				--font-body-weight: 500;

				--font-button-family: 'EudoxusSans';
				--font-button-style: normal;
				--font-button-weight: 600;

				--font-header-menu-family: 'EudoxusSans';
				--font-header-menu-style: normal;
				--font-header-menu-weight: 600;

				--font-heading-alt-family: 'Quentin';
				--font-heading-alt-style: normal;
				--font-heading-alt-weight: 400;
			{%- endif -%}

			{%- if settings.font_custom_heading == 'custom-1' -%}
				--font-heading-family: 'EudoxusSans';
				--font-heading-style: normal;
				--font-heading-weight: 600;
			{%- endif -%}

			{%- if settings.font_custom_heading == 'custom-2' -%}
				--font-heading-family: 'Coconat';
				--font-heading-style: normal;
				--font-heading-weight: 400;
			{%- endif -%}

			{%- if settings.font_custom_heading == 'custom-3' -%}
				--font-heading-family: 'Syne';
				--font-heading-style: normal;
				--font-heading-weight: 400;
			{%- endif -%}

			--color-base-text: {{ settings.colors_text.red }}, {{ settings.colors_text.green }}, {{ settings.colors_text.blue }};
			--color-title-text: {{ settings.colors_text_title.red }}, {{ settings.colors_text_title.green }}, {{ settings.colors_text_title.blue }};
			--color-secondary-text: {{ settings.colors_text_secondary.red }}, {{ settings.colors_text_secondary.green }}, {{ settings.colors_text_secondary.blue }};
			--color-base-background-1: {{ settings.colors_background_1.red }}, {{ settings.colors_background_1.green }}, {{ settings.colors_background_1.blue }};
			--color-base-background-2: {{ settings.colors_background_2.red }}, {{ settings.colors_background_2.green }}, {{ settings.colors_background_2.blue }};

			--color-secondary-element-background: {{ settings.colors_secondary_element_background.red }}, {{ settings.colors_secondary_element_background.green }}, {{ settings.colors_secondary_element_background.blue }};

			--color-announcement-bar-background: {{ settings.colors_background_announcement_bar.red }}, {{ settings.colors_background_announcement_bar.green }}, {{ settings.colors_background_announcement_bar.blue }};

			--color-section-border: {{ settings.colors_background_border_section.red }}, {{ settings.colors_background_border_section.green }}, {{ settings.colors_background_border_section.blue }};
			--color-base-solid-button-labels: {{ settings.colors_solid_button_labels.red }}, {{ settings.colors_solid_button_labels.green }}, {{ settings.colors_solid_button_labels.blue }};
			--color-base-outline-button-labels: {{ settings.colors_outline_button_labels.red }}, {{ settings.colors_outline_button_labels.green }}, {{ settings.colors_outline_button_labels.blue }};
			--color-base-button-background: {{ settings.colors_solid_button_background.red }}, {{ settings.colors_solid_button_background.green }}, {{ settings.colors_solid_button_background.blue }};
			--payment-terms-background-color: {{ settings.colors_background_1 }};

			}

			*,
			*::before,
			*::after {
			box-sizing: inherit;
			}

			html {
			box-sizing: border-box;
			font-size: calc(var(--font-body-scale) * 62.5%);
			height: 100%;

			}

			body {
			position: relative;
			display: grid;
			grid-template-rows: auto auto 1fr auto;
			grid-template-columns: 100%;
			min-height: 100%;
			margin: 0;
			font-size: 1.4rem;
			line-height: 1.8;
			font-family: var(--font-body-family);
			font-style: var(--font-body-style);
			font-weight: var(--font-body-weight);
			overflow-x: hidden;
			}

			@media screen and (min-width: 750px) {
			body {
			font-size: 1.4rem;
			}
			}

			.spaced-section {
			margin-top: 5rem;
			}

			@media screen and (min-width: 990px) {
			.spaced-section {
			margin-top: {{ settings.indent_section }}px;
			}
			}

			{% endstyle %} 
        {% if template contains 'product' %}
        {{ 'jquery.fancybox.css' | asset_url | stylesheet_tag }}
          {% endif %}
  
		{%- unless settings.type_body_font.system? -%}
			<link rel="preload" as="font" href="{{ settings.type_body_font | font_url }}" type="font/woff2" crossorigin>
		{%- endunless -%}
		{%- unless settings.type_header_font.system? -%}
			<link rel="preload" as="font" href="{{ settings.type_header_font | font_url }}" type="font/woff2" crossorigin>
		{%- endunless -%}
        

		<script defer="defer">document.documentElement.className = document.documentElement.className.replace('no-js', 'js');
			if (Shopify.designMode) {
				document.documentElement.classList.add('shopify-design-mode');
			}
		</script>
	
  {% render 'shogun-head' %}
  {% render "geo" %}
  </head>

	<body>
        <script defer="defer">window.KlarnaThemeGlobals={};{%case template.name%} {%when"product"%} {% if product.first_available_variant.price %}window.KlarnaThemeGlobals.data_purchase_amount = {{ product.first_available_variant.price }};{% endif %}window.KlarnaThemeGlobals.productVariants={{product.variants|json}};window.KlarnaThemeGlobals.documentCopy=document.cloneNode(true);{%when"cart"%} window.KlarnaThemeGlobals.data_purchase_amount={{cart.total_price}};window.KlarnaThemeGlobals.documentCopy=document.cloneNode(true);{%endcase%}</script>

		<a class="skip-to-content-link button visually-hidden" href="#MainContent">
			{{ "accessibility.skip_to_text" | t }}
		</a>

		{% section 'announcement-bar' %}
		{% section 'header' %}
		{% section 'information-bar' %}
		{% render 'breadcrumbs' %}
		<main id="MainContent" class="content-for-layout focus-none" role="main" tabindex="-1">
			{{ content_for_layout }}
		</main>

		{% section 'newsletter' %}
		{% section 'footer' %}

		{%- if request.page_type != 'cart' -%}
			{%- render 'cart-notification' -%}
		{%- endif -%}

		<ul hidden>
			<li id="a11y-refresh-page-message">{{ 'accessibility.refresh_page' | t }}</li>
		</ul>

		{{ 'jquery-3.6.0.js' | asset_url | script_tag }}
		{{ 'jquery.fancybox.js' | asset_url | script_tag }}
		{{ 'slick.js' | asset_url | script_tag }}
		{{ 'quickview.js' | asset_url | script_tag }}

		<script defer="defer">
			{% capture content %}{% include 'quickview' %}{% endcapture %}
			var content = {{ content | json }};
		</script>

		<script defer="defer">
			window.routes = {
				cart_add_url: '{{ routes.cart_add_url }}',
				cart_change_url: '{{ routes.cart_change_url }}',
				cart_update_url: '{{ routes.cart_update_url }}'
			};

			window.cartStrings = {
				error: `{{ 'sections.cart.cart_error' | t }}`,
				quantityError: `{{ 'sections.cart.cart_quantity_error_html' | t }}`,
				empty: `{{ 'general.cart.empty_cart' | t }}`
			}

			window.variantStrings = {
				addToCart: `{{ 'products.product.add_to_cart' | t }}`,
				soldOut: `{{ 'products.product.sold_out' | t }}`,
				unavailable: `{{ 'products.product.unavailable' | t }}`,
			}

			window.theme = {
				moneyFormat: {{ shop.money_format | json }},
				quickviewText: `{{ settings.quickview }}`,
				quickviewMore: `{{ 'general.card.view__more' | t }}`
			}

		</script>
	</body>
</html>

after this change I have got new errors that I was lost reading them.

 

errors after modifications.PNG

 

I will appreciate your help to solve this problem and I am sorry if the enquiry is too long and complicated for you to understand.

 

Thank You 

Accepted Solution (1)

SAN_MSWEB
Shopify Expert
1103 131 137

This is an accepted solution.

Hi @AnnaSleep1997 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Eliminate Render-Blocking Resources In Stockholm Theme, you need to optimize your store.

Few Tips to Speed Up your Shopify store-
1. Use compressed images
2. Optimize use of Shopify apps
3. Implement AMP
4. Consider Professional Help
5. Use a single Hero Image
6. Minify Js/Css files




Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin

View solution in original post

Reply 1 (1)

SAN_MSWEB
Shopify Expert
1103 131 137

This is an accepted solution.

Hi @AnnaSleep1997 


I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Eliminate Render-Blocking Resources In Stockholm Theme, you need to optimize your store.

Few Tips to Speed Up your Shopify store-
1. Use compressed images
2. Optimize use of Shopify apps
3. Implement AMP
4. Consider Professional Help
5. Use a single Hero Image
6. Minify Js/Css files




Regards,

San

If it’s helpful to you, please mark it as a solution.  


Need Help with Shopify Design, Migration, Speed, or Custom tasks?  
email: hi@mswebdesigner.com
Try Our Conversion Booster app to get more sales | Connect Our Founder Linkedin