如何通过 .htaccess 利用浏览器缓存加速 WordPress

已发表: 2017-08-04

通过 .htaccess 利用浏览器缓存加速 WordPress

利用浏览器缓存使您的网页更快。 如果您可以利用浏览器缓存，则可以大大提高网站速度。 随着 Google 开始将网站速度视为 SEO 参数，网站管理员可以利用浏览器缓存来提高网站速度并获得更好的搜索引擎排名。

这是一个完整的.htaccess文件，我们在 Crunchify 根文件夹中拥有它。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
######### CRUNCHIFY SETTING - START  ##########
Options All - Indexes
 
# Disable ETags
< IfModule mod_headers . c >
Header unset ETag
     Header set Connection keep - alive
< / IfModule >
FileETag None
 
############## MaxCDN Fix #############
< IfModule mod_headers . c >
   < FilesMatch "\.(ttf|ttc|otf|eot|woff|woff2|font.css|css|js)$" >
     Header set Access - Control - Allow - Origin "*"
   < / FilesMatch >
< / IfModule >
 
########### REDIRECT TRAFFIC TO HTTPS ############
# RewriteEngine On
# RewriteCond %{HTTPS} off
# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]
 
############ SECURITY ###########
< FilesMatch "\.(md|exe|sh|bak|inc|pot|po|mo|log|sql)$" >
Order allow , deny
Deny from all
< / FilesMatch >
 
< Files robots . txt >
Allow from all
< / Files >
 
############## CACHING-GZIP ############
< IfModule mod_expires . c >
ExpiresActive On
ExpiresDefault A2592000
 
< FilesMatch "\.(txt|xml|js)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(css)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$" >
ExpiresDefault A2592000
< / FilesMatch >
< / IfModule >
 
< IfModule mod_headers . c >
   < FilesMatch "\.(txt|xml|js)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(css)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
< / IfModule >
 
< IfModule mod_deflate . c >
     < IfModule mod_setenvif . c >
         < IfModule mod_headers . c >
             SetEnvIfNoCase ^ ( Accept - EncodXng | X - cept - Encoding | X { 15 } | ~ { 15 } | - { 15 } ) $ ^ ( ( gzip | deflate ) \ s* , ? \ s* ) + | [ X ~ - ] { 4 , 13 } $ HAVE_Accept - Encoding
             RequestHeader append Accept - Encoding "gzip,deflate" env = HAVE_Accept - Encoding
         < / IfModule >
     < / IfModule >
     < IfModule mod_filter . c >
         AddOutputFilterByType DEFLATE "application/atom+xml" \
                                       "application/javascript" \
                                       "application/json" \
                                       "application/ld+json" \
                                       "application/manifest+json" \
                                       "application/rdf+xml" \
                                       "application/rss+xml" \
                                       "application/schema+json" \
                                       "application/vnd.geo+json" \
                                       "application/vnd.ms-fontobject" \
                                       "application/x-font-ttf" \
                                       "application/x-javascript" \
                                       "application/x-web-app-manifest+json" \
                                       "application/xhtml+xml" \
                                       "application/xml" \
                                       "font/eot" \
                                       "font/opentype" \
                                       "image/bmp" \
                                       "image/svg+xml" \
                                       "image/vnd.microsoft.icon" \
                                       "image/x-icon" \
                                       "text/cache-manifest" \
                                       "text/css" \
                                       "text/html" \
                                       "text/javascript" \
                                       "text/plain" \
                                       "text/vcard" \
                                       "text/vnd.rim.location.xloc" \
                                       "text/vtt" \
                                       "text/x-component" \
                                       "text/x-cross-domain-policy" \
                                       "text/xml"
 
     < / IfModule >
     < IfModule mod_mime . c >
         AddEncoding gzip               svgz
     < / IfModule >
 
< / IfModule >
######### CRUNCHIFY SETTING END ############
 
# BEGIN WordPress
< IfModule mod_rewrite . c >
RewriteEngine On
RewriteBase /
RewriteRule ^ index \ . php $ - [ L ]
RewriteCond % { REQUEST_FILENAME } ! - f
RewriteCond % { REQUEST_FILENAME } ! - d
RewriteRule . / index . php [ L ]
< / IfModule >
 
# END WordPress

注意：如果您不在 HTTPS 上，请删除重定向到 HTTPS 块 :)。 不过我已经注释掉了。 如果您已经在站点上启用了 HTTPS，并且您仍然允许用户通过 HTTP 访问站点，那么您很好。

让我们了解 .htaccess 文件的每个部分：

第 1 步摆脱 ETag

首先，我们需要disable ETag header ，因为我们将使用 Expires 持续时间。 ETag技术被称为缓慢且有问题 - 甚至其他排名靠前的网站也抱怨它。

添加到.htaccess ：（位于博客的根位置）

.htaccess
1
2
3
4
5
6
# Disable ETags
< IfModule mod_headers . c >
Header unset ETag
         Header set Connection keep - alive
< / IfModule >
FileETag None

我们还保持连接keep-alive 。 它被称为persistent connection 。 如果必须为每个请求或文件打开一个新连接，则可能需要更长的时间。

其他必读：

  • 加快 WordPress 和提高性能的 5 个有用技巧
  • 您可能错过的 9 个基本 WordPress 资源

步骤 2 启用浏览器缓存

如果您在静态资源的 HTTP 标头中设置到期日期或最长期限，现代浏览器将从本地磁盘而不是通过网络加载以前下载的静态资源，如图像、css、javascript、pdf、swf 等。

因此，如果您将 Web 服务器配置为设置缓存标头并将它们应用于所有可缓存的静态资源，您的站点将看起来加载得更快。 在下面添加到.htaccess

.htaccess file
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
< IfModule mod_expires . c >
ExpiresActive On
ExpiresDefault A2592000
 
< FilesMatch "\.(txt|xml|js)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(css)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$" >
ExpiresDefault A2592000
< / FilesMatch >
 
< FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$" >
ExpiresDefault A2592000
< / FilesMatch >
< / IfModule >
 
< IfModule mod_headers . c >
   < FilesMatch "\.(txt|xml|js)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(css)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
 
   < FilesMatch "\.(jpg|jpeg|png|gif|swf|webp)$" >
   Header set Cache - Control "max-age=2592000"
   < / FilesMatch >
< / IfModule >

这样做是将远期过期标头（如果有问题，请确保将mod_expires加载到您的 apache 配置中）到您的静态内容（图像、js、css 等）。

这里有两件事：

  • ExpiresDefault A2592000 = 未来 1 个月
  • 缓存控制“max-age=2592000”= 1 个月

如果您愿意，也可以将值设置为 1 Year = 31536000

Step-3 添加 gzip 和 deflate 压缩头

压缩东西总是会使它们变得更小并更快地加载，因此必须对组件实施某种形式的压缩。

如果您的服务器没有安装mod_deflate或mod_gzip作为 Apache 的一部分，此优化步骤可能对您不起作用。

基本上我们正在压缩大部分资源，因此这些负载的带宽更少且速度非常快。

mod_gzip setting in .htaccess
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
< IfModule mod_deflate . c >
     < IfModule mod_setenvif . c >
         < IfModule mod_headers . c >
             SetEnvIfNoCase ^ ( Accept - EncodXng | X - cept - Encoding | X { 15 } | ~ { 15 } | - { 15 } ) $ ^ ( ( gzip | deflate ) \ s* , ? \ s* ) + | [ X ~ - ] { 4 , 13 } $ HAVE_Accept - Encoding
             RequestHeader append Accept - Encoding "gzip,deflate" env = HAVE_Accept - Encoding
         < / IfModule >
     < / IfModule >
     < IfModule mod_filter . c >
         AddOutputFilterByType DEFLATE "application/atom+xml" \
                                       "application/javascript" \
                                       "application/json" \
                                       "application/ld+json" \
                                       "application/manifest+json" \
                                       "application/rdf+xml" \
                                       "application/rss+xml" \
                                       "application/schema+json" \
                                       "application/vnd.geo+json" \
                                       "application/vnd.ms-fontobject" \
                                       "application/x-font-ttf" \
                                       "application/x-javascript" \
                                       "application/x-web-app-manifest+json" \
                                       "application/xhtml+xml" \
                                       "application/xml" \
                                       "font/eot" \
                                       "font/opentype" \
                                       "image/bmp" \
                                       "image/svg+xml" \
                                       "image/vnd.microsoft.icon" \
                                       "image/x-icon" \
                                       "text/cache-manifest" \
                                       "text/css" \
                                       "text/html" \
                                       "text/javascript" \
                                       "text/plain" \
                                       "text/vcard" \
                                       "text/vnd.rim.location.xloc" \
                                       "text/vtt" \
                                       "text/x-component" \
                                       "text/x-cross-domain-policy" \
                                       "text/xml"
 
     < / IfModule >
     < IfModule mod_mime . c >
         AddEncoding gzip               svgz
     < / IfModule >
 
< / IfModule >

步骤 4 验证您的设置是否正常工作

结帐下面的屏幕截图。 您应该看到在文件的响应标头中设置的所有参数。

WordPress 资源的最大期限和缓存过期标头

检查 WordPress 加速过程的 htaccess 规则

开放式问题：我可以更改某些资源（如 Google Adsense 脚本或 Google Analytics 脚本）的到期日期吗？

  • https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  • https://www.google-analytics.com/analytics.js

Answer is NO 。 您只能设置从您的站点加载的资源的到期值。