Question

我正在尝试优化Shopify网站，我注意到图像是通过此脚本加载的

{% assign featured_image = product.selected_or_first_available_variant.featured_image | default: product.featured_image %}
<div class="flexslider product_gallery {% if product-images == blank %}product_slider{% endif %}" id="product-{{ product.id }}-gallery">
  <ul class="slides">
    {% for image in product.images %}
    <li data-thumb="{{ image | product_img_url: 'small' }}" data-title="{% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}{{ product.title }}{% else %}{{ image.alt | escape }}{% endif %}">
      {% if image.alt contains 'youtube' or image.alt contains 'vimeo' %}
      {% assign src = image.alt | split: 'src="' %}
      {% assign src = src[1] | split: '"' | first %}
      {% if src contains '?' %}
      {% assign src = src | append: '&amp;autoplay=1' %}
      {% else %}
      {% assign src = src | append: '?autoplay=1' %}
      {% endif %}
      <div class="video-container {% if image.alt contains 'vimeo' %}vimeo{% else %}youtube{% endif %}">
        <div>
          <a href="{{ src }}" class="fancybox fancybox.iframe" data-fancybox-group="{{ product.id }}" title="{{ product.title | escape }}">
            {{ image.alt }}
          </a>
        </div>
      </div>
      {% else %}
      <a href="{{ image | product_img_url: 'master' }}" class="fancybox" rel="group" data-fancybox-group="{{ product.id }}" title="{{ image.alt | escape }}">
        <img width="64" height="64" src="{{ 'loader.gif' | asset_url }}" data-src="{{ image | product_img_url: 'large' }}" data-src-retina="{{ image | product_img_url: '1024x1024' }}" alt="{{ image.alt | escape }}" data-index="{{ forloop.index0 }}" data-image-id="{{ image.id }}" data-cloudzoom="zoomImage: '{{ image | product_img_url: 'master' }}', tintColor: '{{ settings.shop_bg_color }}', zoomPosition: 'inside', zoomOffsetX: 0, touchStartDelay: 250" class="cloudzoom {% if featured_image.id == image.id %}featured_image{% endif %}" />
      </a>
      {% endif %}
    </li>
    {% endfor %}
  </ul>
</div>

现在一切似乎都很好但是当我检查产品页面上图像的加载时间时，每张图片显示大约2到2.5秒的加载时间，即使图像大小约为30kb，请参见图像here

任何人都知道为什么会这样，以及我如何解决这个问题？似乎页面正在使用名为＆＃39; flexslider＆＃39;谷歌搜索了一段时间后，我无法找到问题所在。

Website

提前谢谢你。

Answer 1

如果您的主题是调用参数加载时的主图像大小，如果您的产品图像非常大/重，可能会有点长。

您可以使用尺寸参数限制加载的尺寸，如下所述：https://help.shopify.com/themes/liquid/filters/url-filters#size-parameters

图片需要太长时间才能在Shopify上加载

1 个答案: