FROM CACHE - en_header
Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Defer loading scripts until they are required

Defer loading scripts until they are required

Yuly0423
Tourist
8 0 1
‎04-14-2023 09:31 PM

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

Labels:
3,414 Views
0 Likes
Report
Replies 2 (2)

Ishan_Makkar
Shopify Partner
115 7 8
‎04-15-2023 05:37 PM

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
3,385 Views
0 Likes
Report
In response to Ishan_Makkar

Epsryn
Shopify Partner
17 0 9
‎12-28-2023 10:24 PM

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?

2,383 Views
1 Like
Report

Community Blog Articles

top members.webp
Holiday Cheers to Our Community | November '24

Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...

By JasonH Dec 6, 2024
starting.webp
Dropshipping Viral Products to Sell in 2025

Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...

By JasonH Nov 27, 2024
top members.webp
Shining a spotlight on our top members of October 2024!

Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...

By JasonH Nov 14, 2024
Terms of Service Privacy Policy