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
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.
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