你的位置: 奇芳阁 SEO优化, 互联网资讯 阅读文章     

提高网站打开速度的13个秘籍,让网站飞起来

[ SEO优化 , 互联网资讯 // 2014-08-11 ]

对于网站设计师来讲,网站的访问速度甚至比内容还重要。就算网站内容很优秀,但如果访问速度很慢,相信也不会有多少人耐心等待。如果说服务器、带宽、CDN这类硬指标我们没有经济实力去做,不妨通过网页代码优化的方式来提高速度,奇芳阁总结了一些可行性的方案。

提高网站打开速度的13个秘籍:

1、减少HTTP请求

浏览器会花费80%的时间获取外部元件,包括脚本、样式表、图像等,只有20%的时间用来加载内容,每个网站都会有许多HTTP请求,由于只有2个HTTP请求可以在同一时间传送,所以请求一旦过多就会造成延迟。

常用的方法,合并css,js(将一个页面中的css和js文件分别合并)以及 Image maps和css sprites等。当然或许将css,js文件拆分多个是因为css结构,共用等方面的考虑。阿里巴巴中文站当时的做法是开发时依然分开开发,然后在后台 对js,css进行合并,这样对于浏览器来说依然是一个请求,但是开发时仍然能还原成多个,方便管理和重复引用。yahoo甚至建议将首页的css和js 直接写在页面文件里面,而不是外部引用。因为首页的访问量太大了,这么做也可以减少两个请求数。而事实上国内的很多门户都是这么做的。

而css sprites是指只用将页面上的背景图合并成一张,然后通过css的background-position属性定义不过的值来取他的背景。淘宝和阿里巴巴中文站目前都是这样做的。有兴趣的可以看下淘宝和阿里巴巴的背景图

http://www.csssprites.com/ 这是个工具网站,它可以自动将你上传的图片合并并给出对应的background-position坐标。并将结果以png和gif的格式输出。

2、 缩小Javascript和CSS文件

如果你的网站大约有50-60%的用户是第一次访客,那么这些人会下载Javascript和CSS,如果这些文件很大浏览器会下载很长时间。

使用压缩工具可以减少Javascript和CSS尽一半的文件大小,如果你有信心使用“命令行”,我强烈推荐使用雅虎的YUI压缩,至少能提高40%到60%的压缩率,如果你实在不懂,可以用站长之家的CSS\JS压缩工具

3、使用CDN(内容分发网络)

关于更多CDN介绍以及使用方法可参考《几款不错的国内外CDN网站加速服务》一文介绍;

4、启用Gzip压缩

Gzip编码是用来改进网页性能的方法,不仅可以减小存储空间,还可以减少传输所需要的时间。将网站中的文件使用 Gzip压缩后,可以显著地增加网页加载速度,同时也可以降低网站的带宽流量消耗。

部分虚拟主机默认有gzip功能,但大部分没有,独立主机、VPS一般可以设置,开启gzip会加重服务器负担,而且要修改服务器配置,强烈建议大家开启gzip,如果不清楚可以问问所在空间商,让他们帮忙开启。

5、将css放在页面最上面

将css放在页面最上面,这是为什么?因为 ie,firefox等浏览器在css全部传输完全之前不会去渲染任何的东西。所以我们应该尽快让css加载完毕;

6、将script放在页面最下面

将脚本放在页面最下面的目的有那么两点: 1、 因为防止script脚本的执行阻塞页面的下载。在页面loading的过程中,当浏览器读到js执行语句的时候一定会把它全部解释完毕后在会接下来读下 面的内容。 2、脚本引起的第二个问题是它阻塞并行下载数量。HTTP/1.1规范建议浏览器每个主机的并行下载数不超过2个(IE只能为2个,其他浏览器如ff等都是默认设置为2个,不过新出的ie8可以达6个)。因此如果您把图像文件分布到多台机器的话,您可以达到超过2个的并行下载。但是当脚本文件下载时,浏览器不会启动其他的并行下载。

7、 把javascript和css都放到外部文件中

把页面中需要用到的JavaScript 和CSS样式表文件放在另外的文件夹中,这样一来在打开网站其他页面时就会缓存这些调用的文件,从而加快网站页面的加载速度。

8、减少DNS查询

DNS解析包括往返解析的次数及每次解析所花费的时间,它们两者的积就是DNS解析所消耗的时间,因此,很多人忽视了DNS的问题,其实,DNS对网站解析速度也是非常重要的,如之前介绍的《十大免费DNS服务—稳定,可靠,好用的免费DNS服务》、《阿里云解析—又一个强大的免费智能DNS解析服务》免费给域名做DNS加速的,大家可以一试。

9、缓存图片、CSS和Javascript

每当一个新用户访问你的网站,图片、CSS和Javascript应该在其浏览器缓存,这样他们下一次访问就特别快。

绝大多数windows主机已经默认启用了,只需要在控制面板中设定过期时间和文件类型那个就可以了,我建议图片、CSS和Javascript时间可设置为一个月。而对于Apache Web服务器,使用mod_cache模块开启缓存。

10、合并CSS引用图片

很多网站的图片都是切成小块的,这样下来就会有大量CSS引用图片,如三次元软件世界的CSS就引用了十几个图片,cssimages也是影响网站速度的一种重要因素。

如果我们把CSS图片合并成一个,多个HTTP请求变成1个,想想会是什么效果?它的原理就是通过CSS坐标的方式取得图片径路,每个CSS标签引用不同坐标就会得到不同图片。我们看到很多网站的CSS图片只有一张,用的就是这个原理。

不懂也没有关系,CSS图片合并生成器这个网站能帮助你合并CSS图片,并且能得到相应代码。

11、只加载<head>部分的基本脚本

这个最简单,不花时间,点击自己网站右键“查看源文件”找到<head>与</head>之间的区域,看看那些不重要好的JS文件,把它仍到页面底部,也就是让它最后加载。或者直接删除。

例如三次元世界引用的bdshare(百度分享按钮)和util.js(回顶部标签),让它最后加载,这样能提升内容打开速度,而且它们也不太重要。

 12、对图像进行压缩

除非你加载视频,那么影响网站速度罪魁祸首应该就是图片了,如果是jpeg、png图片,保证不失品质的前提下,让他们尽量压缩,Fireworks软件“导出向导”功能,它提供了一个很好的方式来预览保存的图像,让图片大小与质量之间平衡,也可使用《 JPGmini、PNGmini、WEBmini —— 小巧精致的批量图片压缩优化工具+JS/CSS网页文件压缩》和《12款实用免费批量图片体积优化压缩工具!seo图片压缩优化(在线网页版+桌面工具》中介绍的图像编辑压缩工具!

例如我的每篇博文配图都用了“导出向导”功能,我尽量把图片都压缩在30K以内,在一定程度上加快了浏览速度,但也有部分图片失真,看不清楚。

13、把统计代码放到网站的最下面:

不要和页面内容同在一个Table或者div标签里。可以在页面代码的最下方直接放置统计代码,或者在最下方单独做一个Table或者div来放置计数器。这样,在计数器不能访问的时候,你的网站速度也不会受到丝毫影响。

写在最后:

最后介绍一下我的博客测试速度的网站http://loadimpact.com

在 文本框中输入要测试网站的网址www.wugongqi.cn,然后点击Start test按钮就开始对网站速度进行测试。稍等一段时间,可以统计出加载网站的一些详细载入数据。包括整体加载和站内图片以及JavaScript 、CSS等代码载入。可以在右侧列表选择不同文件来同时对比,最多三个对象的加载数据。而且在Loadimpact网站中还可以生成图表显示,方便我们进 行分析。通过生成的数据,就会知道自己网站速度的瓶颈在哪里,从而进一步来解决问题。

打赏

取消

请考虑对本站进行小额捐赠打赏:!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

各位请注意,目前发现 0 位寻荒者 在附近海域漂移!

报歉!评论已关闭.