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

作者： Brian Jackson 

 

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

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

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

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

专家说

 Harry Roberts 

@csswizardry / csswizardry.com
服务于Google、UN、BBC和Kickstarter的前端架构师和顾问 

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

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

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

 Sergey Chernyshev 

@sergeyche / sergeychernyshev.com
Web技术专家，对Web物理性能和开放源码很有兴趣。Meetup: NY Web Performance和WebPerfDays NY的组织者。

答案1——优化建议
尝试一下在完成页面的Layout布局和CSS开发工作之前，不在加载任何JavaScript，这会帮助工程师更好的进行网页编码，同时正常加载异步代码。

答案2——常见错误
最常见的错误就是图片尺寸过大，其实使用较小的文件大小获得满意的图片效果非常容易，但不注意的话页面就会很臃肿。另外页面上会有许多脚本和代码（如JS和CSS）导致渲染延迟，我最喜欢在一切展现出来后再加载这些内容。

 Patrick Meenan

@patmeenan / webpagetest.org

WebPageTest工具制作者， Chrome工程师@Google。

答案1——优化建议
先交付能满足用户体验的最简单功能，这可能存在效果欺骗，但从技术上囊括了图片优化、压缩、async js、延迟加载图片以及最典型的Web优化方法，而从整个网站来看并不会影响用户的感知，还能帮助网站和APP进行深度优化。很多科技网站现在都喜欢用到的瀑布流页面展现方式（尤其是幻灯片与页面同步加载时）就是个典型例子，你可以根据每个请求的必要性，决定页面的加载程度，如果与后面的功能重叠了，就尽可能地优化它。这有助于我们专注用户体验，带来更好的优化结果。

答案2——常见错误
在大多数情况下，我看到的问题仍然以经典优化问题（即便是大型网站）为主。
廉价虚机的糟糕性能，大中型网站通常没有这个问题，但国内大部分个人站长和初创公司的网站都托管在廉价的虚拟主机或云主机平台上，糟糕的系统性能导致超过5秒钟才读取到后端数据库内容的情况比比皆是。而糟糕的图像压缩功能影响范围更广，从高分辨率的24位PNG图片，到高分辨率的JPEG（非合理画面质量的JPEG）。根据浏览器要求使用指定格式的图片当然最好，但即使常规图片的压缩也是个不小的挑战，特别是对需要编辑上传文章图片的内容网站而言。

网站和应用越来越多地依赖第三方服务或插件提供一些基础服务，如聊天功能、网站分析、广告、社交、登录、支付、定位等等。如今，调用第三方服务的网站和APP数量激增，抵消了HTTP/2带来的很多性能提升。

很多网站在Head头部加载外部脚本和CSS，标签管理器同时加载进来，这些“无用内容”过渡消耗了浏览器的预加载器资源，甚至对页面核心内容的展示造成了严重的阻塞延迟。

 Sara Soueidan 

@SaraSoueidan / sarasoueidan.com

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

答案1——优化建议
图片优化，优化和使用响应式图片（<image> 和srcset属性），因为大多数网站加载图片太耗时间了，让用户几乎总是处于缓慢连接中，这太没人性了。

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

 Anselm Hannemann 

@helloanselm / helloanselm.com

前端开发人员，热衷于稳定而可扩展的代码架构。 WDRL Newsletter的管理者。

答案1——优化建议
开始一个项目之前，最重要的事情就是对此项目的Web性能核心指标有一个准确的技术定义，比如支付类网站首要稳定，而电商促销网站更注重高并发。同时要时刻谨记Web和浏览器的一些基本原则，比如资源的获取、解析和加载顺序，就可以对Web性能进行最大的改善，这比缩小图片尺寸等优化方法更有效。要将资源尽快在浏览器里加载出来，就要减少JavaScript的使用，除非你有很充足的理由一定要这么做。

答案2——常见错误
人们通常倾向于进行一些微优化工作，但我们有太多东西需要优化了，如果因为微优化而错过真正重要的性能优化方法，就会舍本逐末、事倍功半。 

 Patrick Sexton 

@PatrickSexton / varvy.com

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

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

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

 Christian Heilmann 

@codepo8 / christianheilmann.com

技术布道者，Microsoft Edge浏览器开发者。

答案1——优化建议
图片是目前为止我们在Web性能方面遇到的最大问题，学习如何使用不同的图片格式进行Web优化，让CMS支持响应式图片，别再让一张图片占领不同终端的浏览器。

答案2——常见错误
很多人在优化自家产品方面做得很棒，但却被第三方脚本、内容和服务的性能优化束手束脚。其实我们不需要为每个社交网站都设置展示按钮，只需要停止调用这些内容就可以了。视差滚动(Parallax Scrolling)网站设计非常流行，但我们常常忘记告诉浏览器，为固定部分内容生成一个单独的层，这就非常影响网站的性能。在网站制作和测试过程中，我们会用高性能的硬件上测试自己的网站有多牛，却不愿意在中低端设备上进行性能测试，难道你不知道屌丝才是互联网最主要的用户群体么？！你的硬件配置很大程度上不是你的用户的选择。

 Peter Cooper

@peterc / peterc.org

CooperPress发行人，出版了《Web Operations Weekly》，同时也是软件开发者和代码实践派。

答案1——优化建议
对用户体验来说，尽管数字是衡量优化效果的重要方式，但最终还是取决于真实用户体验的感知（专门给搜索引擎爬虫制作的网站除外），所以他们的看法和体验才最重要。如果加入一个额外元素能够帮助他们更快地加载页面，即使数字上没有多少增长，恕我直言，这个元素仍旧是受用户欢迎的。

答案2——常见错误
当一种趋势开始流行时，大家往往容易走极端，现在人们将焦点集中于网络性能的优化，但这只是暂时的问题，其代价却是我们减少对网络架构和网站整体设计的考虑。一个网页可以通过优化加载得很快，但用户希望看到的是一个联系紧密的网站整体，忘掉这个初衷，再快的网页速度也不会让用户体验更爽。

同样，当人们专注于主页加载速度优化，却没有在其它方面投入同样多的精力，所幸社交媒体的流行降低了网站主页的重要性，用户通过社交平台可以直接看到内容或产品页。所以我们要注重用户进入你的网站的渠道并进行针对性优化，而不是某些CXO们所忧心的“标题”的位置。

小结

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

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

了解监控宝详情，免费使用IT监控神器——监控宝请关注云智慧官方微信（cloudwise2014）。