如何通過 .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 。 您只能設置從您的站點加載的資源的到期值。