Yslow是一套雅虎的网页评分系统,详细的列出了各项影响网页载入速度的参数,这里不做多说。

我之前就一直参考Yslow做博客优化,经过长时间的学习也算是有所收获,小博的YslowV2分数达到了94分(偶耶!),如果换用博客类小网站评分标准更是可以达到满分。

下面我就总结几点大家力所能及优化方法,分享给各位。

下面贴一下小博全新刷新的载入图,下面文章中用得到:

我认为网页优化主要分为两类,个人称之为软优化与硬优化。软优化主要包括:服务器缓存类与浏览器本地缓存类,这些优化主要是参数设置上的改动。而硬优化包括:传输线路,CDN,HTTP请求数,带宽等基础项目。

咱们小博客主要能做的,也是我想介绍的主要是软优化类。

一、Make fewer HTTP requests(减少http请求数)

网页载入中,每一个文件都是一个http请求,包括html,js,css,图片等。而每一个文件的载入都需要DNS查询(可忽略),建立连接,发送请求(可忽略),等待回复,下载文件,总共5个步骤,文件依次载入,时间就得依次增加,文件越多,时间越长。

下面看看俺的主机商小张童鞋的博客载入图吧:

简直是一条长龙,橙色JS,蓝色HTML,绿色CSS,紫色IMG,虽然1秒多就响应,但最终载入时间为9秒。

而面对这样的网页,我们要做的是:

把CSS全都合到一个文件中去(复制粘贴就行)

把JS全都合到一个文件中去(复制粘贴就行)

主题中尽量少的使用图片

如果必须使用图片,把背景图片全都合到一个文件中去(这个用photoshop合成,调用背景图片时用background:url(all.png) no-repeat 几px 几px;来控制背景位置)

把框架网页能去掉的都去了,每一个框架网页等于新打开一个网页。

优化好之后,整个页面只有1个js,1个css,1个背景图片和若干文章图片页面载入速度起码提升2/3。

二、Add Expires headers(添加周期头)

啥叫周期头啊,其实就是给文件一个保质期。

没过期的直接从本地调用,过期了后就得换新的了。

这个做起来简单,直接在网站根目录的.htaccess文件末尾添加以下代码就行了(只有LINUX主机有.htaccess)

其中Axxxxxx是时间,单位秒。

<IfModule mod_expires.c> ExpiresActive On ExpiresDefault A3600 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType text/plain A604800 ExpiresByType application/x-shockwave-flash A2592000 ExpiresByType video/x-flv A2592000 ExpiresByType application/pdf A2592000 ExpiresByType text/html A600 ExpiresByType image/x-icon A2592000 ExpiresByType application/javascript A604800 ExpiresByType text/css A604800 </IfModule>

这样设置后,第二次访问就会直接调用本地缓存,仅仅HTML重新下载,速度飞快,如图:

三、Configure entity tags (ETags)(配置实体标签设置ETAG)

说实在的我也不知道ETAG是个什么东东,网上的解释说他相当于一个标签,来确认浏览器缓存里的元素是否和原来服务器上的一致,可是却没有说如何设置。终于找到了一篇如何设置的文章,可作者也是不太懂,作者就是万戈大侠了。

他的方法是,在.htaccess中加入这句话。

FileETag none

说实话我并没有明白为什么要设置成none,不过它起作用了,Yslow这项的评分到了A,肯定是有好处的,这就足够了。

四、优化外部调用顺序。(个人想法,也许有错)

这一点是最容易被忽略的。

据我观察,网页载入的时候所有元素不是同时一起载入的,但也不是one by one这么着载入的,它有一个少数连接并发下载的情况,观察文章头部小博的载入图,第1-3个图片就是并发的。所以调用顺序决定了载入顺序,载入顺序决定谁和谁并发。

我做过实验,如果JS文件放在<head></head>中,他会跟随HTML与CSS一同加载,然后等JS加载完成后才加载所有图片,如果JS太肥了的话,这样效率很低,JS要是卡住了,网页更是死活不出来。如图:

那么把JS放在body的footer中,情况就会改善很多,JS跟随大批图片一起载入,共用时间,如文章头部小博载入图。

而且最重要的是,html载入完毕就可以显示DOM元素了,不需要等待JS完毕再显示。

五、服务器缓存

老话题了,WP一般使用插件缓存,我使用的是WP-CACHE,它可以使平时需要1秒左右载入的HTML在几十毫秒内载入。

配合图片本地缓存,二次打开的页面基本是秒开。如图(这就是小博的平时载入速度了):

六、其他

其他就剩下一些零碎的优化了,这些影响比较小。

比如把主题中所有不经常更改内容的php语句直接改成文字,比如博客名神马的。

还有,CSS,JS压缩,小一点就快一点。

本地DNS的选择(在网卡属性里),第一次访问时,DNS-LOOK-UP(DNS查询)也是占了相当时间的,如果你的DNS的ping较高。

COOKIE-FREE 域名设置:意思就是每次建立连接的时候,客户端都要先发一份COOKIE到服务器去,而设置COOKIE-FREE后就可以省下这点时间了。个人觉得没多少时间,不发COOKIE后,用户评论信息还要自己写,体验不好,不建议设置。

就先写这么多,剩下的想到了再补。转载请注明出处。

我了个槽哦,发完文章后又测了一遍YSLOW,变100分了,上一回得100还是小学二年级的事儿呢。

作者:老柴

原文地址:http://laochai.net/49

【转】加快网站访问速度——Yslow极限优化的更多相关文章

  1. Apache 使用gzip、deflate 压缩页面加快网站访问速度

    Apache 使用gzip 压缩页面加快网站访问速度 介绍: 网页压缩来进一步提升网页的浏览速度,它完全不需要任何的成本,只不过是会让您的服务器CPU占用率稍微提升一两个百分点而已或者更少.   原理 ...

  2. [技术博客]使用CDN加快网站访问速度

    [技术博客]使用CDN加快网站访问速度 2s : most users are willing to wait 10s : the limit for keeping the user's atten ...

  3. 2-12-配置squid代理服务器加快网站访问速度

    本节所讲内容: squid服务器常见概念 squid服务器安装及相关配置文件 实战:配置squid正向代理服务器 实战:配置透明squid代理提升访问速度 实战:配置squid反向代理加速度内网web ...

  4. 使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度

    使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度 一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...

  5. 使用 Nginx 提升网站访问速度

    使用 Nginx 提升网站访问速度 http://www.ibm.com/developerworks/cn/web/wa-lo-nginx/ Nginx 简介 Nginx ("engine ...

  6. 巧用linux服务器的/dev/shm/,如果合理使用,可以避开磁盘IO不给力,提高网站访问速度。

    巧用linux服务器的/dev/shm/ 巧用linux服务器的/dev/shm/,如果合理使用,可以避开磁盘IO不给力,提高网站访问速度. 首先让我们认识一下,什么是tmpfs和/dev/shm/? ...

  7. 如何使用ping和tracert命令测试网站访问速度

    在我们平时访问的网站中,有一些网站访问速度非常快,比如百度搜索网站和一些门户网站,有些网站访问很慢,有些网站甚至无法访问.那么我们该如何判断这些网站的访问速度呢?下面我们就使用Windows的ping ...

  8. 提升Apache网站访问速度的优化方法

    Apache是世界使用排名第一的Web服务器软件.它可以运行在几乎所有广泛使用的计算机平台上,由于其跨平台和安全性被广泛使用,是最流行的Web服务器端软件之一. 在Apache服务器上怎样优化才能提高 ...

  9. Nginx——使用 Nginx 提升网站访问速度【转载+整理】

    原文地址 本文是写于 2008 年,文中提到 Nginx 不支持 Windows 操作系统,但是现在它已经支持了,此外还支持 FreeBSD,Solaris,MacOS X~ Nginx(" ...

随机推荐

  1. PMBOK学习笔记一

    项目管理就是将知识.技能.工具与技术应用于项目活动,以满足项目的要求.为了实现对这些知识的应用,需要对项目管理过程进行有效管理 为了取得项目成功,项目团队应该:. 选择适用的过程来实现项目目标:. 使 ...

  2. JavaScript Patterns 6.7 Borrowing Methods

    Scenario You want to use just the methods you like, without inheriting all the other methods that yo ...

  3. 简单阐述下Ajax以get方式请求的步骤 初学,不对的话,跟我说下,谢谢!

    首先, 在GET提交中"=,&"等字符与请求字符串的关键字相混淆.所以: 第一步,先对get提交过来的数据进行编码. 第二步,实例化ajax对象. 第三步,创建对服务器的连 ...

  4. Makefile内嵌函数

    subst字符串替换函数 $(subst <from>, <to>, <text>),把<text>中的<from>字符串替换成<to ...

  5. linux下怎么查看ssh的用户登录日志

    linux下登录日志在下面的目录里: cd /var/log 查看ssh用户的登录日志: less secure linux日志管理: 1. 日志简介 日志对于安全来说,非常重要,他记录了系统每天发生 ...

  6. linux 文件管理以及其相关指令

    Linux简介 严格的来讲,Linux 不算是一个操作系统,只是一个 Linux 系统中的内核, 即计算机软件与硬件通讯之间的平台:Linux的全称是GNU/Linux,这才算是一个真正意义上的Lin ...

  7. CURL使用方法详解

    php采集神器CURL使用方法详解 作者:佚名  更新时间:2016-10-21   对于做过数据采集的人来说,cURL一定不会陌生.虽然在PHP中有file_get_contents函数可以获取远程 ...

  8. 《Writing Idiomatic Python》前两部分的中文翻译

    汇总了一下这本小书前两部分的内容: 翻译<Writing Idiomatic Python>(一):if语句.for循环 翻译<Writing Idiomatic Python> ...

  9. 分页查询的两种方法(双top 双order 和 row_number() over ())

    --跳过10条取2条 也叫分页select top 2 * from studentwhere studentno not in (select top 2 studentno from studen ...

  10. [转]关于vs调试正确。但是发布到iis就出现无法访问后天局面

    最近使用extjs+ashx进行ajax请求过程操作的时候发现一个问题..当我把程序发布到iis的时候就出现一只不执行到success回调函数. 当弹出状态值一看尽然是500.我就纳闷了.又没有语法错 ...