「ブラウザのキャッシュを活用する」に対策してみた

以前の記事「ブログの表示スピードを調べる方法」で「PageSpeed Insights」を紹介したのですが、このサイトでチェックしてみると幾つか修正しなさい!という項目がいました。その内今回は「ブラウザのキャッシュを活用する」という項目に対策してみる事にしました。

キャッシュの仕組みやプラグインについては以前の記事でも書いてますのでまだ読んでいない場合は先に読んでおくといいかも知れません。
キャッシュを利用してWordPress高速化する仕組みとプラグイン

スポンサーリンク

ブラウザのキャッシュの設定は「.htaccess」の編集でする

プラグインを利用するという手もありますが、プラグインが無くてもできるという事でプラグイン無しで対応する事にしました。下記サイトが非常に参考になりました。

WordPressサイト用の.htaccess例 | dogmap.jp

上記サイトで紹介されてたコードのキャッシュの期間を一部7日(604800秒)に変更して使わせて頂きます。7日以上というのが「PageSpeed Insights」で指摘された対策だったため。

「.htaccess」の編集

ロリポップユーザーなのでロリポップでの解説になりますが、基本的な部分は一緒です。

ロリポップのユーザー専用ページから「Webツール」⇒「ロリポップFTP」と進みます。

子テーマ-1

それで自分のWordPressのフォルダを開きます。

ワードプレス構造-3

すると「.htaccess」というファイルがあるのでそれを開きます。

キャッシュ-5

「.htaccess」に次の部分を追加します。記述する場所はよく分からなかったのですが、結局「.htaccess」の先頭に追加してみました。

AddType image/x-icon .ico
 
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
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 application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>
 
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 216000 seconds"
</ifModule>
 
FileETag none
 
<FilesMatch "^(wp-config.php|wp-mail.php|install.php|.ht)">
order allow,deny
deny from all
</FilesMatch>

たったコレだけのことですが、改めて「PageSpeed Insights」で確認するとブラウザキャッシュの部分が大分改善されてスコアも上がってきました。

キャッシュ-4

それではまた別の高速化にも挑戦してみたいと思います。

「ブラウザのキャッシュを活用する」に対策してみた”に1件のコメントがあります。

※入院生活から復活しました!!またできるだけ返信しますのでよろしくお願いします(^^)

内容に問題なければ、下記の「コメントを送信する」ボタンを押してください。

  1. 乃風

    しげぞうさんへ

    いつもお世話になっております。

    ここの記事通りに行っていったら、ものの見事に表示スピードがアップされました。ちょっと驚きました。

    パソコン表示速度は、86から89へと上昇し、モバイルの方は、78から、なんと、84です。うれしかったです。ありがとうございました。