Shopify Theme 开发 —— 性能优化

shopify,theme · 浏览次数 : 0

小编点评

**关于 Shopify Theme 的性能优化** **1.卸载未使用的应用程序** * 卸载所有与主题无关的应用程序,释放系统资源。 * 确保所有未使用应用程序被卸载。 **2.适当添加必要的埋点** * 添加最相关的图片作为页面埋点。 * 设置合适的图片格式和大小。 **3.为不同的设备提供最适合的图片** * 使用 <image_url> 和 <image_tag>过滤器生成响应式图像。 * 设置图片的尺寸和格式以适应不同设备。 **4.保持主题的版本最新** * Shopify 提供定期更新的主题,因此保持主题版本最新可以改善性能。 **5.图片格式建议** * 使用 JPEG 或 JPG 格式的图片,如果支持,可以使用 WEBP、AVIF、JPEG XL 等新格式。 * 不要使用 GIF 格式,因为 GIF 格式不支持所有浏览器。 * 选择 MP4 小图标格式的视频。 **6.根据屏幕尺寸提供不同的图片** * 使用 <source>标签设置不同的图片尺寸。 * 此方法可根据设备像素比 (DPR) 动态调整图片大小。 **7.避免手机端图片过大** * 使用 <picture>标签设置图片尺寸,并根据屏幕尺寸动态调整。 **8.结论** * 使用 <image_url> 和 <image_tag>过滤器选择最合适的图片格式。 * 优化图片尺寸和格式以提高性能。 * 采用渐进加载技术,确保图片加载完成后立即可见。

正文

一、概述

关于 Shopify Theme 的性能优化,通常有以下几点:

1、卸载未使用的应用程序

有些 app 会在 theme 里面插入一些代码,即使 app 未被使用,也可能会加载一些脚本文件,影响页面渲染速度,所以建议不使用的 app 都卸载掉。

2、适当埋点,太多的埋点上报会影响网站速度

添加过多的埋点,也会影响网页加载速度,所以要适当添加必要的埋点。

3、为不同的设备提供最适合的图片

在下文中细说。

4、保持主题的版本最新

主题的更新经常会涉及到性能的优化,所以如果使用的是 Shopify 主题商店中的主题,最好保持主题的版本最新;如果是基于 dawn 主题自主开发的,也应该随时关注官方代码更新。

二、如何提供最适合的图片

官方博客:Shopify 上的响应式图片与 Liquid

1、目标

  • 图片质量高
  • 图片文件大小较小
  • 图片以最佳方式加载,页面呈现快

2、image_url 和 image_tag 过滤器

shopify 提供了image_url 和 image_tag 过滤器来帮助生成响应式图像。

① image_url

用来生成图片在 Shopify CDN 的地址。它可以调整大小、裁剪、添加填充以及生成多种文件格式。

<!-- Input -->
{{ section.settings.image | image_url: width: 300 }}

<!-- Output -->
//cdn.shopify.../files/dog.jpg?width=300

② image_tag

用来生成 HTML 的 img 标签,默认图片懒加载。

<!-- Input -->
{{ section.settings.image | image_url: width: 300 | image_tag }}

<!-- Output -->
<img src="//cdn.shopify.../files/dog.jpg?width=300" width="300" height="393" />

3、关于图片格式

推荐 JPEG 或 JPG,如果浏览器兼容性允许,可以考虑 WEBP、AVIF、JPEG XL 等新的文件格式

不使用GIF,如果需要动图,也选择MP4

小 icon 之类的选择 svg 格式

⭐️ 使用 image_url 过滤器,Shopify image API 会自动选择最合适的图片格式,可能是 WEBP、AVIF,在不支持新文件格式的浏览器,也会选择合适的格式

4、根据宽度设置不同尺寸图片

这里需要用到 img 标签的 srcset 和 sizes 属性。

<!-- Input -->
{{ section.settings.image |
  image_url: width: 600 |
  image_tag:
    widths: '300, 600',
    sizes: '(min-width: 400px) 298px, 78.75vw',
    style: 'width: 300px' }}
<!-- Output -->
<img
  src="//cdn.shopify.../files/dog.jpg?width=600"
  srcset="
    //cdn.shopify.../files/dog.jpg?width=300 300w,
    //cdn.shopify.../files/dog.jpg?width=600 600w"
  width="600"
  height="785"
  sizes="(min-width: 400px) 298px, 78.75vw"
  style="width: 300px">

在上面的代码中,给浏览器提供了 2 个候选文件 - 一个为 300 像素宽,另一个为 600 像素宽,浏览器将根据用户的屏幕尺寸和设备像素比 (DPR) 来最终决定下载哪个。

⚠️ 注意不要过度使用 srcset,尤其是网站流量不高的情况下,用户访问的图片可能还没有在 CDN 中缓存,这样加载时间会更长。

如果没有多尺寸图片,那么建议选择 2x 图。

5、<picture> 标签

<picture> 标签是一个比较新的 HTML 标签,可以根据浏览器支持的类型、屏幕尺寸等提供合适的图片。

① 根据浏览器选择合适的图片类型(<source>的type属性)

<picture>
  <source type="image/avif" srcset="pug_life.avif" />
  <source type="image/webp" srcset="pug_life.webp" />
  <img src="pug_life.jpg" alt="pug wearing a striped t-shirt like a boss" />
</picture>

  浏览器会按顺序读取<picture>里面<source>的类型,提供第一个匹配到的图片源,都不支持,则选择<img>保底。(在 liquid 中使用 image_url 过滤器可以达到一样的效果)

②根据屏幕尺寸提供不同的图片(<source>的media属性)

<picture>
  <source
    media="(min-width: 800px)"
    srcset="wide_800.jpg 800w, wide_1600.jpg 1600w"
  />
  <source
    media="(min-width: 400px)"
    srcset="narrow_400.jpg 400w, narrow_800.jpg 800w"
  />
  <img src="wide_800.jpg" alt="Woman with dog looking at Grand Canyon" />
</picture>

③避免手机端图片过大

<picture>
 <source
   media="(max-width: 800px)"
   srcset="
     {{ section.settings.image | image_url: width: 300 }} 1x,
     {{ section.settings.image | image_url: width: 600 }} 2x,
     ">
 {{ section.settings.image |
   image_url: width: 2000 |
   image_tag:
     widths: '1000, 2000',
     sizes: '(min-width: 1000px) 760px, (min-width: 800px) calc(100vw - 380px), (min-width: 400px) 298px, 78.75vw',
     class: 'mobile-size-fix' }}
</picture>

  这个例子中800px以下的屏幕,只提供1x和2x的图,不会因为手机分辨率过高提供的图片太大。(1x的屏现在也很少了,这个1x可以按需保留)

6、结论

为了更好的加载图片,在写的时候,至少要用上 image_url 和 image_tag 过滤器,这样 Shopify image API 会帮你选择最合适的图片格式,还能懒加载。

{{ section.settings.image | image_url: width: 300 | image_tag }} 

其次,如果同一张图,想在不同尺寸的设备上,加载不同尺寸的图,可以用 image_tag 的 sizes 和 widths

{{ section.settings.image |
  image_url: width: 600 |
  image_tag:
    widths: '300, 600',
    sizes: '(min-width: 400px) 298px, 78.75vw',
    style: 'width: 300px' }}

如果还希望不同尺寸使用不同的图片,那就可以试试使用 <picture> 标签。(具体看5,感觉 image_url 和 image_tag 基本上够用了)。

END--------------------------------

风是透明的河流,雨是冰凉的流星。

 

与Shopify Theme 开发 —— 性能优化相似的内容: