专注前端,专注网页设计制作 - (承接网页制作、设计) QQ:262817214 虚拟主机 域名注册 云主机 香港空间 | CSS3演示 | 站长工具 | 网页特效 | 网页模板 | 网页素材 | PSD素材 | 手机系统
广告加载中...
当前位置: 首页 > 网页设计 > 网页设计理论 > >文章

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

时间:2016-02-16 09:50点击: 次 【

 1.png

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

其实,对于Web性能的追求不仅仅是用户体验上的需要,更是互联网公司核心业务的驱动力。无论是靠电商、游戏、娱乐、社交、搜索引擎功成名就的IT巨头,都在实践中证明了这样一点:网站越快访问体验越好,用户黏性越高、用户忠诚度更高、用户转化率也越高。

造成Web性能缓慢的原因多种多样,在用户端的主要表现就是访问延迟,这里的延迟指的是从用户通过浏览器、APP点击发起请求到得到反馈所经历的时间,由于Web页面承载的功能越来越多,为了页面效果而使用的多媒体元素也越来越丰富,这些都会造成页面访问的延迟。

而对于网站优化和运维人员来说,要进行Web性能优化,不妨听听以下二十余位来自keycdn.com的Web性能领域的砖家的建议。

keycdn.com邀请歪砖家团回答了下面两个问题:

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

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

专家说

2.png Tim Evko / @Tevko / timevko.website

BaubleBar 前端工程师、播客、RICG 响应式图片创始人,CSS-Tricks、 Smashing Magazine、 SitePoint等杂志撰稿人。

答案1——优化建议

切勿在Web端加入太多应用程序,尤其不要使用太多框架和库来做一些无意义的工作,这通常会导致速度降低,影响移动端支持,并让Web页面太重。

答案2——常见错误

缺乏合理的逐步优化方法,总是头疼医头脚疼医脚;无法及时发现和调优Web页面上的调用元素,忽略第三方内容的大小;很多网站并未真正落实响应式图片的制作方法,导致移动端页面太大。


3.png Matt Shull / @TheMattShull / mattshull.com

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

答案1——优化建议

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

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

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


4.png Una Kravets / @Una / una.im

IBMDesign前端开发人员

答案1——优化建议

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

答案2——常见错误

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


5.png Aaron Gustafson / @AaronGustafson / aaron-gustafson.com

来自微软的Web标准倡导者,Adaptive Web Design作者。

答案1——优化建议

我觉得内容是最重要的,应该查看页面的每个部分,看是否满足网站页面的主要目的。图片、社交媒体分享调用、关联内容,专注重点部分是优化网站性能的第一步。

答案2——常见错误

我看到很多人过于重视一些效果有限的复杂Web优化技术,如改善后端脚本执行时间的技术,但却忽略了最容易完成的目标,如图片优化、恰当图片格式的选择等。


6.png 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性能检查。


7.png Dean Hume / @DeanoHume / deanhume.com

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

答案1——优化建议

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

答案2——常见错误

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

以上是《世界顶级Web性能专家教你制作高性能网站》第一部分内容,后面还有十几位专家的经验分享,敬请期待!

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

推荐文章
热门文章榜