杭州web前端技术基础班

【性能优化】大神们教你如何打造高性能网站-Web前端之家

曾几何时，几人公用1M的internet，经常会因为某某某偷偷的下载小电影导致网速慢而大吵，争得面红耳赤，谁会想到不到几年时间，宽带的普及，光钎20~100M都“见怪不怪”了；并且移动端5G时代都要来了，从2G到3G，从3G到4G，我们见证了许多的里程碑，移动行业的变革和创新，往往会带动社会上许多行业的颠覆性创新。这些迹象，只能感叹：Internet发展太快。

互联网的发展，有目共睹，网速变得越来越快的同时也让网页越来越复杂，用户的耐心越来越少，网页打开时间稍长，就会造成大量的用户流失。于是， Web性能优化(Web Performance Optimization)成为网站的日常运营中一项非常重要的工作。

最近也看了一些关于这方面的文章，总结和收集了一些大神们的优化建议，分享出来希望能帮助到大家：

1. 如果只能选择一个方面进行Web优化，您会选择哪个方面?

2. 就Web性能而言，您看到哪些错误最常见?

Matt Shull

Aristotle制作人、性能极客，负责管理项目，帮助促成最佳性能实践做法。

答案1——优化建议

我们的Web性能团队主要关注图片优化，平均每个2200kb的页面中，有1440kb的图片，这说明图片是Web优化的重点。有很多文件类型可以进行有效的图片压缩(*cough* WebP *cough*)，但并没有得到充分利用。建议大家从 开始尝试新的图片类型吧!

我们做的另一项优化是用户感知性能，用户感觉到的页面加载时长越短，用户体验就越好。我们尤其关注如何优化移动网络中的用户体验，比如网页预加载、减少内容、改变图片格式降低图片尺寸、延迟加载。但这必须针对不同网站的特点进行优化，因为适合某一个网站的方法并不一定就适合另一个网站。

答案2——常见错误

最常见的错误之一就是无限制使用Render-Blocking内容，很多网站并未因使用Minification机制而获益， Script脚本的响应速度并未改善，请求数量也未降低，因为担心会对Javascript造成延迟，进行影响网站整体的访问速度。

Una Kravets

IBMDesign前端开发人员

答案1——优化建议

图片最重要!Web开发人员通常更关注如何改善脚本性能，但我们要清醒认识到的问题是：大部分性能问题来自多媒体内容。优化内容、使用恰当的文件格式以及利用渐进式渲染功能会大大提升Web性能。

答案2——常见错误

盲目为网站添加许多框架以获得很小的功能是我看到的一种通病，这会大幅增加Web页面的大小，在Web页面设计之初就应该考虑到性能问题，而不是留到最后再去做优化。

Jeff Atwood

Stack Exchange和Discourse联合创始人。

答案1——优化建议

在网站上尝试使用HTTP/2协议吧，这会大大提升Web性能。

注：HTTP/2(超文本传输协议第2版，最初命名为HTTP 2.0)，是HTTP协议的的第二个主要版本，HTTP/2的目标包括异步连接复用，头压缩和请求反馈管线化并保留与HTTP 1.1的完全语义兼容。Google Chrome、Mozilla Firefox、Microsoft Edge和Opera已支持HTTP/2，并默认启用。Internet Explorer自IE 11开始支持HTTP/2，但仅限于Windows 10 Beta，并默认情况激活。

答案2——常见错误

未能使用免费的Web性能工具(如Google PageSpeed、云智慧监控宝 )进行最基本的Web性能检查。

Dean Hume

软件开发人员，《Fast ASP.NET Websites》作者，该书旨在改善高交易量网站的性能。

答案1——优化建议

如果只能选择一个方面进行优化的话，那肯定是图片了!根据HTTP Archive的统计数据，图片占据了整个Web页面大小的60%多比例，因此专注于这一块是说得通的。

答案2——常见错误

最常见的错误也是很简单的错误，包括：未优化图片、未打开GZIP，这些都是每个人都应该掌握的Web优化速效方法。

监控宝是国内领先的全栈式IT性能监控工具，为网站管理者提供从用户端(浏览器、APP)、网络、CDN到后端服务器、数据库、中间件的端到端IT性能监测和优化，功能包括网站监控、网页页面性能监测、服务器/服务监控、API监控、云主机监控等服务。可实时监测网站的响应时间，深入页面图片等元素，准确定位用户可感知的性能指标，合理评估网页性能并提出优化方案，从而提升用户体验。

上面给大家带来了keycdn.com网站上分别就职于IBM、微软等互联网巨头的Web性能砖家精彩观点，而对于网站优化和运维人员来说，这只是网站优化的冰山一角，今天我们再来看看其他砖家怎么说。

这次调查，keycdn.com邀请歪果砖家团回答了下面两个问题：

1. 如果只能选择一个方面进行Web优化，您会选择哪个方面?

2. 就Web性能而言，您看到哪些错误最常见?

Harry Roberts

服务于Google、UN、和Kickstarter的前端架构师和顾问

答案1——优化建议

就我个人而言，我要说CSS，希望大家能更多的重视CSS对性能的影响，因为对大部分网站开发和运维来说，CSS是网页渲染的关键，但也是个巨大的性能瓶颈：不要随意挥霍资源或CDN，删除无用规则，内联关键CSS，避免@imports和Base64，启用高性价比属性(如opacity over rgba())，避免重复性工作，甚至要避免对伊更换开发人员。

CSS是一把双刃剑，既可以大幅度提升性能，又可以对性能造成较大的影响，这取决于你如何使用它，CSS真的是很有用的东西，我希望大家认真重视CSS的性能影响。

答案2——常见错误

说到常见错误，真是太多了，比如只追求数值指标(页面大小，请求数量等)，未关注APP的用户感知性能等。性能最关键一点是网站给人的感觉有多快、用户与页面和APP交互的速度有多快，而不仅仅是网页加载速度快就行了。1.5秒内可以打开且能够接受100个请求的网站，肯定大大优于7秒内才能打开且只能接受32个请求的网站，所以，少关注技术指标，多关注用户体验指标。

Sara Soueidan

前端开发人员和SVG可缩放矢量图形倡导者

答案1——优化建议

图片优化，优化和使用响应式图片(  和srcset属性)，因为大多数网站加载图片太耗时间了，让用户几乎总是处于缓慢连接中，这太没人性了。

答案2——常见错误

未优化图片和为了追求差异化使用不常用的字体，是在我浏览大多数有问题网站中，导致页面加载时间较长的两个最常见的原因。

Patrick Sexton

GetListed.org创始人，现负责免费SEO/Web性能工具Varvy的开发。

答案1——优化建议

优化和推迟图片加载，是以最小损失获得Web性能的最佳办法。

答案2——常见错误

我认为最常见的错误是乱用框架，明明不需要框架就可以完成的工作为何要加上框架呢?我见过有人因为一些让人非常抓狂的原因而往页面上添加jQuery ，比如将图片向上移几个像素或完成其它很简单的任务，CSS框架问题也很常见。我们似乎忘了是为用户制作Web网页，而不是为设计师或程序员提供方便。框架的“便利”之处，就是造成Web网页越来越臃肿的罪魁祸首。

小结

歪果砖家团观点再度强调了图片优化的重要性，同时他们的经验告诉我们，网站优化不能拘泥于一个页面的性能指标优化，而应该以真实用户的视角，从整个网站的业务逻辑、业务流程出发，制定有针对性的整体优化方案。

云智慧监控宝与其他市面上所谓的APM产品最大的区别在于，我们不仅提供针对网站各个业务环节的性能监控，包括网站监控、网页性能监测、服务器/服务监控、API监控、云主机监控等服务，还能够通过全球分布式监测网络，以真实用户的视角，感知业务完整链路的性能状况，为网站优化提供整体解决思路。

以上的砖家观点集中在图片优化对于网站性能的重要性，以及网站优化不能拘泥于页面性能指标优化，而应该以真实用户的视角，从整个网站的业务逻辑、业务流程出发，制定有针对性的整体优化方案，那么今天的砖家又带来了哪些精彩观点呢?

这次网站优化调查由keycdn.com发起，邀请二十余位歪果砖家团回答了下面两个问题：

1. 如果只能选择一个方面进行Web优化，您会选择哪个方面?

2. 就Web性能而言，您看到哪些错误最常见?

Kent Alstad

Radware Acceleration部门VP，技术创新者与致力于让互联网更快的性能研究员。

答案1——优化建议

只关注某个方面的优化工作是非常短视的，但我们可以关注某些重点领域：图片是大多数网站和APP中很重要的部分，因此为每个用户提供最好的图片，并将图片缓存在正确位置以便反复调用。根据用户体验，优化或解耦App中第三方插件的性能，将有效控制App的SLA。最后考虑下HTTP/2相关的优化，将传统HTML的应用瓶颈优化至网络层，因为网络层的优化对IT人员干扰更小，且通常更为有效。

答案2——常见错误

很多人没有意识到不同网络组件之间的性能影响是相互耦合的(无论是技术方面还是概念方面)，也许稍有变动就会影响其他组件的性能。比如说，你可能对Web页面做出了一点点变动，有四成把握让新优化的代码速度提高5%，结果却发现RUM统计数据变得更糟糕了。所以说，整体性能的优化绝不是件容易的事情，不是每个人都能够理解优化结果，也不是每个人都具备做出合理决策所需的整体性能均衡把控能力。要解决这一问题，我们可以预先设定一个整体性能的衡量标准，这样就可以有效地做出改进并衡量改进的地方。

另外一个常见错误是让开发者利用他们熟悉的旧工具写代码或改写代码，来解决性能问题，大家的第一反应通过性能指标来发现问题和解决问题。大多数时候性能的缓慢都出在前端代码，跟服务器端代码性能关系不大，但我却经常看到运维或后端工程师为了性能优化改写服务器代码的情况。

此外，第三方资源常常把开发团队搞得晕头转向。通常由领导、产品运营部或其它非开发部门决定是否加入新的第三方插件或服务，而当第三方服务失败或数据调用缓慢时，我们并没有相关的性能优化方案，甚至没有足够的文档支持进行优化。这种关心性能却大量依赖第三方服务的网站和应用越来越多，所以必须认真制定策略来管理解决第三方的程序。

补充一句，现在的云平台大量使用API来交付服务，同时登录、支付、定位等移动互联网必不可少的功能也是通过第三方API接口来进行数据通信的，所以必须对API的性能进行即时监控，监控宝提供的API监控功能，不但可以即时监测APIs数据及时性、正确性问题，还能对多个API关联组成的业务进行监测。

Andreas Grabner

软件极客，Dynatrace博主。

答案1——优化建议

对于每个页面和功能都应该认真考虑：如何花费最少代价实现页面功能，至于其它酷炫的和牛逼的功能，为了性能，统统删掉吧!

答案2——常见错误

§ 以为全世界的人都跟你用同样的浏览器，程序猿爱用Chrome或Firefox浏览器并不代表用户就愿意用这种浏览器，IE的影响力依然巨大!

§ 把App给你的家人体验一下，看看他们是否能不问你下一步该做什么，就能够用好你的APP(吐个槽，工商银行的网银助手简直是反人类的，如今还以Windows 2000和IE6为主要运行环境)。

§ 从来不用2G网络和4吋屏以下的低端智能机测试网站和应用，虽然这样才能真正检验出网站和应用的性能浪费有多厉害。

§ 开发者通常不会认真对待单个用户的体验有多差，总认为这是个案(除非这个用户是他的大Boss);另一个不当回事的是不考虑每个功能的综合资源消耗：用户通过移动端下载App需要多少流量、公司对此需要向CDN支付多少费用、需要向Iaas厂商支付多少CPU费用和存储费用等等。

§ 太依赖于第三方服务或部件(这是一把双刃剑，用或是不用，是个艰难的决定。)

§ 乱用缓冲(浏览器、CDN、Web服务器和App服务器)

§ Web服务器、App服务器和DB服务器上的连接池(connection pools)大小不准确

§ 投入使用之前缺乏压力测试和性能测试

§ 简洁的功能实现并不意味着APP和网站就能部署上线，在云计算和移动互联网时代，测试工作必须站在更高的视角，不仅要关注浏览器，还要从整个交付链的角度检测性能问题、发现优化点!(广告乱入：云智慧压测宝通过500+遍布全球核心骨干机房的云端压测服务器，发起真实的高并发用户访问，针对全链路和全业务进行压力测试，发现应用系统的性能瓶颈。)

Denys Mishunov

FastName公司前端开发，Smashing Magazine撰稿人。

答案1——优化建议

很显然，并不是性能优化本身，而是对性能的感知，开发人员通常忽略心理学带给他们的好处(而这一点，骗子和黑阔做的最棒)。心理学可提供简单而有效的工具，帮助管理用户对性能的感知度。这并不是说我们应该忽略代码、资源的性能优化，而是我们可以用其它方式达到这种效果，以节省服务器时间、加载时间、宽带，并遵循响应式Web设计的其它属性。优化是需要时间的，心理学为开发人员提供了宝贵的缓冲时间来完成这些优化工作，同时还能让用户第一眼就满足于页面的设计。

答案2——常见错误

开发人员太关注毫秒、字节和请求数量这些数字指标，尽管这是性能的一部分，但它们并不承载网站和应用的功能体验。我们首先要思考的是用户使用网站的体验如何，而不是我们可以节省多少字节，只有准确感知用户的感受，我们才有必要谈毫秒、字节和请求数量等问题。

Damien

DareBoost公司CEO，专注于提供分析和监测工具。

答案1——优化建议

图片，因为只需对图片下很少的功夫就能看到很大的成效!

答案2——常见错误

优化Web性能的时候会犯很多常识性错误，为避免这种情况的发生，你需要进行自动化性能监测，并构建自动执行的优化任务，在工作流中也需用到自动执行的任务(如：优化有用的图片)，如果想更好地进行自动化，需要在监测过程中进行合规检查。当然，这件事监控宝能干得猴赛雷!

Philip Tellis

SOASTA首席架构师，LogNormal联合创始人

答案1——优化建议

让UI更为顺畅。

答案2——常见错误

不做整体性能的检测，人们往往会根据一系列规则修补他们眼中的“问题”，但不能从用户的视角和交付链条出发(以支付为例，从登录到确认再到返回结果，是一个完整的交易链条)，为业务设置一个性能基线，然后量化的任何改进或回归。

大神们的建议是值得我们去研究和思考的，先前也分享过类似的文章：

谈谈移动端页面性能优化方案

分享9条jQuery性能优化的方法

关于H5页面中CSS3动画的性能优化

大家可以去查阅下咯，每天与Web/应用性能优化打交道的歪果砖家团给我们提供了许多有用的建议，首先值得注意的是图片优化的重要性，几乎50%的答案都重点强调了图片以及图片与页面大小的关系;还有一些专家提到了另一个因素，就是用户感知性能，技术人员往往过于重视从数据分析和速度测试的角度进行优化，但从用户的角度解决问题才更重要;测试在IT基础设施广泛云化、DevOps大行其道、应用交付频率越来越快的今天，其重要性越来越高，有效的测试才能保证不断快速迭代的应用和网站更可靠，性能更好。