ブラウザキャッシュとGzip圧縮
ブラウザキャッシュ
・キャッシュとは、一度アクセスしたサイトのデータ(画像やHTMLなど)をブラウザで一時的に保管しておく仕組み
Gzip圧縮
・サーバーにあるWebサイトのデータを圧縮してクライアント(ブラウザ)に送信する仕組み
【ホームページを早く表示する】事が出来る
設定する事で【何が変わるのか】実際に見てみましょう
設定変更前
※【.htaccessファイル】最下部の情報だけ記述
# BEGIN WordPress # `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は # 動的に生成され、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
設定変更
【外観】→【カスタマイズ】→【SEO設定】→【htaccess設定】
「ブラウザキャッシュを有効にする」チェックをON
「Gzip圧縮を有効にする」チェックをON
※公開ボタン押下後、設定を反映させるには
【設定】→【パーマリンク設定】
何も変更などせず最下部にある【変更を保存】ボタン押下
【設定】→【パーマリンク設定】
何も変更などせず最下部にある【変更を保存】ボタン押下
設定変更後
【.htaccessファイル】にコードが追加される
L17 – 89 までが「ブラウザキャッシュを有効にする」部分
各ファイルのキャッシュ有効期限を設定している
L97 – 126 までが「Gzip圧縮を有効にする」
各ファイルの圧縮設定
# BEGIN WordPress # `BEGIN WordPress` から `END WordPress` までのディレクティブ (行) は # 動的に生成され、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> # BEGIN ブラウザキャッシュ <IfModule mod_headers.c> <ifModule mod_expires.c> ExpiresActive On # キャッシュ初期化 ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # RSS ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rdf+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # データはキャッシュさせない ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/schema+json "access plus 0 seconds" ExpiresByType application/vnd.geo+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon ExpiresByType image/vnd.microsoft.icon "access plus 1 week" ExpiresByType image/x-icon "access plus 1 week" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType text/js "access plus 1 month" # マニフェスト ExpiresByType application/manifest+json "access plus 1 week" 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/bmp "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpg "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType image/webp "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" # Webフォント # Embedded OpenType (EOT) ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType font/eot "access plus 1 month" # OpenType ExpiresByType font/opentype "access plus 1 month" # TrueType ExpiresByType application/x-font-ttf "access plus 1 month" # Web Open Font Format (WOFF) 1.0 ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType font/woff "access plus 1 month" # Web Open Font Format (WOFF) 2.0 ExpiresByType application/font-woff2 "access plus 1 month" # Other ExpiresByType text/x-cross-domain-policy "access plus 1 week" </IfModule> </IfModule> # END ブラウザキャッシュ # BEGIN Gzip圧縮 <IfModule mod_deflate.c> SetOutputFilter DEFLATE # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外 BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\.0[678] no-gzip BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html # gifやjpg、pngなど圧縮済みのコンテンツは再圧縮しない SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary SetEnvIfNoCase Request_URI _\.utxt$ no-gzip #DeflateCompressionLevel 4 # 有効な圧縮 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/atom_xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf </IfModule> # END Gzip圧縮 # END WordPress
結果(ブラウザキャッシュを有効にする)
変更前


変更後


結果(Gzip圧縮を有効にする)
変更前


変更後


それぞれきちんと設定が反映されていました
結果(スピードテスト)
Googleツール【PageSpeed Insights】
変更前


変更後


早くなりましたね!