Happening now! Shopify Community AMA: PayPal Express Migration to Shopify Payments | Ask your questions to be answered by our team.

The featured collection slider performance issue

The featured collection slider performance issue

i_yasar
Visitor
2 0 0

I made a featured collection slider and named it product-slider. The issue is currently 1 slider adds 12 seconds in pagespeed.insights. Can anyone help me out? Here is my code:

{{ 'product-slider.css' | asset_url | stylesheet_tag }}
{% assign background_image = section.settings.background_image | default: '' %}
{% assign background_color = section.settings.background_color | default: '#ffffff' %}

<div class="product-slider" style="background-image: url('{{ background_image | img_url: '2048x' }}'); background-color: {{ background_color }};">
  {% if section.settings.title != blank %}
  <div class="section-header text-center product-slider-header">
    <h2>{{ section.settings.title | escape }}</h2>
  </div>
  {% endif %}

  {%- assign collection = collections[section.settings.collection] -%}
  {%- assign product_count = section.settings.product_count | default: 4 -%}

  {% assign product_width_percentage = 100 | divided_by: product_count %}

  
  <div class="products-carousel js-flickity">
    {% for product in collection.products %}
    <div class="carousel-product-slider-cell" style="width: {{ product_width_percentage | minus: 5 }}%;">
      <a href="{{ product.url | within: collection }}">
       <img class="img-explore lazypreload lazyautosizes lazyloaded lazyload" src="{{ product.featured_image | img_url: 'master' }}" alt="">
        <div class="hover-actions">
          <div class="product-slider-addtocart-wrapper">
            <form method="post" action="/cart/add" class="product-slider-addtocart-product-form">
              <input type="hidden" name="id" value="{{ product.variants.first.id }}">
                <button aria-label="Sepete ekle" name="add" class="product-slider-addtocart-btn product-slider-addtocart-select-options">
                  <span>
                    <svg width="40" height="40" viewBox="0 0 40 40">
                      <g id="product-slider-icon-cart" transform="scale(0.03125 0.03125)">
                        <path d="M448.217 818.845c-56.377 0-102.256 45.902-102.256 102.256 0 56.377 45.879 102.256 102.256 102.256s102.256-45.879 102.256-102.256c0-56.379-45.857-102.256-102.256-102.256zM448.217 977.908c-31.312 0-56.807-25.472-56.807-56.807 0-31.312 25.495-56.807 56.807-56.807s56.807 25.495 56.807 56.807c0.003 31.335-25.472 56.807-56.807 56.807z"></path>
                        <path d="M768.66 818.845c-56.377 0-102.256 45.902-102.256 102.256 0 56.377 45.879 102.256 102.256 102.256 56.354 0 102.256-45.879 102.256-102.256 0-56.379-45.902-102.256-102.256-102.256zM768.66 977.908c-31.335 0-56.807-25.472-56.807-56.807 0-31.312 25.472-56.807 56.807-56.807 31.29 0 56.807 25.495 56.807 56.807 0.003 31.335-25.517 56.807-56.807 56.807z"></path>
                        <path d="M1019.164 259.373c-4.294-5.499-10.886-8.702-17.883-8.702h-768.3l-63.329-233.255c-0.137-0.5-0.5-0.886-0.682-1.364-0.5-1.476-1.25-2.773-2.046-4.090-0.749-1.25-1.431-2.477-2.385-3.545-0.931-1.068-2.021-1.865-3.159-2.726-1.182-0.909-2.317-1.795-3.659-2.454-1.25-0.637-2.591-0.953-3.975-1.364-1.476-0.431-2.907-0.794-4.476-0.909-0.545-0.022-1.001-0.319-1.568-0.319h-124.978c-12.543 0-22.724 10.181-22.724 22.724s10.181 22.724 22.724 22.724h107.595l63.239 232.959 113.572 460.078c2.499 10.156 11.612 17.293 22.065 17.293h558.448c10.452 0 19.543-7.112 22.065-17.293l113.617-460.282c1.7-6.796 0.154-13.955-4.162-19.476zM869.871 710.976h-522.865l-102.39-414.858h727.667l-102.413 414.858z"></path>
                      </g>
                    </svg>
                    <span class="product-slider-addtocart-btn-text">Sepete ekle</span>
                  </span>
                </button>
            </form>
          </div>
          <div class="product-slider-quickview-btn">
            <a href="{{ product.url }}"  data-href="{{ product.url }}">
              <svg width="40" height="40" viewBox="0 0 40 40">
                <g id="product-slider-icon-quick-view" transform="scale(0.03125 0.03125)">
                  <path d="M1009.004 493.256c-2.256-2.82-56.254-69.828-143.786-137.492-51.696-39.962-104.462-71.87-156.832-94.834-66.48-29.152-132.556-43.932-196.386-43.932-63.832 0-129.904 14.782-196.386 43.932-52.37 22.962-105.136 54.87-156.834 94.834-87.53 67.666-141.528 134.674-143.784 137.494l-14.996 18.742 14.998 18.744c2.256 2.82 56.252 69.828 143.784 137.492 51.696 39.962 104.462 71.87 156.834 94.834 66.48 29.152 132.554 43.932 196.386 43.932 63.83 0 129.904-14.782 196.386-43.932 52.37-22.962 105.136-54.87 156.832-94.834 87.53-67.666 141.53-134.674 143.786-137.492l14.994-18.744-14.996-18.744zM827.402 621.624c-74.24 57.196-189.226 125.374-315.402 125.374-126.18 0-241.162-68.178-315.402-125.374-55.36-42.65-97.042-85.794-118.512-109.612 52.994-58.698 229.246-235.006 433.916-235.006 126.178 0 241.162 68.178 315.402 125.374 55.366 42.654 97.050 85.8 118.522 109.622-21.474 23.82-63.158 66.968-118.524 109.622z"></path>
                  <path d="M512 309.976c-111.396 0-202.024 90.63-202.024 202.024s90.63 202.024 202.024 202.024 202.026-90.628 202.026-202.024-90.63-202.024-202.026-202.024zM512 654.018c-78.308 0-142.018-63.71-142.018-142.018s63.71-142.018 142.018-142.018 142.018 63.71 142.018 142.018c0 78.308-63.71 142.018-142.018 142.018z"></path>
                  <path d="M512 419.322c-51.102 0-92.678 41.576-92.678 92.678s41.576 92.68 92.678 92.68 92.678-41.576 92.678-92.68c0-51.104-41.574-92.678-92.678-92.678zM512 544.672c-18.014 0-32.67-14.656-32.67-32.672s14.656-32.67 32.67-32.67 32.67 14.656 32.67 32.67c0.002 18.014-14.654 32.672-32.67 32.672z"></path>
                </g>
              </svg>
            </a>
           </div>
        </div>
       <div class="product-slider-text-wrapper"> 
        <h4 class="product-slider-text">{{ product.title }}</h4>
       </div>
        <div class="product-pricing">
          {% include 'product-price-listing', variant: product.selected_variant, product: product %}
        </div>
      </a>
    </div>
  {% endfor %}
</div>
</div>


<script>
  $(window).on('load', function() {
    setTimeout(function() {
      $('.product-slider').css('opacity', 1);
    }, 500);

    setTimeout(function() {
      $('.carousel-product-slider-cell').css('opacity', 1);
    }, 2000);

    $('.js-flickity').flickity({
      contain: true,
      cellAlign: 'left',
      freeScroll: true,
      groupCells: getGroupCells()
    });

    function getGroupCells() {
      return window.innerWidth >= 749 ? 6 : 1;
    }

    $(window).on('resize', function() {
      $('.js-flickity').flickity('destroy');
      $('.js-flickity').flickity({
        contain: true,
        cellAlign: 'left',
        freeScroll: true,
        groupCells: getGroupCells()
      });
    });
  });
</script>


{% schema %}
{
  "name": "Collection Slider",
  "settings": [
    {
      "type": "text",
      "id": "title",
      "label": "Heading",
      "default": "Featured Collection"
    },
    {
      "type": "collection",
      "id": "collection",
      "label": "Collection"
    },
    {
      "type": "radio",
      "id": "product_count",
      "label": "Number of products to display per row",
      "options": [
        {
          "value": "6",
          "label": "8"
        },
        {
          "value": "5",
          "label": "6"
        }
      ],
      "default": "6"
    },
    {
      "type": "color",
      "id": "background_color",
      "label": "Background Color",
      "default": "#ffffff"
    },    
    {
      "type": "image_picker",
      "id": "background_image",
      "label": "Background Image"
    }
  ],
  "presets": [
    {
      "category": "Collection",
      "name": "Collection Slider",
      "settings": {}
    }
  ]
}
{% endschema %}
Reply 1 (1)

i_yasar
Visitor
2 0 0

I tried using every single lazyload library there is and it still doesn't lazyload (lazypreload lazyautosizes lazyloaded lazyload). Also shopify is supposed to adjust images and make better performance but for some reason when it comes to slides it doesn't. I want to add 4 slides and when I tested, it added 80 seconds which is awful.