图片在 Shopify 上加载时间过长答案

【问题标题】：Images taking too long to load on Shopify图片在 Shopify 上加载时间过长
【发布时间】：2018-02-08 18:48:45
【问题描述】：

我正在尝试优化 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>

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

有人知道为什么会发生这种情况以及如何解决这个问题吗？似乎该页面正在使用称为“flexslider”的东西，在谷歌搜索了一段时间后，我找不到问题所在。

Website

提前谢谢你。

【问题讨论】：

也许是你的连接。我看到224ms之类的。你在哪个页面？
@bknights 我在这个页面上wearsaga.com/products/3d 并通过 chrome 开发工具检查它，图像需要 2.3 秒才能加载，这很奇怪。
同样的交易。这些图片来自 Shopify 的 CDN。我每个都在 300 毫秒以下。尝试 ping cdn.shopify.com 看看你得到了什么。

标签： javascript image shopify liquid

【解决方案1】：

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

您可以使用此处解释的尺寸参数来限制加载的尺寸：https://help.shopify.com/themes/liquid/filters/url-filters#size-parameters

【讨论】：