使用Webpagetest测试和优化网站的打开速度

Shopify 为新注册账户 限时提供 90 天免费使用优惠 – 立即注册账户获取

我们在谈到网站优化的时候,肯定会谈及网站打开速度的优化,不仅仅是因为它是Google搜索结果页面排名算法中考虑的200多因素之一,更重要的是,网站打开速度会直接关系到网站访客的浏览体验和购物体验,你的网站打开速度越快,那你留给访客的第一印象越好,信任度越高,就越容易把他转化成客户。

国外的一项调查显示,如果你的网站打开速度比较慢,也就意味着你的网站是不安全的,是不可信任的,79%的网上购物者不会再打开这样的网站:“ Fast websites to be professional and reliable. We relate speed to efficiency, trust, and confidence. A slow website, on the other hand, makes us think it’s unsafe, insecure, and untrustworthy. And it’s really difficult to turn around that negative first impression. 79% of online shoppers say they won’t go back to a website if they’ve had trouble with load speed.”

Kissmetrics 的一项数据调查显示:47% 的人希望网站加载时间在2秒以内。网站如果超过3秒还没有打开,40%的人会选择关闭页面离开。85%的互联网用户希望移动端的网站加载速度比PC端更快。

在Google从事Webmaster Trends Analyst 相关工作的John Mueller在Twitter上回答网友的问题曾经提到:“There’s no limit per page. Make sure they load fast, for your users. I often check https://webpagetest.org and aim for <2-3 secs”

本篇文章我们就来使用Webpagetest来测试我们的网站打开速度,并依据测试结果对我们的网站打开速度进行针对性的优化。

打开Webpagetest的网站首页,显示如下图所示,你需要做的是把你要测试的链接地址填写到Enter a Website URL文本框中。通常这里我们要填写的地址为广告着陆页,也就是我们的产品页面,因为我们在打广告的时候,通常都会把客户直接带到我们的产品页面以尽可能让流量直接形成转化成为订单,但是这并不意味着首页或者其他页面不重要,只不过从轻重缓急上来讲,要先保证我们的广告着陆页的打开速度够快。

Test Location是测试网站打开速度的地址。Webpagetest可以模拟全球各地的用户打开你的网站,并生成对应的数据报告。所以,如果你在打广告的时候目标市场是美国,那么你在Test Location可以选择美国地址。如果你打广告的时候目标市场是澳大利亚,那么你可以在Test Location选择澳大利亚的地址进行测试。

Browser则是模拟客户所使用的浏览器,例如Chrome,IE,Firefox,或者手机浏览器如iPhone,Nexus,Galaxy等等。

这里我填写K9 Ballistics的任意一个产品页面,地址选择美国的Dulles,浏览器选择Chrome,然后点击Start Test

Webpagetest测试网站打开速度

Webpagetest默认会对你的网站进行3次测试,开始测试之后大概需要10秒-1分钟的时间生成报告,期间你不需要做任何操作,静静等待即可。

Webpagetest测试网站打开速度

测试结束之后,就会出现如下图所示的测试报告。

Load Time你可以理解为从客户点击链接开始到网站页面完成加载所需要的时间。理想的Load Time在2-3秒,显然7.55秒的网站加载时间是一个很不理想的表现。The Load Time is measured as the time from the start of the initial navigation until the beginning of the window load event (onload).

First Byte是从客户点击链接到浏览器获取到第一个内容字节的时间。这期间通常包括服务器处理请求,网络传输,DNS解析,建立连接所需的时间以及SSL认证时间等等。The First Byte time (often abbreviated as TTFB) is measured as the time from the start of the initial navigation until the first byte of the base page is received by the browser (after following redirects).

Start Render是浏览器打开网页显示白色屏幕到非白色内容出现在浏览器中的时间。The Start Render time is measured as the time from the start of the initial navigation until the first non-white content is painted to the browser display.

Speed Index是用户看到的网页第一屏加载完成的时间。相比较于Load Time(网页完全加载完成),Speed Index更能直接的表现出客户打开网页时候的实际体验。The Speed Index is a calculated metric that represents how quickly the page rendered the user-visible content (lower is better).

Fully Loaded是从客户点击链接发送访问请求开始,到网页没有任何活动之后再延迟2秒的时间。The Fully Loaded time is measured as the time from the start of the initial navigation until there was 2 seconds of no network activity after Document Complete. This will usually include any activity that is triggered by javascript after the main page loads.

在以下图片所有的数据中,我个人更加关注Load Time,Speed Index和Fully Loaded三项数据。通俗来讲,Load Time就是网页内容加载完成所需要的时间,也就是从打开网页到浏览器标签中的加载小圈圈不再转圈圈为止所需要的时间。Speed Index是从点击链接发送访问请求到浏览器中第一屏加载完成所需要的时间,更能体现用户体验。Fully Loaded则是所有网站功能完成加载并展现在浏览器中的时间,更能体现网站功能的完整性,尤其是app的功能的展示。

Webpagetest测试网站打开速度

在数据表单下方会展示网页加载的瀑布流信息。你可以点击瀑布流图片打开瀑布流详情。

Webpagetest测试网站打开速度

如下图所示,整个瀑布流的纵坐标是网页打开所需要加载的所有文件,也就是在下图中我要打开一个网页,需要加载177个文件。横坐标是时间轴,表示加载文件所需要的时间。每个文件后面都会带有一个不同颜色和不同粗细的线来表示该文件加载所需要的时间。例如第169个文件是Klaviyo的文件,完成加载需要463毫秒。

Webpagetest测试网站打开速度

我们需要做的就是找到整个瀑布流中加载时间过长的文件,然后对这些文件进行针对性的优化操作。例如下图中所示可以看到当前页面中有4张图片的加载时间都在3秒以上,那么我就可以有针对性的对这些图片进行压缩优化,来提高下载速度,保证网站的打开速度。

Webpagetest测试网站打开速度

要查看上图中是具体哪张图片拖了网站的后腿,我们只需要使用鼠标点击文件后面的横线,就可以在弹窗中看到文件的URL和该文件的一些基本信息。例如第79个文件大小为402KB (Bytes in downloaded), Content download 用时3216ms

Webpagetest测试网站打开速度

复制URL的链接地址到浏览器中回车,打开如下图所示图片,可以看到该图片就是这个网站的产品主图。

Webpagetest测试网站打开速度Webpagetest测试网站打开速度

那么这张图片该如何优化呢?你可以点击如下图所示菜单栏中的Image Analysis参考Webpagetest给出的分析数据进行图片的优化,也可以直接把图片下载下来,使用Photoshop或者Tinypng把图片进行下无损压缩,然后再替换掉原来的图片,再或者,直接删除掉该图片也可以。

Webpagetest测试网站打开速度Webpagetest测试网站打开速度

其实就Webpagetest给出的数据可以看出来,对于大部分的Shopify卖家来说,我们所能做的优化操作其实相比较于Woocommerce来说还是比较有限的。我所看到的大部分影响Shopify网站打开速度的问题都在于图片,主题和插件。

图片优化就像上面所说的,我们可以通过报告找到问题并解决问题,至于主题和插件导致的网站打开速度比较慢的问题,则是需要多一些经验积累来做判断的。

如下图所示,我们在Webpagetest给出的Content Breakdown页面中可以看到我们所做的测试页面按照文件类型进行归类之后,各种文件类型的数量和大小数据,以及占总数据的比例。

Webpagetest测试网站打开速度

在上图中可以看到,在所有的文件中,无论是数量还是大小,紫色的image和黄色的js都是占大头的。在网页里面的js文件的作用就是为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果,所以JS文件通常就是Shopify主题和Shopify插件所要使用的文件。从下图中所显示的链接地址可以看到,该网站安装了Crazyegg,Product Customizer,Yotpo,Klaviyo等等Shopify应用,而这些应用要在网站上正常工作,就需要调用到存储在他们各自网站上的js文件。

因此判断主题或者应用对于网站打开速度有什么影响,一个是和看图片一样,看哪个js文件加载时间过长,我们能做的就是要么使用其他主题或者应用替换当前这个主题或者应用,要么就是下架这个应用,减少总体要加载的文件数量。

Webpagetest测试网站打开速度

在如下图所示的Domain页面中,则可以更清晰的看到,我们在打开要测试的网页的时候,究竟加载了哪些外部的链接资源。其实通过这个页面,我们也可以更加清晰的看到这个Shopify网站安装了哪些应用,你可以对照竞争对手的网站,和下面的图表,来综合判断下他们的网站的哪些功能是使用了哪些Shopify应用来实现的。然后把对应的shopify应用安装到自己的Shopify网站来实现相同的功能就可以了。

Webpagetest测试网站打开速度

除此之外,如果你在测试网站打开速度的时候在Advanced Settings中勾选了Capture Video的话,在生成的数据报告中,就可以在Screenshot页面页面生成一个网站打开速度的小视频,帮你更加直观的看到网站打开的过程。

Webpagetest测试网站打开速度 Webpagetest测试网站打开速度

点击Create Video之后,就可以看到Webpagetest帮你生成的网站打开速度的视频了。

未经允许不得转载:WaimaoB2C » 使用Webpagetest测试和优化网站的打开速度

赞 (6)

留下你的问题, 我们交个朋友 2

  1. 匿名测试不了呢,为什么我一直都是出现这样的提示错误的?Failed recaptcha validation. Please go back and try submitting your test again回复
    • Conwayrecaptcha 是人机验证,你要么全局翻墙,要么换个浏览器试试,我这边偶尔会出现这个提示,不过刷新下页面就没有问题了回复
  • 关注公众号 “ WaimaoB2C ” 第一时间获取网站最新内容,了解跨境电商独立站圈内圈外每天发生的那些事儿,和20000+独立站卖家共同成长。

    $$$$$$$$ 每月 1 本书 $$$$$$$$

    2020年4月推荐工作效率书目:公众号回复信息“ GTD ”获取本书英文电子版
    本月和我一起读《GET THINGS DONE》来提高工作效率
    the art of stress-free productivity – 中文《搞定 – 无压工作的艺术》最近重读了中文版,试读了英文版,没有对比就没有伤害,中文版翻译的确实有点儿让人不敢恭维,推荐英文原版。

    *推荐亚马逊购买正版Kindle电子书或纸质书籍,获取最佳阅读体验。本分享来自于互联网以及网友上传,网站内所提供的下载链接均为站外链接,版权归原作者以及开发商所有,网站本身不存储相关资源文件. 如侵犯到版权方,请发送邮件到 hello@waimaob2c.com,站长会在第一时间删除并向您道歉。

  • Shopify 新卖家账户注册注意事项-非常重要

  • Shopify新卖家注册账户前请务必认真阅读以下注意事项:

    注册前关闭翻墙工具; 不建议使用 QQ,126,163邮箱注册账号
    打开Shopify官网 WWW.SHOPIFY.COM 获取 90 天免费使用
    注册账户时地址信息真实有效; 缴纳月租前关闭翻墙工具