关于产品加载速度

本文主要做一些梳理，以确定几个一直以来有点疑问的问题：

• 为什么要提升加载速度？
• 产品加载速度应该达到多少？
• 如何提升产品加载速度？

1.为什么要提升加载速度？

1）影响用户体验

这是常识。

2）影响SEO效果——对于web端产品

• 正如《SEO实战密码》提到的，SEO与用户体验相通，一个网页打开速度慢的网站，想必对用户体验不够重视，因此容易引起搜索引擎的惩罚。
• 网页加载速度是搜索引擎的考虑因素之一

百度站长平台提到 ：

其实不仅是百度，各大搜索引擎对于移动网页的打开速度都越来越重视，并且将加载速度作为衡量网页移动友好度的重要标准。因此，再次建议站长重视移动端体验，打造用户与站点共赢的网络生态。

谷歌也有类似处理 ：

We do say we have a small factor in there for pages that are really slow to load where we take that into account. ——John Mueller, Google Switzerland我们确实说过：我们会将加载速度过慢的网页的加载速度作为考虑的一个小因素。

• 影响搜索引擎爬取量，进而影响收录/索引量

谷歌的Webmaster Central Help Forum上有个用户提问 ：

For the past 6+ weeks, we have been seeing most of our URLs returning a ‘Temporarily Unreachable’ error when fetched in Google Webmaster Tools using the ‘Fetch as Google’ simulation tool. We have been unable to pin point what exactly could be the issue behind this considering we had a 100% success rate with this in the past.我的翻译：在过去的6个多星期里，我们看到我们的大部分网址在使用“Google抓取方式”模拟工具在Google网站管理员工具中提取时，都返回“暂时无法访问”错误。 考虑到我们过去100％的成功率，我们无法确定这个问题究竟是什么。

谷歌的一位员工答道 ：

We're seeing an extremely high response-time for requests made to your site (at times, over 2 seconds to fetch a single URL). This has resulted in us severely limiting the number of URLs we'll crawl from your site. ——John Mueller, Google Employee我的翻译：对于您的网站的请求，我们看到的响应时间非常高（有时提取一个URL超过2秒）。这会导致我们严重限制从您网站抓取的网址数量。

PS：上面提到"2秒"，但暂不确认是否要这么快的加载速度，或者此处的2秒仅仅针对一个页面的某个URL。

• 影响搜索结果排名

谷歌Webmaster Central Blog上有篇文章提到 ：

You may have heard that here at Google we're obsessed with speed, in our products and on the web. As part of that effort, today we're including a new signal in our search ranking algorithms: site speed. Site speed reflects how quickly a website responds to web requests.

上方的重点在这一句：today we're including a new signal in our search ranking algorithms: site speed.翻译：今天我们将一个新的内容包含到我们的搜索排名算法中：网站速度。

• 结论：网站加载速度是搜索引擎的评估因素之一——可以想象会越来越重视。

3）影响转化率

从我们日常的体验来说，如果一个网站/APP打开速度很慢，我们很可能没耐心等待而直接选择离开，这自然会影响转化率。

一篇文章提到：a 2-second delay in load time during a transaction resulted in abandonment rates of up to 87%. This is significantly higher than the baseline abandonment rate of 67%.翻译：在交易中，2秒的延迟导致放弃率高达87%，这远远超过了放弃率的基准线67%。

用图表示是这样：

综上所述：提升互联网产品的加载速度是必须的，否则：

• 影响用户体验
• 影响转化率
• 影响SEO效果（对于web端产品）

2.产品打开速度应该达到多少？

1)M端

百度站长平台提到：2017年10月初，“闪电算法”上线，移动搜索页面首屏加载时间将影响搜索排名。移动网页首屏在2秒之内完成打开的，在移动搜索下将获得提升页面评价优待，获得流量倾斜；同时，在移动搜索页面首屏加载非常慢（3秒及以上）的网页将会被打压。

由此可知：M端网页首屏打开速度目标为2秒以内，至少要在3秒以内，尽量避免在3秒及以上。

2）PC端

没找到非常明确的说法，但可以根据已有内容进行推断。

百度站长平台提到：百度用户体验部研究表明，用户期望且能够接受的页面加载时间在3秒以内。若页面的加载时间过慢，用户就会失去耐心而选择离开，这对用户和站长来说都是一大损失。

谷歌的Maile Ohye提到：2 seconds is the threshold for ecommerce website acceptability. At Google, we aim for under a half second.——Maile Ohye, from Google翻译：2秒对电商网站来说是一个底线。在谷歌，我们的目标是在0.5秒以内。

谷歌的Doubleclick提到：“The Need for Mobile Speed”, we found that 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load.翻译："对移动端网站速度的需求"，我们发现当加载时间超过3秒时，53%的移动网站访问被放弃。

这说明：2秒以内是一个值得追求的目标，3秒以内几乎就是下限。

而由于用户体验都是想通的，M端与PC端的加载速度对APP很有参考价值，因此对于任何一个终端，上述结论都可以参考。

3.如何提升网站打开速度

这里仅以网站加载速度为例，收集了部分建议。

1） 百度统计的建议 ：

• 下载页面启用Gzip：可减少 69 B 启用服务器Gzip，可以减少传输字节数。未启用Gzip的资源有： http://www.jfz.com/ （大小： 278 B 预计可减少 69 B ）
• 打开页面字符集声明：在页面部分没有发现字符集声明，请增加该声明。如果部分未定义字符集，将增加页面渲染次数，速度减慢。

2）PageSpeed Insights的建议

PC端：

• 使用浏览器缓存。在 HTTP标头中为静态资源设置过期日期或最长存在时间，可指示浏览器从本地磁盘中加载以前下载的资源，而不是通过网络加载。
• 优化图片。适当地设置图片的格式并进行压缩可以节省大量的数据字节空间，优化图片可将其大小减少80.8 KiB (37%)。
• 清除首屏内容中阻止呈现的 JavaScript 和 CSS。您的网页中有6个阻止呈现的脚本资源和3个阻止呈现的 CSS 资源。这会导致呈现网页的过程出现延迟。
• 缩短服务器响应时间。在我们的测试中，您的服务器在0.47秒钟内做出了响应。能够拖慢服务器响应时间的因素有很多。请阅读我们的建议，了解如何监控并计量使您的服务器花费时间最多的项。
• 按优先级排列可见内容。您的网页需要进行更多次的网络往返通信才能呈现首屏内容。要获得最佳效果，请减少呈现首屏内容所需的 HTML 数量。
• 缩减 HTML。压缩 HTML 代码（包括其中所含的任何内嵌 JavaScript 和 CSS）可以节省大量数据字节空间，并提高下载和解析的速度。为以下资源缩减 HTML 大小可将其大小减少2.7 KiB (14%)。

M端：

• 清除首屏内容中阻止呈现的 JavaScript 和 CSS。您的网页中有6个阻止呈现的脚本资源和3个阻止呈现的 CSS 资源。这会导致呈现网页的过程出现延迟。
• 使用浏览器缓存。在 HTTP 标头中为静态资源设置过期日期或最长存在时间，可指示浏览器从本地磁盘中加载以前下载的资源，而不是通过网络加载。
• 缩短服务器响应时间。在我们的测试中，您的服务器在0.34秒钟内做出了响应。能够拖慢服务器响应时间的因素有很多。请阅读我们的建议，了解如何监控并计量使您的服务器花费时间最多的项。
• 缩减 JavaScript。压缩 JavaScript 代码可以节省大量数据字节空间，并提高下载、解析和执行的速度。
• 优化图片。适当地设置图片的格式并进行压缩可以节省大量的数据字节空间。优化以下图片可将其大小减少36.8 KiB (41%)。
• 缩减 CSS。压缩 CSS 代码可以节省大量数据字节空间，并提高下载和解析的速度。为以下资源缩减 CSS 大小可将其大小减少6.7 KiB (17%)。
• 缩减 HTML。压缩 HTML 代码（包括其中所含的任何内嵌 JavaScript 和 CSS）可以节省大量数据字节空间，并提高下载和解析的速度。为以下资源缩减 HTML 大小可将其大小减少1.3 KiB (17%)。

3） 公众号小北的梦呓提到 ：

• 减少HTTP的请求
• Gzip 压缩
• 开启缓存
• 优化图片
• 不要安装太多的插件
• 避免广告，视频太多
• 网站的服务器