页面加载速度优化的12个建议

标签: 页面 加载 速度 | 发表时间:2014-06-07 01:27 | 作者:天梯梦
出处:http://www.iteye.com

Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷。那么该如何补救,提高网站页面的加载速度呢?

 

报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验。网站运营人员可以通过这些建议来解决页面加载速度难题。编译如下:

网站加载速度 用户体验 网站优化

 

1、合并Js文件和CSS

将JS代码和CSS样式分别合并到一个共享的文件,这样不仅能简化代码,而且在执行JS文件的时候,如果JS文件比较多,就需要进行多次“Get”请求,延长加载速度,将JS文件合并在一起后,自然就减少了Get请求次数,提高了加载速度。

 

2、Sprites图片技术

Spriting是一种网页图片应用处理方式,它是将一个页面涉及到的所有零星图片都包含到一张大图中去,然后利用CSS技术展现出来。这样一来, 当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了,可以减少了整个网页的图片大小,并且利用CSSSprites能很好地减少网页的 http请求,从而大大的提高页面的性能。CSSSprites在国内很多人叫css精灵,很早就有了,在很多大型网站都有用到,特别是一些所有页面都存 在的图标用得比较多,很好的提升加载速度。

 

3、压缩文本和图片

压缩技术如gzip可以有效减少页面加载的时间。包括HTML,XML,JSON(JavaScript对象符号),JavaScript和CSS 等,压缩率都可以在大小70%左右。文本压缩用得比较多,一般直接在空间开启就行,而图片的压缩就比较随意,很多都是直接上传,其实还有很大的压缩空间。

 

4、延迟显示可见区域外的内容

为了确保用户可以更快地看见可见区域的网页可以延迟加载或展现可见区域外的内容,为了避免页面变形,可以使用占位符标签制定正确的高度和宽度。比如 WP的jQueryImage LazyLoad插件就可以在用户停留在第一屏的时候,不加载任何第一屏以下的图片信息,只有当用户把鼠标往下滚动的时候,这些图片才开始加载。这样很明 显提升可见区域的加载速度,提高用户体验。

 

5、确保功能图片优先加载

网站主要考虑可用性的重要性,一个功能按钮要提前加载出来,用户进入下载页,一个只需要8s时间的下载花了5s在等待、寻找下载按钮图片,谁能忍受?

 

6、重新布置Call-to-Action按钮

其实这个和上面一条是差不多的,都是从用户体验速度着手,跳过了网页的整体加载速度。速度没变,只是让一些行为按钮提前,Call-to- Action按钮一般习惯设计在页面底部,这样的习惯对于用户来说并不总是好的,购买用户需要等到最下面加载出来才能点击下一步操作。可以调整CTA按钮 的位置或使用滑动的图片按钮。很多大型购物网站的加入购物车就是这种类型。

 

7、图片格式优化

不恰当的图像格式是一种极为常见的减慢加载速度的罪魁祸首。正确的图片格式可以让图片缩小数倍,如果保存为最佳格式。可以节省大量带宽,减少处理时间时间,大大加快页面加载速度,这是一种很常见的做法。

 

8、使用 Progressive JPEGs

ProgressiveJPEGs图片是JPEG格式的一个特殊变种,名为“高级JPEG”。在创建高级JPEG文件时,数据是这样安排的:在装入 图像时,开始只显示一个模糊的图像,随着数据的装入,图像逐步变得清晰。它相当于交织的GIF格式的图片。高级JPEG主要是考虑到使用调制解调器的慢速 网络而设计的,快速网络的使用者通常不会体会到它和正常JPEG格式图片的区别。对于网速比较慢的用户,这无疑有很好的体验。

 

9、精简代码

这个可以说是最直接的一个方法,也是用得比较多的,对网页代码进行瘦身,删除不必要的沉冗代码,比如不必要的空格、换行符、注释等,包括JS代码中的无用代码也需要清除。其中对于注释代码的清除可能有些人存在误区,甚至有的在里面堆砌关键词。

 

10、延迟加载和执行非必要脚本

网页中有很多脚本是在页面完全加载完前都不需要执行的,可以延迟加载和执行非必要脚本。这些脚本可以在onload事件之后执行,避免对网页上重要 内容的呈现造成影响。这些脚本可能是你自己网页的甲苯,往往更多的是一些第三方脚本,这样的有很多,比如评论、广告、智能推荐、百度云图、分享等等,这些 完全可以等主体内容加载完后再执行。

 

11、使用AJAX

AJAX即“Asynchronous Javascript +XML“,是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新。这意味着可以在不重新加 载整个网页的情况下,对网页的某部分进行更新。传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页面。

 

12、自动化的页面性能优化

自动化的页面性能优化也就是借助工具了,网站提速工具有很多,这里Radware推荐了自家的RadwareFastView,也算Radware给自家做了一个广告,这里不多说了。

以上就是Radware给出的12个页面加载速度优化建议,加入了个人的一些建议。

 

来源: http://www.chinaz.com/web/2014/0527/353092.shtml

 

 

 

 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [页面 加载 速度] 推荐:

页面加载速度优化的12个建议

- - Web前端 - ITeye博客
Radware发布的2014年春季电商页面速度与Web性能”调查报告强调了电商页面加载速度的重要性,同时指出很多网站都没有利用最佳的页面优化技术,页面加速速度都存在很大缺陷. 那么该如何补救,提高网站页面的加载速度呢. 报告给出了12个页面加载速度优化的补救措施,用以改善加载时间,改善站长浏览者的用户体验.

提高首屏页面加载速度,解决vue-cli打包后单个文件过大的问题 - 请叫我宋某某 - 博客园

- -
本教程是针对vue-cli3以上的版本,其实原理都大同小异,这个demo为vue-cli直接创建的项目,并在main.js中引入了. 首先看demo打包后生成的文件大小,这个demo里面什么业务都没写、仅仅引入了几个包,chunk-vendors.js就达到了1.6M之多,如果是写入了庞大的业务后没做任何优化处理,那么这个文件可能会达到10M之多,这发生在我真实的项目经历中.

从app加载页面说开去

- - 百度MUX
都说好的交互设计的评判标准之一是“别让我等”,但互联网产品总是受制于实际的网络问题. 移动端产品则更为明显,2G、3G环境下加载不够给力,wifi环境也未必每次都是那么顺利. 因此“别让我等”更像是种奢望,我们倒应该思考的是“如何优雅而不令人烦躁的等”. 与之最直接关联的就是app加载页面的设计. 一个app加载页面,大致分为3类:.

HTML5的页面资源预加载技术(Link prefetch)加速页面加载

- - HTML5资源教程
不管是浏览器的开发者还是普通web应用的开发者,他们都在做一个共同的努力:让Web浏览有更快的速度感觉. 有很多已知的技术都可以让你的网站速度变得更快:使用CSS sprites,使用图片优化工具,使用.htaccess设置页面头信息和缓存时间,JavaScript压缩,使用CDN等. 我曾经介绍过本站上使用的一些速度优化技术.

管理好页面图片,减少页面加载时http连接,优化页面

- - ITeye博客
浏览器渲染页面的时候,遇到图片标签或者css中的背景图片设置,先会到本地缓存中寻找是否已经下载了这张图片,如果已经下载过了就直接从缓存中加载;否则会到图片指定的路径下载到本地缓存. 而且这种下载是阻塞式的(部分浏览器内核已经实现异步加载图片. 也就是说在下载这些图片的时候,页面渲染处于暂停状态,必须等到图片下载完成了再继续渲染.

Chrome 17将大幅提升网页加载速度

- 韬光养晦 - cnBeta.COM
据国外媒体报道,Chrome 17已经作为Chromium nightly版通过Webkit渠道发布,这是Google今年发布的第九个修订版浏览器. 新版Chrome首次整合HTTP管线化(HTTP pipelining)技术. 用户可以通过chrome://flags进入设置界面,点击HTPP Pipelining选择框激活这项功能.

JavaScript表格组件加载速度测试

- - 博客 - 伯乐在线
网络技术一直在发展并提高,人们期望Web应用程序能提高桌面程序那样的性能和用户体验. 而数据表格又是企业级Web应用最为重要的部分,我们已经用了大量的数据(行数和列数)来测试流行的 JavaScript 表格的页面加载速度. 在我们的测试中,我们针对每种表格组件创建了一个示例,在页面中用不同的行数和列数初始化表格.

优化listview的加载速度getview写法

- - Web前端 - ITeye博客
在android开发中Listview是一个很重要的组件,它以列表的形式根据数据的长自适应展示具体内容,用户可以自由的定义listview每一列的布局,但当listview有大量的数据需要加载的时候,会占据大量内存,影响性能,这时候就需要按需填充并重新使用view来减少对象的创建. 最快的方式是定义一个ViewHolder,将convetView的tag设置为ViewHolder,不为空时重新使用即可 static class ViewHolder { TextView text; ImageView icon; }.

网页加载速度 最多不能超过3秒!

- - 雷锋网
【编者按】本文由Cucumbertown联合创始人Cherian Thomas撰写,阐述了其对网页加载的看法. 在Cucumbertown我们运用各种方法来确保我们的页面加载时间保持在2秒内,最多不能超过3秒,我们真的非常看重这个. 如果响应超过3秒的话我们就会收到不少的警报. 几天之前,那时候Chris Zacharia还没写那篇说明页面权重重要性及 YouTube应对之策的文章.

10余种提升WordPress博客加载速度的方法

- - 软矿
我们都知道一个网站的加载速度直接影响到搜索引擎爬虫对网站页面的抓取,也直接影响到网站用户体验. 网站加载速度过慢会造成搜索引擎无法抓取到页面内容而丢弃对该网站的一些页面的收录,同时可以丢失部分用户. 在月光博客读到SEOtime一篇较好的文章,小编转载过来以借花敬佛,愿对一些正在建站或者即将要建站的朋友有所帮助.