ブログを開始して1ヶ月が経ちました。最初は新しいことばかりで大変でしたが、現在は慣れてきたところです。ただし、最近は「ブログの速度」が気になります。
PC版では問題ない速度が確保されていますが、スマートフォンでの閲覧が非常に気になるため、調査したところ驚くべき遅さが判明しました。この問題に対処にした際の備忘録をここに残します。
サイト速度を調べる方法
サイトの速度を調べる方法には、「WEBサイトで調べる方法」と「Chrome拡張機能で調べる方法」の2つがあります。
WEBサイト
最も有名なWEBサイト一つは「PageSpeed Insights」です。
このツールを使用する際は、調査したいURLを貼り付けて「分析」ボタンをクリックするだけで、速度の評価が表示されます。対策を行っていない状態では、モバイル版の結果が赤く表示され、非常に遅いことが明らかになります。
一方で、PC版の読み込み速度は初めから非常に良好な成績を示しています。このため、今後の目標はモバイルページの読み込み速度の改善となります。
Chrome拡張機能
有名なChrome拡張機能ツールの一つに「Lighthouse」があります。
調査したいページで拡張機能をクリックし、「Generate report」を選択すると、下記のように結果が表示されます。ただし、「PageSpeed Insights」と異なり、Lighthouseはモバイルページのみを評価します。
こちらの結果からも、改善の余地があることが分かります。
「PageSpeed Insights」と「Lighthouse」の違い
両者は非常に似たツールですが、明確な違いが存在します。それは「実行環境」にあります。「PageSpeed Insights」はGoogleが提供するサーバーで実行されますが、「Lighthouse」は利用者の環境で動作します[1]。このため、Lighthouseは特にネットワークの速度によって評価が変動する可能性があります。
総合的なパフォーマンス計測を優先する場合は、「PageSpeed Insights」の利用をおすすめします。
速度改善のためにしたこと
両方の速度診断ツールを使用して、現在のモバイルページの速度を計測しました。現在の速度は非常に遅くSEOに対して悪影響を及ぼす可能性が高いため、対策を検討することにしました。
【対策その1】「XPageSpeed」を使ってみた
Xserverをご利用の方は、「XPageSpeed」を導入することができます。
「XPageSpeed」は、Google社により開発された拡張モジュール「PageSpeed Module」をもとに、 エックスサーバーが開発したWebサイト最適化機能です。 画像・CSS・JavaScriptなどのファイルを圧縮してデータ転送量を削減したり、 同種のファイルを一つにまとめて無駄な通信を削減するなど、 Webサイト表示におけるSEO（検索エンジン最適化）のための最適化処理をワンクリックで適用できます。 XPageSpeed | レンタルサーバーならエックスサーバー
これはXserverのサーバーパネルから設定可能で、具体的な設定方法は公式サイトでご確認いただけます。
設定項目は合計で6つありますが、私がONに設定したのは以下の3つです。
- CSS最適化
- CSS遅延読み込み
- JavaScript最適化
残りの3つに関しては不具合が発生したため、OFFに戻しました。この設定の状態でモバイル版の速度がどの程度改善されたかを確認してみましょう。
まずは「PageSpeed Insights」の結果から見てみましょう。
次に「Lighthouse」の結果もご覧ください。
導入前と比較して、どちらも速度が「10」向上しました。しかし、まだ合格水準には達していません。
【対策その2】reCAPTCHAの読み込みを特定のサイトに限定する
最初は「XPageSpeed」の導入で全てが解決すると期待していたため、途方に暮れていました。しかし、「Lighthouse」の結果を確認する中で、「Google reCAPTCHA」が原因ではないかと考え始めました。
そこで、「reCAPTCHA」の読み込みを「お問い合わせ」と「運営者情報」に限定することを試してみました。具体的な方法は以下のサイトを参考にしました。
その結果が以下の通りです。
まずは「PageSpeed Insights」の結果です。
次に「Lighthouse」の結果です。
どちらも約「30」向上しています。結果として、モバイルページの読み込み速度は「50」から「80」近くまで劇的に改善されたことが分かります。
まとめ
この記事では、モバイルページの読み込み速度を大幅に改善するために行った手順をまとめました。2つの手法を組み合わせることで、「40」から「80」近くまでの改善が実現しました。
速度測定には「PageSpeed Insights」と「Lighthouse」のどちらか、または両方を利用しています。
最初は「XPageSpeed」を試しましたが、効果はあるものの合格には至りませんでした。その後、reCAPTCHAの読み込みを特定のページに限定することで劇的な効果が現れました。
みなさんのモバイル表示速度向上の際の参考になれば幸いです。
