提高网站访问速度--Yslow优化

时间 2019-11-13

标签提高网站访问速度 yslow 优化栏目网站开发繁體版

原文原文链接

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

下面我就总结几点你们力所能及优化方法，分享给各位。php

下面贴一下小博全新刷新的载入图，下面文章中用获得：css

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

我们小博客主要能作的，也是我想介绍的主要是软优化类。java

1、Make fewer HTTP requests（减小http请求数）浏览器

网页载入中，每个文件都是一个http请求，包括html，js，css，图片等。而每个文件的载入都须要DNS查询（可忽略），创建链接，发送请求（可忽略），等待回复，下载文件，总共5个步骤，文件依次载入，时间就得依次增长，文件越多，时间越长。缓存

下面看看俺的主机商小张童鞋的博客载入图吧：服务器

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

而面对这样的网页，咱们要作的是：app

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

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

主题中尽可能少的使用图片

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

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

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

2、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从新下载，速度飞快，如图：

3、Configure entity tags （ETags）（配置实体标签设置ETAG）

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

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

FileETag none

说实话我并无明白为何要设置成none，不过它起做用了，Yslow这项的评分到了A，确定是有好处的，这就足够了。

4、优化外部调用顺序。（我的想法，也许有错）

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

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

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

那么把JS放在body的footer中，状况就会改善不少，JS跟随大批图片一块儿载入，共用时间，如文章头部小博载入图。

并且最重要的是，html载入完毕就能够显示DOM元素了，不须要等待JS完毕再显示。

5、服务器缓存

老话题了，WP通常使用插件缓存，我使用的是WP-CACHE，它可使平时须要1秒左右载入的HTML在几十毫秒内载入。

配合图片本地缓存，二次打开的页面基本是秒开。如图（这就是小博的平时载入速度了）：

6、其余

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

好比把主题中全部不常常更改内容的php语句直接改为文字，好比博客名神马的。

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

本地DNS的选择（在网卡属性里），第一次访问时，DNS-LOOK-UP（DNS查询）也是占了至关时间的，若是你的DNS的ping较高。

COOKIE-FREE 域名设置：意思就是每次创建链接的时候，客户端都要先发一份COOKIE到服务器去，而设置COOKIE-FREE后就能够省下这点时间了。我的以为没多少时间，不发COOKIE后，用户评论信息还要本身写，体验很差，不建议设置。