如何提高网页速度优化 提高用户体验

点击数:15002012-10-25 14:31:05 来源: 稻壳网

新闻摘要:网站的加载速度是许多web工程师都面对的问题,关于一个网站来说,加速网站拜访速度不光进步了用户体会,而且关于SEO也有很大的影响。网页的加载速度快了,搜索引擎蜘蛛抓取的页面也就多了,然后增加了录入、增长了流量。那么在网页速度优化方面应该从哪些方面下手呢?

1.网页速度优化

[文章来源:如何提高网页速度优化 提高用户体验]


网站的加载速度是许多web工程师都面对的问题,关于一个网站来说,加速网站拜访速度不光进步了用户体会,而且关于SEO也有很大的影响。网页的加载速度快了,搜索引擎蜘蛛抓取的页面也就多了,然后增加了录入、增长了流量。那么在网页速度优化方面应该从哪些方面下手呢?

1)尽可能的削减页面中的dom元素,铲除网页中一些冗余的代码。若是需求的化,咱们可以把代码中的注释去掉,乃至空行空格之类的也去掉。这样可以加速浏览器的加载速度和烘托速度。

2)CSS Sprites,可以把网站中一些比拟通用的图片进行兼并,然后运用CSS布景定位技能来调用图片的不一样有些,这样可以大大的削减HTTP的恳求。

3)为图片指定宽度与高度,为每一个图片都指定一个width特点与height特点,浏览器会预先留出既定的方位,图片下边的代码可以持续加载而不必等候。

4)优化图片的巨细,将每一张图片都保管成web所用格局,并将质量优化到50-65之间。颜色丰厚的图片运用jpg格局,颜色单一的图片运用gif格局,需求设置透明度的图片运用png格局。

5)运用浏览器缓存,为一些不常常改变的文件设置一个相对较长的过期时刻,留在缓存中的文件就不必再向服务器宣布HTTP恳求了,这样削减了浏览器向服务器宣布的HTTP恳求数。

6)在服务器端启用GZIP紧缩,当启用了GZIP后,网站服务器向客户端传输数据之前,是颠末紧缩了的,然后减小了浏览器的负载量。

7)将css款式表放在html页面头部进行预加载,尽量不要在款式中运用css表达式。

8)将js代码放在html页面底部最终加载。

9)尽量不要再html页面中刺进iframe。

2.网页加载及烘托

2.1.网页加载次序

1)IE下载的次序是从上到下,烘托的次序也是从上到下,下载和烘托是一同进行的。

2)在烘托到页面的某一有些时,其上面的一切有些都现已下载完结(并不是说一切相关联的元素都现已下载完)

3)若是遇到语义解释性的标签嵌入文件(JS脚本,CSS款式),那么此刻IE的下载进程会启用独自衔接进行下载。而且在下载后进行解析,解析进程中,中止页面一切往下元素的下载,堵塞加载。

4)当引证了JS的时分,浏览器发送1个js request就会一向等候该request的回来。因为浏览器需求1个安稳的DOM树结构,而JS中很有可能有代码直接改变了DOM树结构,比方运用 document.write 或 appendChild,乃至是直接运用的location.href进行跳转,浏览器为了避免出现JS修正DOM树,需求从头构建。

5)款式表在下载完结后,将和曾经下载的一切款式表一同进行解析,解析完结后,将对此前一切元素(含曾经现已烘托的)从头进行烘托。

6)JS、CSS中如有重界说,后界说函数将掩盖前界说函数DOM树的情况,所以 就会堵塞其他的下载和出现。

2.2.html页面加载解析流程

1)用户输入网址(假设是个html页面,而且是第一次拜访),浏览器向服务器宣布恳求,服务器回来html文件;

2)浏览器开端载入html代码,发现<head>标签内有一个<link>标签引证外部CSS文件;

3)浏览器又宣布CSS文件的恳求,服务器回来这个CSS文件;

4)浏览器持续载入html中<body>有些的代码,而且CSS文件现已拿到手了,可以开端烘托页面了;

5)浏览器在代码中发现一个<img>标签引证了一张图片,向服务器宣布恳求。此刻浏览器不会比及图片下载完,而是持续烘托后边的代码;

6)服务器回来图片文件,因为图片占用了必定面积,影响了后边阶段的排布,因而浏览器需求回过头来从头烘托这有些代码;

7)浏览器发现了一个包括一行Javascript代码的<script>标签,从速运转它;

8)Javascript脚本履行了这条句子,它指令浏览器躲藏掉代码中的某个<div> (style.display="none")。杯具啊,俄然就少了这么一个元素,浏览器不得不从头烘托这有些代码;

9)总算比及了</html>的到来,浏览器泪如泉涌……

10)等等,还没完,用户点了一下界面中的"换肤"按钮,Javascript让浏览器换了一下<link>标签的CSS途径;

11)浏览器召集了在座的各位<div><span><ul><li>们,"大伙儿拾掇拾掇行李,咱得从头来过……",浏览器向服务器恳求了新的CSS文件,从头烘托页面。

3.网页速度优化东西

3.1.firefox插件firebug

1)Firebug 是网页浏览器 Mozilla Firefox 下的一款开发类插件。

2)它集HTML检查和修改、Javascript控制台、网络情况监视器于一体,是开发JavaScript、CSS、HTML和Ajax的得力助手。

3)Firebug从各个不一样的视点剖析Web页面内部的细节层面,可以监控恳求头、呼应头、显现资源加载瀑布图,给Web开发者带来很大的便当。

3.2.yahoo开发东西yslow

1)装置YSlow有必要首要先装置 Firebug。

2)YSlow可以对网站的页面进行剖析,并通知你为了进步网站功能,怎么根据某些规矩而进行优化。

3)YSlow可以剖析任何网站,并为每一个规矩发生一个全体陈述,若是页面可以进行优化,则YSlow会列出具体的修正意见。

3.3.page speed

1)Page Speed 是开源 Firefox/Firebug 插件。

2)Page Speed 对网站的网络服务器装备和前端代码履行若干测验。这些测验根据一组已知可增强网页功能的最佳理论。

3)在网页上运转 Page Speed 的网站管理员会取得一组对准各网页的分数,以及有关怎么改进网页功能的有用主张。

3.4.httpwatch

1)HttpWatch是强壮的网页数据剖析东西。

2)它是集成在Internet Explorer东西栏。

3)HttpWatch 是一款可以搜集并显现页页深层的信息。它可以在显现网页一同显现网页恳求和回答的日志信息。乃至可以显现浏览器缓存和IE之间的交流信息。

4)每一个HTTP记载都可以具体的剖析其 Cookies、音讯头、字符查询等信息。撑持HTTPS及剖析陈述输出为XML、CSV等格局。