WordPressの表示速度UP！簡単な2つの対策でPageSpeed Insightsのスコアを改善する方法

前回に引き続きブログの表示速度の改善を図っていきたいと思います。
前回、『PageSpeed Insights』で提示された改善案は以下のとおりでした。今回はこのそれぞれについて詳しく見て行きたいと思います。

• 圧縮を有効にする
• ブラウザのキャッシュを活用する
• スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
• サーバーの応答時間を短縮する

※手をつけやすそうな順に順番を並び替えました。

圧縮を有効にする

この項目の詳細説明を読むと次のようなことが書いてあります。

圧縮を有効にする
gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。
次のリソースの圧縮を有効にすると、転送サイズを 112.9 KB（66%）削減できます。
https://k99-tech.com/
k99-tech.com…-includes/js/jquery/jquery.js?ver=1.12.4 を圧縮すると 61.9 KB（65%）削減できます。
https://k99-tech.com/
k99-tech.com…/js/all_in_header_fixed.min.js?ver=3.1.0 を圧縮すると 29 KB（73%）削減できます。
https://k99-tech.com/
k99-tech.com…ludes/js/wp-emoji-release.min.js?ver=4.8 を圧縮すると 7.4 KB（63%）削減できます。
https://k99-tech.com/
k99-tech.com…s/jquery/jquery-migrate.min.js?ver=1.4.1 を圧縮すると 5.9 KB（60%）削減できます。
https://k99-tech.com/
k99-tech.com…e-of-contents-plus/front.min.js?ver=1509 を圧縮すると 3.7 KB（61%）削減できます。
https://k99-tech.com/
k99-tech.com…e-expansion-unit/js/all.min.js?ver=5.3.8 を圧縮すると 2.3 KB（60%）削減できます。
https://k99-tech.com/
k99-tech.com…avigation/js/navigation.min.js?ver=2.1.1 を圧縮すると 2.2 KB（76%）削減できます。
https://k99-tech.com/
k99-tech.com…g/wp-includes/js/wp-embed.min.js?ver=4.8 を圧縮すると 647 バイト（47%）削減できます。

詳細説明を見るとページ上の圧縮可能なリソースが圧縮されていない場合にこの警告が出るようです。ということで圧縮する設定をしていきたいと思います。

改善方法

圧縮の設定は、契約しているレンタルサーバーなどの公開(アップロード)フォルダにある、「.htaccess」というファイルを編集する必要があります。このファイルの編集をミスると最悪ブログが表示されなくなる可能性もあるので必ずバックアップを取得し、自己責任で行ってください。

.htaccessに以下の記述を追加します。

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

【参考】
WordPressを高速化！格安サーバでもスコアアップできる5つの大改善策【詳細版】｜時機到来

「.htaccess」の編集方法は別途お調べください。

改善結果

上記対策を施したところ、PageSpeed Insightsのスコアが以下のとおりでした。

対策前後を比較すると以下の通り改善しています。

ブラウザのキャッシュを活用する

まずは、PageSpeed Insightsの解説をよみます。

ブラウザのキャッシュを活用する
静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザがネットワークからではなくローカル ディスクから以前にダウンロードしたリソースを読み込むようになります。
次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください:
https://k99-tech.com/
k99-tech.com…content/uploads/2017/03/redmine_logo.png（有効期限が指定されていません）
https://k99-tech.com/
k99-tech.com…5/wordpress-logo-stacked-rgb-150x150.png（有効期限が指定されていません）
https://k99-tech.com/
k99-tech.com…ent/uploads/2017/06/20170611-150x150.jpg（有効期限が指定されていません）
http://connect.facebook.net/ja_JP/sdk.js
connect.facebook.net (20 分)
http://platform.twitter.com/widgets.js
platform.twitter.com (30 分)
http://www.google-analytics.com/analytics.js
www.google-analytics.com (2 時間)

ブラウザのキャッシュを使うようにサーバー側で設定してあげれば、表示速度が改善するということのようです。

改善方法

こちらも圧縮の有効化と同様に.htaccessを更新する必要があります。前回同様にバックアップを取り自己責任でおねがいします。

.htaccessに以下の記述を追加します。

ExpiresActive On
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"

【参考】
WordPressを高速化！格安サーバでもスコアアップできる5つの大改善策【詳細版】｜時機到来

改善結果

対策後のPageSpeed Insightsのスコアを見てみます。

※比較のため、圧縮の有効化を一度解除しています。

対策前後のスコアを比較してみます。

圧縮の有効化より幅が狭いですが、コチラもスコアが上昇しました。

ここまでのまとめ

長くなってきたのでここらで一旦まとめたいと思います。今回実施した対策は以下の2点です。
* 圧縮を有効にする
* ブラウザのキャッシュを活用する

これらの対策を2つとも適用した結果、PageSpeed Insightsのスコアは以下の様になりました。

対策前後のスコアを比較するとこのようになります。

大分スコアが改善されました。

残す所はサーバーの応答時間とJavascriptですが、これらはハードルが高そうだなぁ・・・。