优化YSlow add expires headers项目提升博客访问速度

这两天一直在做WordPress百宝箱访问速度的优化,前期Gtmetrix得出的数值实在太难看。

目前已经解决了大量redirects chain的问题,具体的解决方案,我自己也说不清楚,主要是使用了WPJAM BASIC插件和在WP SUPER CACHE中进行了简单设置。在检测前有80-120的redirects,做了两个操作后,就显示为100分。

在Gtmetrix中有个项目是用yslow来做检测。其中的一个选项add expires headers这个规则我显示是0分,今天就要对这个点做一个优化。

什么是YSlow?

YSlow是Yahoo发布的一款基于优化访问,这个插件可以分析网站的页面,并告诉你为了提高网站性能,如何基于某些规则而进行优化。

这里着重介绍一下优化项中的 add expires headers 。网站评分因为这一项评分F而拉低。

一、使用 yslow

我们先从网站评分看起,一图胜千言:
优化YSlow add expires headers项目提升博客访问速度插图

由于 add expires headers 这一项,我的网站整体评分为F,所以,我必须从这里下手。

二、add expires headers

首先,add expires headers 到底是什么?

Expires headers tell the browser whether they should request a specific file from the server or whether they should grab it from the browser’s cache.

简单来说:就是向文档添加一个有效期,告诉浏览器这个文档的有效性和持久性。如果已有缓存,文档就可以从浏览器中的缓存(除已经过期)而不是从服务器读取。接着,客户端验证缓存中的副本,看看是否过期或者失效,以决定是否必须从服务器获得更新。

添加该项主要是可以加快网站的访问速度,对于一些不长更新的静态文件,都可以进行设置。如

  • images: jpg, gif, png
  • favicon/ico
  • javascript
  • css

三、如何操作

那我该如何设置?根据gtmetrix中记载:

We define our Expires Headers in the .htaccess file.

格式如下:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 month"
</IfModule>

但是这个没什么用。我们可以考虑在.htaccess中进行设置。

四、关于 .htaccess

.htaccess文件提供了针对目录改变配置的方法,即在一个特定的文档目录中放置一个包含一个或多个指令的文件, 以作用于此目录及其所有子目录。

.htaccess可以帮我们实现包括:文件夹密码保护、用户自动重定向、自定义错误页面、改变你的文件扩展名、封禁特定IP地址的用户、只允许特定IP地址的用户、禁止目录列表,以及使用其他文件作为index文件等一些功能。

Linux系统都是支持.htaccess的,但是有的主机商可能不允许你自定义自己的.htaccess文件。

.htaccess文件中的配置指令作用于.htaccess文件所在的目录及其所有子目录。但是需要特别注意的是,其上级目录也可能会有.htaccess文件,而指令是按查找顺序依次生效的,所以一个特定目录下的.htaccess文件中的指令可能会覆盖其上级目录中的.htaccess文件中的指令,即子目录中的指令会覆盖父目录或者主配置文件中的指令。

综上所述,.htaccess文件有以下几个特点

1.大部分服务器都支持;

2.将 .htaccess 放置在项目目录下;

3.下级 .htaccess 会覆盖上级 .htaccess;

五、添加以及配置 .htaccess

开始配置 .htaccess

进入test项目目录:

cd test

创建 .htaccess 文件:

echo '' >> .htaccess

打开 .htaccess 文件:

vim .htaccess

拷贝如下代码:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On 
# Default directive
ExpiresDefault "access plus 1 days"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 3 days"
ExpiresByType image/png "access plus 3 days"
ExpiresByType image/jpg "access plus 3 days"
ExpiresByType image/jpeg "access plus 3 days"
# CSS
ExpiresByType text/css "access plus 3 days"
# Javascript
ExpiresByType application/javascript "access plus 3 days”
FileETag none
</IfModule>

保存并退出,搞定~

如果你觉得还是不够用,来看看下 面这个超完整版:

友情提示:配置完,记得重启服务器哦~

FileETag None
<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault                                      "access plus 1 month"
    ExpiresByType text/css                              "access plus 1 year"
    ExpiresByType application/json                      "access plus 0 seconds"
    ExpiresByType application/xml                       "access plus 0 seconds"
    ExpiresByType text/xml                              "access plus 0 seconds"
    ExpiresByType image/x-icon                          "access plus 1 week"
    ExpiresByType text/x-component                      "access plus 1 month"
    ExpiresByType text/html                             "access plus 0 seconds"
    ExpiresByType application/javascript                "access plus 1 year"
    ExpiresByType application/x-web-app-manifest+json   "access plus 0 seconds"
    ExpiresByType text/cache-manifest                   "access plus 0 seconds"
    ExpiresByType audio/ogg                             "access plus 1 month"
    ExpiresByType image/gif                             "access plus 1 month"
    ExpiresByType image/jpeg                            "access plus 1 month"
    ExpiresByType image/png                             "access plus 1 month"
    ExpiresByType video/mp4                             "access plus 1 month"
    ExpiresByType video/ogg                             "access plus 1 month"
    ExpiresByType video/webm                            "access plus 1 month"
    ExpiresByType application/atom+xml                  "access plus 1 hour"
    ExpiresByType application/rss+xml                   "access plus 1 hour"
    ExpiresByType application/font-woff                 "access plus 1 month"
    ExpiresByType application/vnd.ms-fontobject         "access plus 1 month"
    ExpiresByType application/x-font-ttf                "access plus 1 month"
    ExpiresByType font/opentype                         "access plus 1 month"
    ExpiresByType image/svg+xml                         "access plus 1 month"
</IfModule>

未经允许不得转载:主机格调 » 优化YSlow add expires headers项目提升博客访问速度

赞 (0)

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址