世界顶级Web性能专家带您优化高性能网站(中)

昨天我们给大家带来了它。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监控神器-监控宝。