提升Web性能的8个技巧总结

在互联网盛行的今天,越来越多的在线用户希望得到安全可靠并且快速的访问体验。针对 Web 网页过于膨胀以及第三脚本蚕食流量等问题,Radware 向网站运营人员提出以下改进建议,帮助他们为用户提供最快最优质的访问体验。

1. 管理“页面膨胀”

页面大小与性能有着密切的关系。Radware 最新电商性能“行业现状”报告显示,100 强电商页面大小中位数达到了 1492KB,比一年半之前增大了 48%。

在研究报告里加载最快的 10 个页面中,页面包含的资源请求中位数为 50 个,页面大小中位数为 556KB。而加载最慢的 10
个页面中,页面包含的资源请求中位数为 141 个,页面大小中位数为
3289KB。换句话说,加载最慢的页面的资源中位数几乎是加载最快的页面的三倍,页面大小则是六倍。

仔细研究页面尺寸大小,我们可以得到更多的信息。加载最快的 10 个页面所包含的资源总数范围比较密集:在 15 个~72
个之间;页面尺寸最小的仅为 251KB,最大的 2003KB。而加载最慢的 10 个页面所包含的资源总数范围则比较广泛:在 89 个~373
个之间;页面尺寸最小为 2073KB,最大的则超过了 10MB。

2. 进行图像优化

图像是造成页面膨胀的罪魁祸首之一,通常占据页面字节数的 50-60%。在页面中添加图片或是将现有图片放大,是迅速获取用户并提高业务转化率的有效方式。但是这种方法会对性能造成严重的影响。

进行图像优化是提升性能最简单的一种方法,它可以使页面加载更快。为了更有效的完成图像渲染,图像必须经过压缩和整合、图像的尺寸和格式必须经过仔细调整,图像质量也必须经过优化,这样才可以依据图像的重要性进行区别化的加载处理。

3. 控制第三方脚本

在典型的页面服务器请求中,来自于第三方脚本的请求占了其中的 50% 或更多。这些第三方脚本不仅会增加页面的字节数,带来延迟,而且也会成为 Web 页面中最大的潜在故障点。无响应、未经优化的第三方脚本会降低整个网络的加载速度。

解决办法是延迟第三方脚本的加载,将其放在关键页面内容之后进行加载,更为理想的情况是放在页面 onLoad
事件之后加载,这样才不会影响企业的搜索排名(谷歌将 onLoad
事件作为加载时间指标)。对于一些分析工具和第三方广告商而言,如果延迟第三方脚本加载的方法不可行,可以利用脚本的异步版本,与关键内容的加载同步进行。用户必须了解网站中有哪些脚本,删除那些无用的脚本,并对第三方脚本的性能进行持续监控。

4. 真正做到移动设备优先

“移动设备优先”并不是一个全新的概念。早在 2013
年,移动设备的使用量就已经超过了台式机,然而与众多口头承诺的移动性能相比,真正专注于移动设备的开发还是存在一定的差距。例如,2011 年 11
月,移动设备上的平均页面大小为 475KB,现在则增长至 897 KB。也就是说,在短短三年之间,平均页面大小几乎翻了一番。

尽管移动设备和网络取得了一些进展,但就性能而言,还是无法与大小已接近 1MB 的服务页面需求保持同步。我们知道,页面大小与加载时间息息相关,移动用户对缓慢的加载速度尤其敏感。如果企业希望网站可以真正做到“移动设备优先”,就必须正确处理这些问题。

5. 在进行响应式 Web 设计时兼顾性能

响应式设计让设计人员和开发人员可以更好地控制 Web 页面的外观和感觉。它可以使跨多平台和设备上的页面变得更漂亮。但同时也会带来巨大的性能损失,这些性能损失并不能通过更快速的浏览器、网络和小工具得到缓解。而且随着时间的推移,这样影响还将持续恶化。

响应式设计建立在样式表和 JavaScript 之上。然而,低效的 CSS 和 JS
所带来的性能问题远远大于其设计优势给我们带来的好处。样式表应当放在 HEAD
文档中,用以实现页面的逐步渲染。然而,样式表却经常出现在页面其它位置,这就阻碍了页面的渲染速度。换句话说,JavaScript
文件应当放在页面底部或在关键内容加载完成之后再被加载才是合理的处理方式。

6. 实时监控性能

大家都知道要解决一个问题就必须先对问题有充分的了解。要解决页面性能问题,企业就必须知道用户在什么时候可以看到主要页面内容并与之进行交互;同时,企业还需了解性能和可用性问题是如何影响业务指标的。企业需要有方法获取实际的性能指标并对其进行分析。实时用户监控(RUM)工具可以从真实用户的角度实时获取、分析并记录网站的性能和可用性。

7. 切勿过分依赖 CDN 解决所有性能问题

Radware
季度电商性能“行业现状”报告中存在一项最具争议性的调查结果,即:使用内容分发网络(CDN)的网站完成主要内容渲染所需的时间比未曾使用 CDN
的网站要长的多。这是一个相关性问题,而非因果关系:通常情况下,相较于未使用 CDN 的网站,使用 CDN
的网站页面更大,也更复杂。页面的大小和复杂程度才是造成性能问题的元凶,而非 CDN。但这一结果也表明,仅依靠 CDN 并不能解决所有的性能难题。

如果部署得当,CDN 会是解决延迟问题非常有效的工具:缩短托管服务器接收、处理并响应图像、CSS
文件等页面资源请求所需的时间。但是,延迟仅仅只是现代电商网站的关键问题之一。为了实现最佳的加速效果,网站运营人员可以采用组合解决方案:CDN+
前端优化(如 Radware FastView 解决方案)+应用交付控制器(ADC)和内部管理。

8. 在企业内部加强 Web 性能观念的宣传

大量研究证明,提高页面速度可以对所有的关键性能指标产生积极影响:页面访问量、用户粘连度、业务转化率、用户满意度、客户保持、购物车的内容多少和收入。

然而,正如上述 7 个建议中所表明的那样,许多企业都犯了同样的错误,最终损害了 Web 性能。目前,企业应该重点解决 Web 开发目标和在线业务目标之间的差距问题,而且,每个企业都应该至少拥有一个内部性能专家,以便更好的解决 Web 性能问题。

来源:51CTO

时间: 2024-08-31 20:24:15

提升Web性能的8个技巧总结的相关文章

Instagram提升PostgreSQL性能的五个技巧_数据库其它

 随着Instagram的规模日益扩大,Postgres继续充当着Instagram的坚实基础,并存储着绝大部分的用户数据.不到一年之前,我们还曾在博客上说Instagram"存储着大量数据",每秒增加90条数据,现在,这个数据已经增长到了峰值的10000条.而我们的基础存储技术依然保持不变. 在过去的两年半中,我们有一些关于Postgres扩展的经验和工具,想要分享出来.真希望在当初启动Instagram的时候就能有这些经验和工具呀.其中有些是Postgres独有的,有些是其它数据库

Web性能优化:What? Why? How?

为什么要提升web性能? Web性能黄金准则:只有10%~20%的最终用户响应时间花在了下载html文档上,其余的80%~90%时间花在了下载页面组件上. web性能对于用户体验有及其重要的影响,根据著名的`2-5-8`原则: 当用户在2秒以内得到响应,会感觉系统的响应非常快 当用户在2-5秒之内得到响应,会感觉系统的响应速度还可以 当用户在5-8秒之内得到响应,会感觉系统的响应非常慢,但还可以接受 当用户在8秒之后都没有得到响应,会感觉系统糟透了,甚至系统已经挂掉:要么打开竞争对手的网站,要么

来自工程师的8项Web性能提升建议

在互联网盛行的今天,越来越多的在线用户希望得到安全可靠并且快速的访问体验.针对Web网页过于膨胀以及第三脚本蚕食流量等问题,Radware向网站运营人员提出以下改进建议,帮助他们为用户提供最快最优质的访问体验. 1. 管理"页面膨胀" 页面大小与性能有着密切的关系.Radware最新电商性能"行业现状"报告显示,100强电商页面大小中位数达到了1492KB,比一年半之前增大了48%. 在研究报告里加载最快的10个页面中,页面包含的资源请求中位数为50个,页面大小中位

web性能优化之javascript性能调优_javascript技巧

JavaScript 是一个比较完善的前端开发语言,在现今的 web 开发中应用非常广泛,尤其是对 Web 2.0 的应用.随着 Web 2.0 越来越流行的今天,我们会发现:在我们的 web 应用项目中,会有大量的 JavaScript 代码,并且以后会越来越多.JavaScript 作为一个解释执行的语言,以及它的单线程机制,决定了性能问题是 JavaScript 的软肋,也是 web 软件工程师们在写 JavaScript 需要高度重视的一个问题,尤其是针对 Web 2.0 的应用.绝大多

即刻提升jQuery性能的十个技巧[TUTS+]

本文提供即刻提升你的脚本性能的十个步骤.不用担心,这并不是什么高深的技巧.人人皆可运用!这些技巧包括: 使用最新版本 合并.最小化脚本 用for替代each 用ID替代class选择器 给选择器指定前后文 建立缓存 避免DOM操作 避免使用concat(),利用join()处理长字串 返回false值 利用小抄和参考文档   1. 使用最新版本 jQuery一直处于不断的开发和改进过程中. John 和他的团队不断研究着提升程序性能的新方法. 一点题外话,几个月前他还发布了Sizzle,一个据说

深入浅出讲述提升 WordPress 性能的九大秘笈

深入浅出讲述提升 WordPress 性能的九大秘笈 在建站和 web 应用程序交付方面,WordPress 是全球最大的一个平台.全球大约四分之一 的站点现在正在使用开源 WordPress 软件,包括 eBay. Mozilla. RackSpace. TechCrunch. CNN. MTV.纽约时报.华尔街日报 等等. 最流行的个人博客平台 WordPress.com,其也运行在 WordPress 开源软件上.而 NGINX 则为 WordPress.com 提供了动力.在 WordP

HHVM 是如何提升 PHP 性能的?

背景 HHVM 是 Facebook 开发的高性能 PHP 虚拟机,宣称比官方的快9倍,我很好奇,于是抽空简单了解了一下,并整理出这篇文章,希望能回答清楚两方面的问题: HHVM 到底靠谱么?是否可以用到产品中? 它为什么比官方的 PHP 快很多?到底是如何优化的? 你会怎么做? 在讨论 HHVM 实现原理前,我们先设身处地想想:假设你有个 PHP 写的网站遇到了性能问题,经分析后发现很大一部分资源就耗在 PHP 上,这时你会怎么优化 PHP 性能? 比如可以有以下几种方式: 方案1,迁移到性能

提升WEB应用程序安全需要打“组合拳”

由于WEB应用程序对于当今许多企业的内部和外部操作都极端重要,所以其可用性和安全性既是客户的期望又是其要求.因而,企业应该在WEB应用程序问题上不惜一切代价.同时,WEB应用程序的重要性也给安全专家带来巨大压力,因为没有什么会比企业的关键网站或应用被攻击.破坏更恐怖了.不幸的是,在构建应用程序的竞赛中,许多企业给开发者施加压力,要求其 重点关注应用程序的安全.本文将探讨如何在WEB应用程序的性能.可用性.安全性上达到平衡.安全策略在WEB应用程序安全问题上保持前瞻性和主动性应当成为IT的头等大事

提高ASP性能的22个技巧(二)

技巧|性能 技巧12:将常用数据复制到脚本变量中  当访问ASP中的COM对象时,应该将常用对象数据复制到脚本变量中.着将减少COM方法调用.而COM方法调用代价相对比访问脚本数据更高.当访问Collection和 Dictonary对象时,这项技术也能消减高昂的查询代价.  通常,当准备不止一次访问一个对象数据时,应该将这个数据放当一个脚本对象中. 这项优化的主要目标是Request变量(Form和QueryString变量).例如,你的站点传递一个叫UserID的QueryString变量,