shopify免费教程

Shopify如何优化加载速度提升用户体验?——SEO篇

yourshopify · 9月22日 · 2021年
[smartslider3 slider="2"]

  shopify是卖家的绝佳平台。它为您提供免费和无限的带宽,使其保持运行。当你开始时,一切看起来都是那么明亮和崭新,人们似乎喜欢它。

  随着时间的推移,您会添加更多图像、更多扩展、更多集成,并且您的站点加载时间也会增加。在这个行业中,时间的字面意思是金钱。您的网站加载时间越长,就会有越多的人永远离开它。没有人会等待10秒钟来加载您的网站。最佳站点加载时间为2秒或更短。

  首先,在GTMetrix上运行负载速度测试。此工具非常适合此目的,因为它会向您显示影响页面速度的因素以及它们的优先级和分数。

  得分最低的组件,即您必须关注的组件,位于顶部。现在您知道了自己的分数,让我们来看看如何加快您的Shopify商店并使其保持良好状态?

  1.优化图片

  图片占网页总大小的50-75%。您拥有的高质量图像越多,加载页面所需的时间就越多。但是,您不必删除其中的一半,只需尝试将每个图像保持在100KB以下即可。

  有几种方法可以在不显着降低质量的情况下减小图像的大小:

  1.tinypng.com等在线工具。它们可以帮助您将图像的大小减少多达80%,而且没有人能够分辨出图像质量之间的差异。

  2.在HTML代码中指定尺寸。无论您将来使用什么图像,它们都不会比您指定的大。

  或者您可以指定宽度或高度,Shopify将根据原始图像大小确定另一个尺寸。

  3.使用应用程序。像ImageOptim这样的免费工具将优化您的图像尺寸,但您需要在将图像上传到网站之前进行优化。相反,您可以使用集成的ImageRecycle应用程序,它会自动处理您网站上的图像和PDF。

  此外,还有诸如“延迟加载图像”之类的东西。这意味着使用Javascript库仅在需要时加载图像。当访问者不需要您的大部分内容时,它特别用户友好,并且可以缩短初始站点加载时间。为了实现它,请使用lazyloadjQuery属性。

  2.忘记主页滑块

  是的,不久前滑块还很流行,但现在研究建议避免使用它们。它们不仅会增加页面加载时间,还会惹恼人们。有时,滑块变化太快,用户没有足够的时间来完全参与每张幻灯片。

  滑块也是该网站移动版本的一个问题。首先,它需要2021年西木建站所有 粤ICP备2020104027号额外的流量,甚至更多的加载时间;其次,向下滚动要容易得多。因此,滑块会导致滞后。无论您的网站是通过计算机还是智能手机访问,只有1%的用户实际点击了滑块。因此,英雄布局现在越来越受欢迎。一般来说,英雄图片是位于网页顶部和中心的大型网页横幅图片。它介绍了网站内容的概述。它通常包含图像和文本;它可以是静态的或动态的。这是Shopify关于如何创建英雄布局的文章。

  3.更换主题

  大多数情况下,Shopify页面速度取决于主题。未针对网站性能进行优化的主题具有大量CSS和JavaScript文件。另一方面,优化的主题有一个用于所有样式的CSS文件和一个用于所有脚本的JavaScript文件,这会降低页面加载速度。因此,在选择要安装的主题之前,请通过GooglePagespeedInsight运行预览页面的加载速度测试。

  4.摆脱损坏的链接

  这样的链接是麻烦制造者。它们增加了HTTP请求的数量,从而增加了加载时间并激怒了潜在客户。使用BrokenLinkChecker摆脱它们。此外,请注意重定向。他们中的太多也会减慢网站的速度。对于Shopify商店,您可以使用301重定向。

  5.利用浏览器缓存

  为了正确显示页面,浏览器会在您访问站点时缓存(下载)所有HTML、CSS、JavaScript文件和图像。这就是为什么页面第一次加载的时间比再次访问时要长得多的原因。

  利用浏览器缓存意味着将您的网页文件存储在浏览器缓存中。因此,返回上一页需要更少的加载时间。

  为了实现这一点,您需要.htaccess文件。这是应该添加到它顶部的内容:

  ##过期缓存##

  <IfModulemod_expires.c>

  ExpiresActiveOn

  ExpiresByTypeimage/jpg“access1year”

  ExpiresByTypeimage/jpeg“access1year”

  ExpiresByTypeimage/gif“access1year”

  ExpiresByTypeimage/png“access1year”

  ExpiresByTypetext/css“访问1个月”

  ExpiresByTypetext/html“访问1个月”

  ExpiresByType应用程序/pdf“访问1个月”

  ExpiresByTypetext/x-javascript“访问1个月”

  ExpiresByType应用程序/x-shockwave-flash“访问1个月””

  ExpiresByTypeimage/x-icon“access1year”

  ExpiresDefault“access1month”

  </IfModule>

  ##EXPIRESCACHING##

  您也可以使用缓存控制。它是一个HTTP标头,用于确定文件的缓存方式和缓存时间。最好也在.htaccess文件中使用它。一般来说,它看起来像这样:

  <FilesMatch“\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>

  头部设置缓存控制“max-age=604800,public”

  </FilesMatch>

  所以,我们有时间的max-age指令。它以秒表示。

  常见的时间是:

  max-age=60–一分钟;

  max-age=3600–一小时;

  max-age=86400–一天;

  max-age=604800–一周;

  max-age=2628000–一个月;

  max-age=31536000–一年。

  可缓存性类型的指令是:

  公共-任何缓存都可以存储信息;

  私人-每个用户的响应都是单独的(一个用户看到的不能被另一个用户看到;Twitter就是一个很好的例子);

  no-cache–无法缓存响应。

  6.压缩页面

  内容丰富的页面往往会减慢加载时间。为了避免这个问题,您可以压缩页面。通过压缩页面来减少页面带宽,可以减少HTTP响应。这就是众所周知的工具Gzip派上用场的地方。许多网络服务器都可以压缩Gzyour shopi fy .co mip格式的文件。据雅虎称,使用该工具可以帮助您将响应时间缩短多达30%。

  7.越少越好

  应用程序就是这种情况。应用程序很好——它们有助于改善您网站的外观并添加新功能。但是,数量太多也不好。应用程序的大多数脚本文件都插入到<head>中。因此,应用程序的内容是最先加载的内容之一。一些应用程序被构建为在加载其他页面内容之前加载它们的代码,这很耗时。

  您是否会使用所有20多个应用程序是非常值得怀疑的。同时,它们仍在运行并减慢您的商店速度。因此,请继续关注您的应用程序列表——不要加载太多应用程序,并删除您不使用的应用程序。

  底线

人们讨厌等待。因此,为了让您的网站成功而不是浪费时间和金钱,它应该很快。所需要的只是一些简单的技巧来优化它。这不会花费您太多时间,但您可以肯定它会付出代价。如果站点加载时间为2秒或更短,则客户不会在加载完成之前离开。此外,他们很有可能会回来。

[smartslider3 slider="3"]