.htaccessを介してブラウザキャッシングを活用してWordPressを高速化する方法

公開: 2017-08-04

.htaccessを介したブラウザキャッシングを活用したWordPressの高速化

ブラウザのキャッシュを活用して、Webページを高速化します。 ブラウザのキャッシュを活用できれば、ウェブサイトの速度を大幅に上げることができます。 Googleがサイトの速度をSEOパラメータとして検討し始めると、ウェブマスターはブラウザのキャッシュを活用してサイトの速度を改善し、検索エンジンのランキングを向上させることができます。

これは、Crunchifyルートフォルダにある完全な.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
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ファイルの各セクションを理解しましょう。

ステップ-1ETagを取り除く

まず、Expires期間を使用するため、 disable ETag headerにする必要があります。 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 >

これは、静的コンテンツ（images、js、cssなど）に遠い将来のexpiresヘッダー（問題がある場合はmod_expiresがapache構成にロードされていることを確認してください）を追加することです。

ここで2つのこと：

  • ExpiresDefault A2592000 =将来1か月
  • キャッシュ制御「max-age = 2592000」= 1か月

必要に応じて、値を1 Year = 31536000に設定することもできます

ステップ-3gzipを追加し、圧縮ヘッダーをデフレートします

物事を圧縮すると、常にそれらが小さくなり、読み込みが速くなるため、コンポーネントに何らかの形式の圧縮を実装する必要があります。

サーバーにApacheの一部としてmod_deflateまたはmod_gzipがインストールされていない場合、この最適化手順は機能しない可能性があります。

基本的に、ほとんどのリソースを圧縮しているため、これらのリソースはより少ない帯域幅で非常に高速にロードされます。

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ルールをチェックアウト

未解決の質問：GoogleAdsenseスクリプトやGoogleAnalyticsスクリプトなどの一部のリソースの有効期限を変更できますか？

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

Answer is NOです。 サイトから読み込んでいるリソースの有効期限値のみを設定できます。