ブログを運営する中で忘れがちでありながら重要な項目がサイトの表示速度です。ブログ作成の素人である私がどこまで速度を上昇させられるのか試してみました。
写真1. 高速で走るイメージ(最高速度320km/hで走るTGVの写真です)
サイト表示速度の重要性と基準
サイトを表示する速度は重要です。仮に良い内容のページを公開していても、表示されなければアクセスされないためです。そこで、弊サイトでもサイト表示速度をお手軽に改善してみることにしました。今回使用するツールはPageSpeed Insightsです。このツールでは100点満点でサイトの表示速度を診断してくれます。0点～49点がダメ、50点～89点が普通、90点以上が良好というように診断されます。
弊サイトの表示速度の現状把握
何らかの施策をする際に、施策前の状態を把握することが重要です。そこで、まずは弊サイトの表示速度を診断しました。PCこそは84点でそれなりであるものの、モバイルは17点とお話し以前の点数です。
図1. 改善前PCでの表示速度
図2. 改善前モバイルでの表示速度
弊サイトではモバイルもPCも同じフォーマットを使用しています。また、点数の低いほうの対策を実施するのがスジです。このことから、以下の検証では、モバイルでの表示速度を評価指標として活用することにします。
この診断ツールは単にケチをつけるだけではなく、改善点も示してくれます。改善点を見てみましょう。
図3. モバイル表示に関する改善項目
これが簡単にできれば苦労しませんよ…。
1つずつ改善する
では、1つずる改善してみましょう。
改善策1. 画像の遅延読み込み
何やら難しい単語が並んでいますが、簡単にできそうな内容に、画像の遅延読み込みがあります。私はWordPressというシステムを使っていますが、テーマ(機能面も含めたデザインの枠組みのこと)としてsimplicity2を採用しています。Simplicity2には、画像の遅延読み込みという設定があることを思い出しました。
さっそく、変更してみましょう。変更して効果がなければ元に戻すだけです。
図4. 画像の遅延読み込み設定画面
このようにカスタマイズ→画像からこのようにチェックすれば設定完了です。
では、表示速度はどうでしょうか。再び診断です。
図5. モバイルでの表示速度
モバイルでの表示速度です(図5)。17点から20点と3点アップしました。赤点であることには変わりありませんが、ワンクリックで3点上昇なので、悪いことではありません。余談ですが、PCは84点から85点に上昇しています。
図6. 改善1実施後のモバイル改善項目
モバイルでの改善項目です(図6)。画像の遅延読み込みが改善項目から消えています。
レンタリングを妨げるリソースの除外
レンタリングを妨げるリソースの除外が3.8秒ものの効果があります。いったい何のことでしょうか。もう少し詳しく検討してみます。
図7. レンタリングを妨げるリソースの除外の詳細
さあ、何を言っているのでしょうか。私の脳みそでは1万年たってもわかりません。ということで、この文言をそのままコピペしてインターネットで検索してみましょう！すると、レンタリングを妨げるリソースの除外関連はAutoptimizeというプラグインで解決できることがわかりました。WordPressの管理項目からAutoptimizeをダウンロードして、有効化をクリックします。
図8. Autoptimizeの設定画面1：Javascript関連の設定
図9. Autoptimizeの設定画面2：CSS関連の設定
図10. Autoptimizeの設定画面3：キャッシュとその他の設定
このような設定画面が現れます。基本的に初期設定のままですが、あえてgoogleフォントは有効にしています(無効のほうが表示速度が速くなることはわかりきっていますが)。
では、その速度を測定してみましょう。
図11. 改善2実施後のモバイル表示速度
モバイルでの表示速度が38点に上昇しました(図11)。この項目の改善前が20点でしたから、18点ものの改善です。PCは86点ともう1点だけ改善しています。
図12. 改善2実施後のモバイル改善項目
改善項目一覧です(図12)。レタリングを妨げる～という項目は依然として入っていますが、先ほどの3.8秒から0.62秒と3.18秒も改善されています。別の言いかたをすると83%以上も改善しています。完璧を目指すものではありませんので、これで良いことにしましょう。
改善策3. サーバーの応答速度向上
次に目につくのが、サーバーの応答速度向上です。これもさっぱりですが、インターネット上を調べると、キャッシュ系プラグイン(ページデータ等を保存するための機能)の導入を訴えるサイトさんが目立ちます。でも、キャッシュ系プラグインの導入にはリスクがあると聞いたことがあります。そのため、キャッシュ系プラグインの導入は見送りです。
また、PHPの更新も効果があることも確認しました。私はサーバーにロリポップちゃんを採用していますので、ログインしてからバージョンを変更です。これは、他のレンタルサーバーでも事情は同じでしょう。
図13. PHPのバージョン変更
PHPのバージョンを変更しました(図13)。ちょうど2019年10月～12月にバージョンアップしていたようですので、タイミングとしてはちょうど良かったです(この記事は2020年1月に執筆したものです)。
では、その結果はどうでしょうか。
図14. 改善3実施後のモバイル表示速度
38点のままです(図14)。ただし、PCは89点と前回よりも3点上昇しています。この施策はそれなりに正しかったのでしょう。
図15. 改善3実施後のモバイル改善項目
先ほど実施したサーバー応答時間が0.36秒に縮まっています(改善前は0.65秒)。これはこれで効果アリでしょう。高価なサーバーならさらに効果が表れるでしょうが、それは最後の手段に取っておきましょう(ロリポップではハイスピードプランが提供されています)。
改善策4. 画像の適正化
私は携帯電話なりデジタルカメラで撮影した画像をパソコンで圧縮して弊サイトにアップロードしていますが、それでも画像が溜まればそれだけデータの羅列となります。そこで、EWWW Image Opptimizerというプラグインで画像を最適化します。プラグインを導入するのはいつもの手順で問題なく、あとはメディア→一斉最適化で待つだけです。弊サイトは旅行記が多いので、20時間ほど待たされる羽目になりました…(その間に寝たり仕事に行ったりしているので、ずっと待ちぼうけということではありません)。
図16. 画像の最適化中の画面(このときの表示は4時間台でしたが、終了したのはその18時間以上後)
では、改善後の表示速度はどうでしょうか。
図17. 改善4実施後のモバイルでの表示速度
モバイルでの表示速度です(図17)。先ほどの改善で38点から41点に3点上昇しています。PCについては91点と2点上昇しています。
次世代フォーマットでの画像の配信が、改善前の0.9秒から0.33秒に短縮されています。割合にすると63%もの節約です。
今回の改善策4つのまとめ
今回は以下の改善策を実施し、いずれも速度向上に効果がありました。
・画像の遅延読み込み
・Autoptimizeを利用してレンタリングを妨げるリソースの除外
・サーバーのPHPバージョンを最新のものに変更
・画像の圧縮
これらの施策はいずれも「素人が片手間にできる」レベルのものです。スコアそのものはモバイルで41点とまだまだですが、当初のスコアと比べればだいぶ改善されています。このスコアは100点を目指すものではありませんし、100点を目指すためには犠牲にする内容(キャッシュ系プラグインの導入など)があります。
インターネット上を探すと、弊サイトよりも程度の高い記事は多く見かけます。では、なぜ弊サイトで取り上げたのでしょうか。これはサーバーなどに詳しくない人に親切な記事が全然なかったのが理由です。同じようなニーズ(CSSなどに詳しくない人が、片手間にやりながら、それなりに表示速度を改善できるというニーズ)をもつ人にとって、わかりやすい内容を目指したためです。