提升Web性能的8个技巧总结
提升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性能问题。
提升Web性能的8个技巧总结的更多相关文章
- 提升Web性能的技巧
1. 采用反向代理服务器(Reverse Proxy Server)来对应用进行加速和保护 其作用主要在以下三方面: 负载平衡 – 运行在反向代理服务器上的负载平衡器会在不同的不服务器 间进行传输 ...
- Tomcat启用GZIP压缩,提升web性能
一.前言 最近做了个项目,遇到这么一个问题:服务器返回给客户端的json数据量太大(大概65M),在客户端加载了1分多钟才渲染完毕,费时耗流量,用户体验极其不好.后来网上搜优化的方法,就是Http压缩 ...
- 提升vector性能的几个技巧
原文:https://www.sohu.com/a/120595688_465979 Vector 就像是 C++ STL 容器的瑞士军刀.Bjarne Stoutsoup 有一句话 – “一般情况下 ...
- 提高Web性能的前端优化技巧总结
- 前端面试:提升web性能
1,减少HTTP请求数 A,从设计实现层简化页面 B,合理设置HTTP缓存 C,资源合并与压缩.如果可以的话,尽可能的将外部脚本,央视进行合并,多个合为一,css,javascript,image都可 ...
- 25个增强iOS应用程序性能的提示和技巧(中级篇)(3)
25个增强iOS应用程序性能的提示和技巧(中级篇)(3) 2013-04-16 14:42 破船之家 beyondvincent 字号:T | T 本文收集了25个关于可以提升程序性能的提示和技巧,分 ...
- 25个增强iOS应用程序性能的提示和技巧--中级篇
25个增强iOS应用程序性能的提示和技巧--中级篇 标签: ios性能优化内存管理 2013-12-13 10:55 738人阅读 评论(0) 收藏 举报 分类: IPhone开发高级系列(34) ...
- 增强iOS应用程序性能的提示和技巧(25个)
转自 http://www.cocoachina.com/newbie/basic/2013/0522/6259.html 在开发iOS应用程序时,让程序具有良好的性能是非常关键的.这也是用户所期望的 ...
- 25个增强iOS应用程序性能的提示和技巧 — 中级篇
本文由破船译自:raywenderlich 转载请注明出处:BeyondVincent的博客 _____________ 在开发iOS应用程序时.让程序具有良好的性能是非常关键的.这也是用户所期望的. ...
随机推荐
- Spark BlockManager 概述
Application 启动的时候: 1. 会在 SparkEnv 中实例化 BlockManagerMaster 和 MapOutputTracker,其中 (a) BlockManagerMast ...
- 小R的棋子
小R的棋子(dp) 数轴上有 n 个位置可以摆放棋子,标号为1,2,3...n.小 R 现在要在一些位置摆放棋子,每个位置最多摆放一个棋子,摆放棋子的总数没有限制.小 R 不希望他摆放的棋子过于拥挤, ...
- Openjudge jubeeeeeat
jubeeeeeat 题目链接 总时间限制: 1000ms 内存限制: 256000kB 描述 众所周知,LZF很喜欢打一个叫Jubeat的游戏.这是个音乐游戏,游戏界面是4×4的方阵,会根据音乐 ...
- 洛谷P4332 [SHOI2014]三叉神经树(LCT)
传送门 FlashHu大佬太强啦%%% 首先,我们可以根据每一个点的权值为$1$的儿子的个数把每个点记为$0~3$,表示这一个点的点权 先考虑一下暴力的过程,假设从$0$变为$1$,先更改一个叶子结点 ...
- 系统:Centos 7.2 内核3.10.0-327.el7.x86_64 # 内核需要高于2.6.32
系统:Centos 7.2 内核3.10.0-327.el7.x86_64 # 内核需要高于2.6.32 Drbd : 192.168.8.111:node1/dev/drdb0 /mydeta 19 ...
- 通过jdbc连接MySql数据库的增删改查操作
一.获取数据库连接 要对MySql数据库内的数据进行增删改查等操作,首先要获取数据库连接 JDBC:Java中连接数据库方式 具体操作如下: 获取数据库连接的步骤: 1.先定义好四个参数 String ...
- 洛谷P1057 传球游戏(记忆化搜索)
点我进入题目 题目大意:n个小孩围一圈传球,每个人可以给左边的人或右边的人传球,1号小孩开始,一共传m次,请问有多少种可能的路径使球回到1号小孩. 输入输出:输入n,m,输出路径的数量. 数据范围:4 ...
- Java基础笔记(十)—— 数组
数组是具有相同类型的数据的集合,是一种引用数据类型,一般具有固定的长度,并且在内存中占据连续的空间. 数组声明:数据类型[ ] 数组名; 数据类型 数组名[ ]; 如:int[ ...
- Keepalived + Nginx + Tomcat 高可用负载均衡架构
环境: 1.centos7.3 2.虚拟ip:192.168.217.200 3.192.168.217.11.192.168.217.12上分别部署Nginx Keepalived Tomcat并进 ...
- python模块之time方法详细介绍
>>> import time >>> dir(time) ['_STRUCT_TM_ITEMS', '__doc__', '__loader__', '__nam ...