ブログを始めて半年ほど経った2020年5月、それまで検索からのアクセスが順調に伸びていたのですが…
ある日いつものようにアナリティクスを見るとアクセスが激減。
コンソールを見てみると、モバイルで低速エラーが出ていました。
色々調べてみると、何も対策をしなければ、記事が増えればサーバーの負担なども増えてサイトの表示速度はどんどん遅くなってしまうのが普通のようです。
それに、サイトを開設してから一定の期間が経過したので、その間に集計されたデータにより、元々低速レベルだったものが正式に低速と通告を受けた、みたいな感じだと理解しました。
というわけで、色んなサイトを参考にして試行錯誤した結果、2020年6月、PageSpeed Insightsでなんとか90点以上をとれました。
100点にすることもできたのですが、多少の副作用があったので90点台にて妥協しました。
今回は私がとった対策を紹介します。
余談ですが、「サイト高速化」「低速サイト改善」など、色々検索しましたが、サイトには山ほど情報が溢れていますよね。
中には数年前のもので参考にできない記事もあれば、試しても全然効果が出ないものも…
サーバーやWordpressテーマなど状況は人それぞれなので、一概に言えるものではないですが、まず情報収集段階では次のことをやってみてください。
「サイト高速化」などで検索して出てきた記事のトップページにいき、URLをコピー。そしてPageSpeed Insightsでそのサイトの点数をチェックしてみてください。
実際に試してみると分かりますが、サイトの高速化について紹介しているサイト自身の成績が赤点、という場合が大多数です。
当然そのようなサイトの記事には説得力はありませんので、スルーしましょう。そして高得点を出している人の記事を参考にしましょう。
では前置きは終わりにして本題に入ります。
CSS、JSの最適化
CSSとJAVASCRIPTの最適化にも様々なプラグインがあり、またプラグイン以外にも直接phpを修正する方法もあるようですが、私は「WP Performance」というプラグインを使用しました。
このプラグインを勧めている人は見たことがないのですが、色々探すうちに行き着いて、実際に使ってみたら効果がありました。
一言で非同期読込とかインライン化とか言っても、正しく設定しないと点数は改善されないうえに、表示がくずれたりします。
実際の設定は以下の通りです。
まずはCSS
続いてJS
analyticsやadsenseを使う場合は、Excludeに入力してください。
HTML
MEDIA
CDN
画像の読込遅延は効果がないという人もいるようですが、実際にチェック前後で速度を測ってみれば必要性が判断できるかと思います。
ちなみに、Lazy loadというプラグインをお勧めする人が多いですが、このWP Performanceでも設定できますし、十分です。Lazy loadも試しましたが、画像が表示されない不具合が起きたのでやめました。
CDNはCloudflareと連携しています。
画像を圧縮する
「EWWW image Optimizer」というプラグインを使って画像の最適化を行います。
これについては紹介している人も多いので、詳しい説明は省略します。
続いて、画像をWordpressにアップする前に、サイズ・画素を加工する方法です。
無駄に高画質、無駄に大きいサイズになることを防ぎ、表示が遅くなることを防ぎます。
主に使っているのは、Squoosh、TinyPNGです。ブラウザにドラッグ＆ドロップするだけで使えるので、非常に便利です。
iPhoneのスクショや写真を使う時は、写真圧縮というアプリを使っています。Squooshと似ていて使いやすいです。
DNSの設定
DNSの設定にCloudflareを使っています。
設定方法などについては割愛します。
キャッシュの設定
.htaccessに以下を記載しました。
# キャッシュを有効にする
Header set Cache-Control “max-age=2628000, public”
# キャッシュ設定
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType text/html “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType text/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 1 month”
</IfModule>
# ファイル圧縮設定
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
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
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
サーバーの設定
エックスサーバーを使っていますが、設定は以下の通りにしています。
XアクセラレータVer.2
サーバーキャッシュON
ブラウザキャッシュON
PHPバージョン「PHP7.3.16」
まとめ
低速レポート（pagespeedで40点ぐらい）から90点以上まで改善した方法は以下の通りです。
WP PerformanceでCSS、JS等を最適化
画像アップロード前の圧縮
画像アップロード後の最適化
CloudflareでDNSの設定
キャッシュの設定
時間はかかりますが、1つ変更するたびにPageSpeed Insightsで検証を繰り返していくのが確実かと思います。
