我们知道用户都喜Ƣ浏览速度快的|站Q不喜欢p太多的时间等待网늚打开Q等待的旉q长Q会(x)让用户失去耐心Q甚至烦w时?x)直接关闭网,q样׃(x)失去一些潜在的客户了?/P>

其次Q从SEO的角度来_(d)关键字的排名与网늚打开速度也有关系QGoogle的Web搜烦团队曑֜官方博客上宣布,把|站的速度作ؓ(f)PRQPageRankQ算法的一个因子,在所有因素都相等的情况下Q速度快的|站排在速度慢的|站前面。同时指出很多网站都没有利用最佳的面优化技术,面加蝲速度都存在很大缺陗那么,我们该如何补救ƈ提高|站面的加载速度呢?

|站打开速度

1、合qJs文g和CSS

JS代码和CSS样式分别合ƈC个共享的文gQ这样不仅能化代码,而且在执行JS文g的时候,如果JS文g比较多,需要进行多ơ“Get”请求,廉加蝲速度Q将JS文g合ƈ在一起后Q自然就减少了Gethơ数Q提高了加蝲速度?/P>

用户打开用css设计的网,css一般被下蝲用户本地计算机,不像html元素表现标签Q每ơ网站的|页都要调用一ơ,使用cssQ只需要一ơ就好了Q另外,css在某些地方可以替代图片,q就是ؓ(f)什么现在提倡div+css的原因!

2、Sprites囄技?/STRONG>

Spriting是一U网图片应用处理方式,它是一个页面涉?qing)到的所有零星图片都包含C张大图中去,然后利用CSS技术展现出来。这样一来,当访问该面Ӟ载入的图片就不会(x)像以前那样一q一q地慢慢昄出来了,可以减少了整个网늚囄大小Qƈ且利用CSSSprites能很好地减少|页的httphQ从而大大的提高面的性能?/P>

CSSSprites在国内很多h叫css_Q很早就有了Q在很多大型|站都有用到Q特别是一些所有页面都存在的图标用得比较多Q很好的提升加蝲速度?/P>

3、压~文本和囄

压羃技术如gzip可以有效减少面加蝲的时间。包括HTMLQXMLQJSON(JavaScript对象W号)QJavaScript和CSS{,压羃率都可以在大?0%左右?/P>

一般文本压~用得比较多Q通常都是直接在空间开启就行,而图片的压羃?yu)比较随意,很多都是直接上传Q其实还有很大的压羃I间?/P>

4、gq显C可见区域外的内?/STRONG>

Z保用户可以更快地看见可见区域的|页可以延迟加蝲或展现可见区域外的内容,Z避免面变ŞQ可以用占位符标签制定正确的高度和宽度?/P>

比如QWP的jQueryImage LazyLoad插g可以在用户停留在第一屏的时候,不加载Q何第一屏以下的囄信息Q只有当用户把鼠标往下滚动的时候,q些囄才开始加载。这样很明显提升可见区域的加载速度Q提高用户体验?/P>

5、确保功能图片优先加?/STRONG>

|站主要考虑可用性的重要性,一个功能按钮要提前加蝲出来Q用戯入下载页Q一个只需?s旉的下载花?s在等待、寻找下载按钮图片,谁能忍受Q?/P>q有个问题需要注意的是:(x)一些hl常忘记写图片的长和宽了Q这些标记是告诉览器打开囄之前的尺寸,如果能提前设|好囄的height和widthQ浏览器加蝲|页时就?x)保留一块区域,加快整个|页昄速度?/SPAN>

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

其实q个和上面一条是差不多的Q都是从用户体验速度着手,跌了网늚整体加蝲速度。速度没变Q只是让一些行为按钮提前,Call-to-Action按钮一般习(fn)惯设计在面底部Q这L(fng)?fn)惯对于用户来说q不L好的Q购买用户需要等到最下面加蝲出来才能点击下一步操作?/P>

可以调整CTA按钮的位|或使用滑动的图片按钮,很多大型购物|站的加入购物R是q种cd?/P>

7、图片格式优?/STRONG>

不恰当的囑փ格式是一U极为常见的减慢加蝲速度的罪祸首。正的囄格式可以让图片羃?yu)数倍,如果保存为最x式,可以节省大量带宽Q减处理时间时_(d)大大加快面加蝲速度Q这是一U很常见的做法?/P>

8、用Progressive JPEGs

Progressive JPEGs囄是JPEG格式的一个特D变U,名ؓ(f)“高UJPEG”。在创徏高JPEG文gӞ数据是这样安排的Q在装入囑փӞ开始只昄一个模p的囑փQ随着数据的装入,囑փ逐步变得清晰Q它相当于交l的GIF格式的图片?/P>

高JPEG主要是考虑C用调制解调器的慢速网l而设计的Q持l网l的使用者通常不会(x)体会(x)到它和正常JPEG格式囄的区别。对于网速比较慢的用Pq无疑有很好的体验?/P>

9、精代码

q个可以说是最直接的一个方法,也是用得比较多的Q对|页代码q行瘦nQ删除不必要的沉冗代码,比如不必要的I格、换行符、注释等Q包括JS代码中的无用代码也需要清除?/P>

在同{网l环境下Q页面越自然下载时间越快,所以在合理范围内减页面大是可以优化下蝲速度的。而页面大主要是由HTML的代码量来决定的Q当然也可能包括一些css或者js的代码,不过Mq是HTML代码Q,要想减小面的大,得Ҏ(gu)W3C的标准来优化HTML代码l构Q去除一些垃圾无意义的代码?/P>

其中对于注释代码的清除可能有些h存在误区Q甚x的在里面堆砌关键词?/P>

10、gq加载和执行非必要脚?/STRONG>

|页中有很多脚本是在面完全加蝲完前都不需要执行的Q可以gq加载和执行非必要脚本。这些脚本可以在onload事g之后执行Q避免对|页上重要内容的呈现造成影响。这些脚本可能是你自q늚甲苯Q往往更多的是一些第三方脚本Q这L(fng)有很多,比如Q评论、广告、智能推荐、百度云图、分享和点击ơ数l计{等Q这些完全可以等M内容加蝲完后再执行?/P>

11、用AJAX

对于|页的打开Q其实是很复杂的q程。从|页的申h开Q到web服务器的响应Q编译等动作Q然后发回给览器,才显C我们面前的文字和图片,多媒体文件等。所以我要尽量减响应次敎ͼ现在ajax在这斚wp用的不错。当Ӟ一个静态页面就例外了,静态页面多注意囄大小和网设计上p了?/P>

AJAX即“Asynchronous Javascript +XML“,是指一U创Z互式|页应用的网开发技术。通过在后C服务器进行少量数据交换,AJAX可以使网实现异步更新?/P>

q意味着可以在不重新加蝲整个|页的情况下Q对|页的某部分q行更新。传l的|页(不用AJAX)如果需要更新内容,必须重蝲整个|页面?/P>

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

自动化的面性能优化也就是借助工具了,|站提速工h很多Q相信大家在|上也看C很多Q具体的效果也很难断定,所以这里也׃多说了?/P>

北京|站点评Q?/STRONG>

重视|站的用户体验可以说是互联网发展由技术ؓ(f)中心C用户Z心的一U{变,L的搜索引擎都网站的用户体验作ؓ(f)评h(hun)|站的重要标准,毕竟搜烦引擎蜘蛛也只是网站的一个普通用P要想在搜索引擎获得好的评P׃得不重视用户体验的优化,而网站的加蝲速度则是用户体验的首要条件?/P>