世界顶级Web性能专家教你优化出高性能网站（上）

amy26

作者： Brian Jackson

宽带的普及，让网速变得越来越快的同时也让网页越来越复杂，用户的耐心越来越少，网页打开时间稍长，就会造成大量的用户流失。于是， Web性能优化（Web Performance Optimization）成为网站的日常运营中一项非常重要的工作。
其实，对于Web性能的追求不仅仅是用户体验上的需要，更是互联网公司核心业务的驱动力。无论是靠电商、游戏、娱乐、社交、搜索引擎功成名就的IT巨头，都在实践中证明了这样一点：网站越快访问体验越好，用户黏性越高、用户忠诚度更高、用户转化率也越高。
造成Web性能缓慢的原因多种多样，在用户端的主要表现就是访问延迟，这里的延迟指的是从用户通过浏览器、APP点击发起请求到得到反馈所经历的时间，由于Web页面承载的功能越来越多，为了页面效果而使用的多媒体元素也越来越丰富，这些都会造成页面访问的延迟。
而对于网站优化和运维人员来说，要进行Web性能优化，不妨听听以下二十余位来自keycdn.com的Web性能领域的砖家的建议。
keycdn.com邀请歪砖家团回答了下面两个问题：
1.        如果只能选择一个方面进行Web优化，您会选择哪个方面？
2.        就Web性能而言，您看到哪些错误最常见？
专家说
Tim Evko / @Tevko / timevko.website
BaubleBar 前端工程师、播客、RICG 响应式图片创始人，CSS-Tricks、 Smashing Magazine、 SitePoint等杂志撰稿人。
答案1——优化建议
切勿在Web端加入太多应用程序，尤其不要使用太多框架和库来做一些无意义的工作，这通常会导致速度降低，影响移动端支持，并让Web页面太重。
答案2——常见错误
缺乏合理的逐步优化方法，总是头疼医头脚疼医脚；无法及时发现和调优Web页面上的调用元素，忽略第三方内容的大小；很多网站并未真正落实响应式图片的制作方法，导致移动端页面太大。
________________________________________

Matt Shull / @TheMattShull / mattshull.com
Aristotle制作人、性能极客，负责管理项目，帮助促成最佳性能实践做法。
答案1——优化建议
我们的Web性能团队主要关注图片优化，平均每个2200kb的页面中，有1440kb的图片，这说明图片是Web优化的重点。有很多文件类型可以进行有效的图片压缩（*cough* WebP *cough*），但并没有得到充分利用。建议大家从<picture> 开始尝试新的图片类型吧！
我们做的另一项优化是用户感知性能，用户感觉到的页面加载时长越短，用户体验就越好。我们尤其关注如何优化移动网络中的用户体验，比如网页预加载、减少内容、改变图片格式降低图片尺寸、延迟加载。但这必须针对不同网站的特点进行优化，因为适合某一个网站的方法并不一定就适合另一个网站。
答案2——常见错误
最常见的错误之一就是无限制使用Render-Blocking内容，很多网站并未因使用Minification机制而获益， Script脚本的响应速度并未改善，请求数量也未降低，因为担心会对Javascript造成延迟，进行影响网站整体的访问速度。
________________________________________

Una Kravets / @Una / una.im
IBMDesign前端开发人员
答案1——优化建议
图片最重要！Web开发人员通常更关注如何改善脚本性能，但我们要清醒认识到的问题是：大部分性能问题来自多媒体内容。优化内容、使用恰当的文件格式以及利用渐进式渲染功能会大大提升Web性能。
答案2——常见错误
盲目为网站添加许多框架以获得很小的功能是我看到的一种通病，这会大幅增加Web页面的大小，在Web页面设计之初就应该考虑到性能问题，而不是留到最后再去做优化。
________________________________________

Aaron Gustafson / @AaronGustafson / aaron-gustafson.com
来自微软的Web标准倡导者，Adaptive Web Design作者。
答案1——优化建议
我觉得内容是最重要的，应该查看页面的每个部分，看是否满足网站页面的主要目的。图片、社交媒体分享调用、关联内容，专注重点部分是优化网站性能的第一步。
答案2——常见错误
我看到很多人过于重视一些效果有限的复杂Web优化技术，如改善后端脚本执行时间的技术，但却忽略了最容易完成的目标，如图片优化、恰当图片格式的选择等。
________________________________________

Jeff Atwood / @codinghorror / blog.codinghorror.com
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 / @DeanoHume / deanhume.com
软件开发人员，《Fast ASP.NET Websites》作者，该书旨在改善高交易量网站的性能。
答案1——优化建议
如果只能选择一个方面进行优化的话，那肯定是图片了！根据HTTP Archive的统计数据，图片占据了整个Web页面大小的60%多比例，因此专注于这一块是说得通的。
答案2——常见错误
最常见的错误也是很简单的错误，包括：未优化图片、未打开GZIP，这些都是每个人都应该掌握的Web优化速效方法。
以上是《世界顶级Web性能专家教你制作高性能网站》第一部分内容，后面还有十几位专家的经验分享，敬请期待！

下面插播一条广告：
监控宝是国内领先的全栈式IT性能监控工具，为网站管理者提供从用户端（浏览器、APP）、网络、CDN到后端服务器、数据库、中间件的端到端IT性能监测和优化，功能包括网站监控、网页页面性能监测、服务器/服务监控、API监控、云主机监控等服务。可实时监测网站的响应时间，深入页面图片等元素，准确定位用户可感知的性能指标，合理评估网页性能并提出优化方案，从而提升用户体验。
了解监控宝详情，免费使用IT监控神器——监控宝请关注云智慧官方微信（cloudwise2014）。