关于产品加载速度

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

为什么要提升加载速度?

产品加载速度应该达到多少?

如何提升产品加载速度?

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打开速度很慢,我们很可能没耐心等待而直接选择离开,这自然会影响转化率。

一篇文章提到:a2-second delayin 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 secondsis 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 that53% of mobile site visits are abandonedif pages takelonger than 3 secondsto 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 压缩

开启缓存

优化图片

不要安装太多的插件

避免广告,视频太多

网站的服务器

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,723评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,080评论 2 379
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 149,604评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,440评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,431评论 5 364
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,499评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,893评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,541评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,751评论 1 296
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,547评论 2 319
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,619评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,320评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,890评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,896评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,137评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,796评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,335评论 2 342

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,399评论 1 45
  • 前言本文是@旭日云中竹带来的翻译与投稿。文章中提到的图片格式webp,自定义网页字体,懒加载等技术的运用,这些在大...
    Simon王小白阅读 272评论 0 1
  • 回顾第二阶段学习的内容,感觉第二阶段跟多学习了“术”。学习了处理和解决问题的能力和方法。 对我个人来说这些“术”并...
    百合手工阅读 568评论 2 2
  • 开学典礼 2017年9月1日是韦志中心理网校开学的日子,我作为网校的学生期待这天已经...
    夏俊智爸爸阅读 209评论 0 1
  • 本页包含内容: [TOC] 析构器只适用于类类型,当一个类的实例被释放之前,析构器会被立即调用。析构器用关键字de...
    伍哥___阅读 311评论 0 0