Defer loading scripts until they are required

Yuly0423
Tourist
8 0 1

Hello! My website takes over 7 seconds to load and PageSpeed Insights recommend to defer loading scripts until they are required (up to 3 seconds in savings). Can you please help me to adjust the code to increase the speed? Here is the current theme.liquid code.

 

  <!doctype html>
<!--[if lt IE 7]><html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]><html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]><html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if IE 9 ]><html class="ie9 no-js"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js"> <!--<![endif]-->
<head>{% render 'pagefly-head' %}
{% include 'kiwiSizing' %}

  <!-- Basic page needs ================================================== -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
  <!-- Title and description ================================================== -->
   {% unless template contains 'search' %}
  <title>
    {{ page_title }}
    {% if current_tags %} &ndash; {{'general.title.tagged' | t}} 
    "{{ current_tags | join: ', ' }}"
    {% endif %}
    {% if current_page != 1 %} &ndash; {{'general.title.page' | t}} 
    {{ current_page }}
    {% endif %}

    {% unless page_title contains shop.name %} &ndash; 
    {{ shop.name }}
    {% endunless %}
  </title>
  {% else %}
  <title>
   {{'general.title.search' | t}} {{search.results_count}} {{'general.title.search_results' | t}} "{{search.terms}}"  &ndash; {{ shop.name }} 
  </title>
  {% endunless %}

  {% if page_description %}
  <meta name="description" content="{{ page_description | escape | split: '[/countdown]' | last | strip_html }}">
  {% endif %}

  <!-- Product meta ================================================== -->
  {% render 'fb-open-graph-tags' %}
  {% render 'twitter-card' %}

  <!-- Helpers ================================================== -->
  <link rel="canonical" href="{{ canonical_url }}">
  <link canonical-shop-url="{{ shop.url }}/">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <link rel="preload" href="{{ 'vendor.min.css' | asset_url }}" as="style">
  <link rel="preload" href="{{ 'theme-styles.min.css' | asset_url }}" as="style">
  <link rel="preload" href="{{ 'theme-styles-responsive.min.css' | asset_url }}" as="style">
  <link rel="preload" href="{{ 'theme-settings.css' | asset_url }}" as="style">
  <!-- <link rel="preload" href="{{ 'header-05.css' | asset_url }}" as="style"> -->
  <link rel="preload" href="{{ 'header-06.css' | asset_url }}" as="style">
  <!-- <link rel="preload" href="{{ 'header-07.css' | asset_url }}" as="style"> -->
  <!-- <link rel="preload" href="{{ 'header-08.css' | asset_url }}" as="style"> -->
  <!-- <link rel="preload" href="{{ 'footer-06.css' | asset_url }}" as="style"> -->
  <link rel="preload" href="{{ 'footer-07.css' | asset_url }}" as="style">
  <!-- <link rel="preload" href="{{ 'footer-08.css' | asset_url }}" as="style"> -->
  <!-- <link rel="preload" href="{{ 'footer-09.css' | asset_url }}" as="style"> -->
  <!-- <link rel="preload" href="{{ 'product-skin.css' | asset_url }}" as="style"> -->
  <!-- <link rel="preload" href="{{ 'layout_style_1170.css' | asset_url }}" as="style"> -->
  <link rel="preload" href="{{ 'layout_style_fullwidth.css' | asset_url }}" as="style">
  <!-- <link rel="preload" href="{{ 'layout_style_flower.css' | asset_url }}" as="style"> -->
  <!-- <link rel="preload" href="{{ 'layout_style_suppermarket.css' | asset_url }}" as="style"> -->
  <!-- <link rel="preload" href="{{ 'layout_style_surfup.css' | asset_url }}" as="style"> -->
  <!-- <link rel="preload" href="{{ 'product-supermarket.css' | asset_url }}" as="style"> -->
  <link rel="preload" href="{{ 'jquery.min.js' | asset_url }}" as="script">

  <!-- Favicon -->
  {% if settings.favicon != blank %}
  <link rel="shortcut icon" href="{{ settings.favicon | img_url: '32x32' }}" type="image/png">
  {% endif %}
  
  <!-- Styles -->
  {% render 'css-variables' %}
  {% render 'head_styles' %}
  
   <!-- Scripts -->
  {% render 'head_scripts' %}

  <!-- Header hook for plugins ================================ -->


  <!--[if lt IE 9]>
  {{ '//html5shiv.googlecode.com/svn/trunk/html5.js' | script_tag }}
  <![endif]-->
    {{ content_for_header }}

  {% comment %}
    If you store has customers disabled, you can remove the following JS file
  {% endcomment %}
  
  {% if template contains 'customers' %}
    {{ 'shopify_common.js' | shopify_asset_url | script_tag }}
    {{ 'customer_area.js'  | shopify_asset_url | script_tag }}
  {% endif %}

  {% render 'linked-options' %}
  {% if template contains 'product' %}
  <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js" defer></script>
  {% endif %}

  {% include 'alireviews_core' %} 
  <meta name="google-site-verification" content="vjJtRRiKWoR8Ai-MS4sr-Sc3ICtxUg1bd5Y0wfw0Wrw" />
 </head>

    {% if settings.layout_body == 'full' %}    
        {%- assign layout_class = 'body-full' -%}   
    {% elsif settings.layout_body == 'boxed' %} 
        {%- assign layout_class = 'body-boxed' -%} 
    {% endif %}

    {% if settings.header_layout == 'vertical' %}
        {%- assign header_class = 'header-vertical-tpl' -%}
    {% elsif settings.header_layout == 'parallax' %}
       {%- assign header_class = 'header-parallax-tpl' -%}
    {% elsif settings.header_layout == '02' %}
        {%- assign header_class = 'header-02-tpl' -%}
    {% endif %}

    {% if settings.layout_home == 'layout_home_3' %}
      {%- assign home_class = 'layout_home_3' -%}
    {% elsif settings.layout_home == 'layout_home_4' %}
      {%- assign home_class = 'layout_home_4' -%}
    {% elsif settings.layout_home == 'layout_home_5' %}
      {%- assign home_class = 'layout_home_5' -%}
    {% elsif settings.layout_home == 'layout_home_6' %}
      {%- assign home_class = 'layout_home_6' -%}
    {% elsif settings.layout_home == 'layout_home_7' %}
      {%- assign home_class = 'layout_home_7' -%}
    {% elsif settings.layout_home == 'layout_home_9' %}
      {%- assign home_class = 'layout_home_9' -%}
    {% elsif settings.layout_home == 'layout_home_14' %}
      {%- assign home_class = 'layout_home_14' -%}
    {% elsif settings.layout_home == 'layout_home_18' %}
      {%- assign home_class = 'layout_home_18' -%}
    {% endif %} 


<body data-url-lang="{{ routes.cart_url }}" id="{{ page_title | handle }}" class="template_{{page.title }} {{ header_class }} {{ layout_class }} {% if customer %}customer-logged-in{% endif %}
{% if template.suffix == 'landing' %} template-index{% else %} template-{{ template | replace: '.', ' ' | truncatewords: 1, '' | handle }}{% endif %} {{settings.style_product_grid}}{% if settings.layout_style == 'layout_style_1' %} layout_default{% else %} {{settings.layout_style}}{% endif %} {{ home_class }}
{% unless settings.enable_before_you_leave_mb %} before-you-leave-disableMobile{% endunless %}{% if settings.product_layout == 'skin_1' %} product_layout_skin_1{% elsif settings.product_layout == 'supermarket' %} product_layout_supermarket{% endif %}{% if settings.layout_body == 'custom_width' %} custom_width{% endif %}{% if settings.enable_button_add_to_cart_color %} enable_button_add_to_cart_color{% endif %}{% if settings.enable_hover_video_product_items %} enable_hover_video_product_items{% endif %}{% unless settings.enable_search %} no-search-header{% endunless %}
" data-page-handle="{{ page_title | handle }}">
  	{% if template contains 'index' %}  
    <h1 style="display: none">{{ page_title | split: '|' | first }}</h1>
    {% endif %}
    {% render 'wrapper-header' %}   

    {% if settings.header_layout == 'vertical' %}
    <div class="flex-nav-vertical">
    {% endif %}    

    {% if settings.header_layout == 'vertical' %}
    {% section 'navigation-vertical-menu' %}
    {% endif %}
	{% render 'scheme' %}
    <div class="wrapper-container wrapper-body">	
        <main class="main-content" role="main">      
            {{ content_for_layout }}
        </main>

        {% if settings.layout_style == 'layout_style_surfup' %}
          {% section 'home-brands' %}
        {% endif %}

        {% if settings.enable_ask_an_expert %}
          {% if settings.enable_ask_an_expert_sticky %}
          <div class="ask-an-expert-sticky" style="display: none;">
            <a href="javascript&colon;void(0)" title="Ask An Expert" class="btn_ask_an_expert" data-toggle="modal" data-target="#ask_an_expert">
              {% if settings.image_ask_an_expert_sticky != blank %}
                <img data-srcset="{{ settings.image_ask_an_expert_sticky | img_url: '200x200' }}" class="lazyload" data-sizes="auto">
              {% else %}
                <div class="not_img">
                    200 x 100px
                </div>   
              {% endif %}
            </a>
          </div>
          {% endif %}    
        {% endif %}    

        {% if settings.footer_layout == 'default' %}        
        {% section 'footer' %}

    <script src="//cdn.codeblackbelt.com/js/modules/also-bought/main.min.js?shop=sunsetfashionla.myshopify.com" defer></script>

    <script src="//cdn.codeblackbelt.com/js/modules/frequently-bought-together/main.min.js?shop=sunsetfashionla.myshopify.com" defer></script>
        {% elsif settings.footer_layout == 'parallax' %}
        {% section 'footer-parallax' %}
        {% elsif settings.footer_layout == '02' %}
        {% section 'footer-2' %}
        {% elsif settings.footer_layout == '03' %}
        {% section 'footer-3' %}
        {% elsif settings.footer_layout == '04' %}
        {% section 'footer-4' %}
        {% elsif settings.footer_layout == '05' %}
        {% section 'footer-5' %}
        {% elsif settings.footer_layout == '06' %}
        {% section 'footer-6' %}
        {% elsif settings.footer_layout == '07' %}
        {% section 'footer-7' %}
        {% elsif settings.footer_layout == '08' %}
        {% section 'footer-8' %}
        {% elsif settings.footer_layout == '09' %}
        {% section 'footer-9' %}
        {% endif %}
        {% section 'halo-toolbar-mobile' %}
        
        <div class="footbar-fixed {% if template contains 'product' %}footbar-fixed-product{% endif %}">
            {% section 'someone-purchased' %}
            {% section 'GDPR-modal' %}
            {% if template contains 'product' %}
              {% if settings.display_sticky %} 
                  {% render 'sticky-add-to-cart' with product as product %}
              {% endif %}
            {% endif %}
        </div>
        
      {% if settings.enable_backtotop %}
        <div id="back-top" style="display: none;">
            <a class="nav_up" href="#top" title="Back to top">
                <i class="fa fa-angle-up" aria-hidden="true"></i>
            </a>
        </div>  
      {% endif %}
    </div>

    {% if settings.header_layout == 'vertical' %}
    </div>
    {% endif %}

    {% if settings.enable_compare_product and template == 'collection' %}
      <div class="compare-link">
        <a href="javascript&colon;void(0)" data-compare-selected>
          <span class="compare-text" {% if settings.enable_multilang %}data-translate="collections.general.compare_selected"{% endif %}>{{ 'collections.general.compare_selected' | t }}</span>
          <span class="countPill countPill--positive countPill--alt" data-compare-count></span>
        </a>
      </div>
    {% endif %}
    
    {% render 'footer_scripts' %}
    
    {% render 'sweettooth-widgets' %}

    {% render 'search-autocomplete' %}
    
    {% if settings.header_layout == 'default' %}
      {% render 'customer_links' %}
    {% else %}
    <div class="translate-header" data-translate-header>
        {% render 'customer_links' %}
        {% render 'wrapper-top-cart' %}
    </div>
    {% endif %}

    {% if settings.enable_search %}
      {% render 'halo-sidebar-search' %}
    {% endif %}

    {% render 'size-chart' %}
  
  	{% render 'size-chart-quickview' %}
        
    {% render 'message-modal' %}
    
    {% render 'newsletter' %}      
    
    {% if template contains 'product' or settings.enable_ask_an_expert_sticky %}
      {% render 'ask_an_expert' %}
    {% endif %}

    {% if template contains 'product'%}
      {% render 'compareColor-popup' %}
    {% endif %}
    
    {% render 'recently-viewed-products'%}
    <div class="wrapper-overlay"></div>

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

    <!-- Meta Pixel Code -->
    <script>
      !function(f,b,e,v,n,t,s)
      {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
      n.callMethod.apply(n,arguments):n.queue.push(arguments)};
      if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
      n.queue=[];t=b.createElement(e);t.async=!0;
      t.src=v;s=b.getElementsByTagName(e)[0];
      s.parentNode.insertBefore(t,s)}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '179637034184795');
      fbq('track', 'PageView');
    </script>
    <noscript><img height="1" width="1" style="display:none"
      src="https://www.facebook.com/tr?id=179637034184795&ev=PageView&noscript=1"
    /></noscript>
    <!-- End Meta Pixel Code -->

<!-- **BEGIN** Hextom FSB Integration // Main Include - DO NOT MODIFY -->
    {% render 'hextom_fsb_main', product: product, customer: customer %}
    <!-- **END** Hextom FSB Integration // Main Include - DO NOT MODIFY -->
{% render 'clever-infinity' %}</body>
</html>{% include "fireapps-aliorder-bulk-action-edit-product" %}

 

 

 

Screen Shot 2023-04-14 at 6.27.23 PM.png

Replies 2 (2)

Ishan_Makkar
Shopify Expert
115 7 8

You can use https://websitespeedy.com to implement defer and Preload to improve the speed.
You just need to install the tool and team will implement everything for you.

Thanks,
Ishan

Shopify Expert Since 2012
Sr. Web Solution Manager at MakkPress Technologies
Website Speedy (SAAS tool for Shopify Speed Optimization - Trusted by over 300 Shopify store owners)
Contact Us or Hire Us Or Email Us
Epsryn
Shopify Partner
9 0 5

Do you guarantee you don't just implement the JS hacks and LCP hack to trick pagespeed but actually make realy  changes that affect real user experience?