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 %}