现在位置首页 / 前端开发 /正文

现在网页增加如何优化加载速度是一个问题

作者: IT小兵 | 2013年6月14日| 热度:℃ | 评论: |参与:

现在,尤其是最近几年里,宽带越来越快,电脑性能越来越好,浏览器兼容性也越来越好,这样的环境,不知道宠坏了多少Web开发者啊。研究组织HTTP Archive研究得出的结果表明,目前平均一个web的大小是1.25兆,这在以前是不可想象的。对于拥有宽带的用户来说,可能并不是一个问题。但是对于那些网速并不理解的用户来说,可能会是一个非常头疼的问题。 尤其是对于现在越来越火热的移动互联网,网速还是一个瓶颈,如何优化网页大小,加载速度是一个网站存亡的关键问题。


首先我们看一个页面内容大小的饼图:


一、网页优化
1.  优化图片
这个绝对是显而易见的,可以看到图片占据的页面内容分量最重。在现代网页设计中,图片绝对占据了大部分的内容。你需要针对你的页面重新定义图片大小。这能够有效地帮助你减少页面大小。而且,这里有很多的功能能够帮助你针对图片减肥,例如,Smush.it和TinyPNG
2.  压缩CSS和JAVAscript代码
有效地压缩CSS和JavaScript代码能够有效地减少页面大小,你可以删除空格优化代码。当然,压缩代码对于代码阅读不是非常有用,但是一般作为产品环境来说,我们通过这种方式可以有效地减少页面加载时间。
3.  [email protected]
@import CSS语法允许你加载其它的CSS文件。有时间非常有帮助,但是它并不是和主文件一起下载的,所以可能会增加页面加载时间。建议使用link标签,这样会更加高效。
4.  减少HTTP请求次数
减少HTTP请求次数可以帮助你有效的增加网站加载速度。你可以使用如下方式:

  • 融合文件:将不同的样式表文章合成一个文件可以减少http请求的次数。同样对于JavaScript来说也适用。

  • 使用CSS sprites:使用sprites可以帮助你把多个图片文件放置到一个文件里,这样可以减少图片下载的次数。


5.  利用浏览器缓存
可能你的网站中包含了一些并不常常变化的文件。例如图片、CSS、JavaScript等等。如果让浏览器来缓存文件的话可以帮助你增加网页加载速度。通常我们使用web服务器的配置来达到效果,如下:

比较简单的方式是更新服务器的.htaccess文件。代码如下:

<IfModule mod_expires.c>  

# Enable Expirations  

ExpiresActive On  

# Default Expiration Time  

ExpiresDefault "access plus 1 month"  

# Expiration for Images  

ExpiresByType image/gif "access plus 1 month"  

ExpiresByType image/png "access plus 1 month"  

ExpiresByType image/jpg "access plus 1 month"  

ExpiresByType image/jpeg "access plus 1 month"  

# Expiration for CSS  

ExpiresByType text/css "access plus 1 month”  

# Expiration for JavaScript  

ExpiresByType application/javascript "access plus 1 month"  

</IfModule>  


二、网页加载速度测试工具
1.  pagespeed

pagespeed是来自Google的一个工具,可以帮助你分析web页面并且告诉你如何优化来提高效率。当然,你可以作为chrome的扩展来使用。


2.  speed tracer

另外一个来自于Google的工具,允许你更深层次的查看页面性能。

3.  YSLOW

一个浏览器的扩展,和pagespeed非常类似,拥有页面评分和等级。并且给你一些相关的推荐和解决方案。


4.  浏览器内建的开发者工具

很多浏览器例如,chrome和firefox都拥有自己内建的性能优化工具。可以帮助你了解页面加载的情况。

chrome的开发者工具尤其好用,大家想要了解更多,请看这一篇:

Google Chrome 开发者工具使用详解---喜欢Google Chrome浏览器

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:[email protected]

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:[email protected]

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询