【PageSpeed】サイト表示の高速化。低速レポートを受けてから試行錯誤して90点以上をとれた話。（2020年6月）

Wordpress

ブログを始めて半年ほど経った2020年5月、それまで検索からのアクセスが順調に伸びていたのですが…

ある日いつものようにアナリティクスを見るとアクセスが激減。コンソールを見てみると、モバイルで低速エラーが出ていました。

色々調べてみると、何も対策をしなければ、記事が増えればサーバーの負担なども増えてサイトの表示速度はどんどん遅くなってしまうのが普通のようです。

それに、サイトを開設してから一定の期間が経過したので、その間に集計されたデータにより、元々低速レベルだったものが正式に低速と通告を受けた、みたいな感じだと理解しました。

 

というわけで、色んなサイトを参考にして試行錯誤した結果、2020年6月、PageSpeed Insightsでなんとか90点以上をとれました。

100点にすることもできたのですが、多少の副作用があったので80～90点台にて妥協しました。

あとサーバー側の問題もあると思うので、Wordpress内での改善にも限界があります。

今回は私がとった対策を紹介します。

 

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で画像を圧縮

「EWWW image Optimizer」というプラグインを使って画像の最適化を行います。

これについては紹介している人も多いので、詳しい説明は省略します。

続いて、画像をWordpressにアップする前に、サイズ・画素を加工する方法です。

無駄に高画質、無駄に大きいサイズになることを防ぎ、表示が遅くなることを防ぎます。

主に使っているのは、Squoosh、TinyPNGです。ブラウザにドラッグ＆ドロップするだけで使えるので、非常に便利です。

iPhoneのスクショや写真を使う時は、写真圧縮というアプリを使っています。Squooshと似ていて使いやすいです。

 

CloudflareでDNSの設定

DNSの設定にCloudflareを使っています。

設定方法などについては割愛します。

 

.htaccessでキャッシュの設定

.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で検証を繰り返していくのが確実かと思います。