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

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

Webpagetest是一款很是好用的网站翻开速度测试工具。我们在谈到网站优化的时辰，必定漫谈及网站翻开速度的优化，不但仅是由于它是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

本篇文章我们就来利用Webpagetest来测试我们的网站翻开速度，并根据测试成果对我们的网站翻开速度停止针对性的优化。利用Webpagetest测试和优化Shopify店肆的翻开速度

翻开Webpagetest的网站首页，显现以下图所示，你需要做的是把你要测试的链接地址填写到Enter a Website URL文本框中。凡是这里我们要填写的地址为广告着陆页，也就是我们的产物页面，由于我们在打广告的时辰，凡是城市把客户间接带到我们的产物页面以尽能够让流量间接构成转化成为定单，可是这并不意味着首页大概其他页面不重要，只不外从轻重缓急上来说，要先保证我们的广告着陆页的翻开速度够快。

Test Location是测试网站翻开速度的地址。Webpagetest可以模拟全球各地的用户翻开你的网站，并天生对应的数据报告。所以，假如你在打广告的时辰方针市场是美国，那末你在Test Location可以挑选美国地址。假如你打广告的时辰方针市场是澳大利亚，那末你可以在Test Location挑选澳大利亚的地址停止测试。

Browser则是模拟客户所利用的阅读器，例如Chrome，IE，Firefox，大概手机阅读器如iPhone，Nexus，Galaxy等等。

Webpagetest默许会对你的网站停止3次测试，起头测试以后大要需要10秒-1分钟的时候天生报告，时代你不需要做任何操纵，静静期待即可。

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).

以下图所示，全部瀑布流的纵坐标是网页翻开所需要加载的一切文件，也就是鄙人图中我要翻开一个网页，需要加载177个文件。横坐标是时候轴，暗示加载文件所需要的时候。每个文件前面城市带有一个分歧色彩和分歧粗细的线来暗示该文件加载所需要的时候。例如第169个文件是Klaviyo的文件，完成加载需要463毫秒。

我们需要做的就是找到全部瀑布流中加载时候太长的文件，然后对这些文件停止针对性的优化操纵。例以下图中所示可以看到当前页面中有4张图片的加载时候都在3秒以上，那末便可以有针对性的对这些图片停止紧缩优化，来进步下载速度，保证网站的翻开速度。

复制URL的链接地址到阅读器中回车，翻开以下图所示图片，可以看到该图片就是这个网站的产物主图。

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

图片优化就像上面所说的，我们可以经过报告找到题目并处理题目，至于主题和插件致使的网站翻开速度比力慢的题目，则是需要多一些经历堆集来做判定的。以下图所示，我们在Webpagetest给出的Content Breakdown页面中可以看到我们所做的测试页面依照文件范例停止归类以后，各类文件范例的数目和巨细数据，以及占总数据的比例。

在上图中可以看到，在一切的文件中，不管是数目还是巨细，紫色的image和黄色的js都是占大头的。在网页里面的js文件的感化就是为网页增加林林总总的静态功用，为用户供给更流利美妙的阅读结果，所以JS文件凡是就是Shopify主题和Shopify插件所要利用的文件。从下图中所显现的链接地址可以看到，该网站安装了Crazyegg，Product Customizer，Yotpo，Klaviyo等等Shopify利用，而这些利用要在网站上一般工作，就需要挪用到存储在他们各自网站上的js文件。是以判定主题大概利用对于网站翻开速度有什么影响，一个是和看图片一样，看哪个js文件加载时候太长，我们能做的就是要末利用其他主题大概利用替换当前这个主题大概利用，要末就是下架这个利用，削减整体要加载的文件数目。

在以下图所示的Domain页面中，则可以更清楚的看到，我们在翻开要测试的网页的时辰，究竟加载了哪些内部的链接资本。实在经过这个页面，我们也可以加倍清楚的看到这个Shopify网站安装了哪些利用，你可以对照合作对手的网站，和下面的图表，来综合判定下他们的网站的哪些功用是利用了哪些Shopify利用来实现的。然后把对应的shopify利用安装到自己的Shopify网站来实现不异的功用便可以了。

除此之外，假如你在测试网站翻开速度的时辰在Advanced Settings中勾选了Capture Video的话，在天生的数据报告中，便可以在Screenshot页面页面天生一个网站翻开速度的小视频，帮你加倍直观的看到网站翻开的进程。