以前の記事「ブログの表示スピードを調べる方法」で「PageSpeed Insights」を紹介したのですが、このサイトでチェックしてみると幾つか修正しなさい!という項目がいました。その内今回は「ブラウザのキャッシュを活用する」という項目に対策してみる事にしました。
キャッシュの仕組みやプラグインについては以前の記事でも書いてますのでまだ読んでいない場合は先に読んでおくといいかも知れません。
⇒キャッシュを利用してWordPress高速化する仕組みとプラグイン
ブラウザのキャッシュの設定は「.htaccess」の編集でする
プラグインを利用するという手もありますが、プラグインが無くてもできるという事でプラグイン無しで対応する事にしました。下記サイトが非常に参考になりました。
上記サイトで紹介されてたコードのキャッシュの期間を一部7日(604800秒)に変更して使わせて頂きます。7日以上というのが「PageSpeed Insights」で指摘された対策だったため。
「.htaccess」の編集
ロリポップユーザーなのでロリポップでの解説になりますが、基本的な部分は一緒です。
ロリポップのユーザー専用ページから「Webツール」⇒「ロリポップFTP」と進みます。
それで自分のWordPressのフォルダを開きます。
すると「.htaccess」というファイルがあるのでそれを開きます。
「.htaccess」に次の部分を追加します。記述する場所はよく分からなかったのですが、結局「.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 | 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」で確認するとブラウザキャッシュの部分が大分改善されてスコアも上がってきました。
それではまた別の高速化にも挑戦してみたいと思います。
しげぞうさんへ
いつもお世話になっております。
ここの記事通りに行っていったら、ものの見事に表示スピードがアップされました。ちょっと驚きました。
パソコン表示速度は、86から89へと上昇し、モバイルの方は、78から、なんと、84です。うれしかったです。ありがとうございました。