世界顶级Web性能专家教你优化高性能网站(上)

宽带的普及不仅使网络速度越来越快，而且使网页越来越复杂。用户的耐心越来越少。如果网页打开时间稍长，就会造成大量用户流失。 Web性能优化（Web Performance Optimization）成为网站日常运营中非常重要的工作。

其实，对于Web追求性能不仅是用户体验的需求，也是互联网公司核心业务的驱动力。无论是电子商务、游戏、娱乐、社交网络还是搜索引擎IT在实践中，巨头访问体验越快，用户粘性越高，用户忠诚度越高，用户转化率越高。

造成Web性能缓慢的原因有很多。用户端的主要性能是访问延迟。这里的延迟是指用户通过浏览器APP点击启动请求获取反馈的时间，因为Web页面承载的功能越来越多，为页面效果使用的多媒体元素也越来越多，这些都会导致页面访问延迟。

对于网站优化和运维人员，需要进行Web性能优化，不妨听听以下20人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-优化建议match

我们的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(超文本传输协议第二版，原名HTTP 2.0），是HTTP协议的第二个主要版本，HTTP/2的目标包括异步连接重用、头压缩和请求反馈管道化、保留和重用HTTP 1.1完全语义兼容。Google Chrome、Mozilla Firefox、Microsoft Edge和Opera已支持HTTP并默认启用/2。Internet Explorer自IE 11开始支持HTTP但仅限于Windows 10 Beta，默认情况激活。

答案2-常见错误

不能免费使用Web性能工具（如Google PageSpeed、云智能监控宝 ）最基本的Web性能检查。

Dean Hume / @DeanoHume / deanhume.com

软件开发人员，《Fast ASP.NET Websites》本书旨在提高高交易量网站的性能。

答案1-优化建议

如果只能选择一个方面进行优化的话，那肯定是图片了！根据HTTP Archive图片占据了整个统计数据Web60%以上的页面大小，所以专注于这一块是有道理的。 

答案2-常见错误

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

以上是《世界顶级Web性能专家教你优化高性能网站的第一部分，十几位专家分享经验。请期待！

以下是一则广告：

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

点击阅读原文，了解监控宝的细节，免费使用IT监控神器-监控宝。