記事の詳細
PageSpeed Insightsの「Webページの読み込み時間」を改善するにはどうしたら良いのか?
グーグルさんが「読み込み速度も検索順位に影響するからね!」とアナウンスしてから「Webサイトは軽い方が良い」というざっくりとした認識が浸透しているように感じます。
自分もその認識を持っているのですが、では具体的に「読み込み速度」は何を指しているのでしょうか?
色々なwebサイトを閲覧する中で疑問を感じたこともあったので、PageSpeed Insightsに関していくつか実験をしてみました。
今回のブログの見出しはコチラです!
「Webページの読み込み時間」って何だろう?
言葉をそのまま受け取ると「Webページの読み込みがブラウザ側で完全に終わるまでの時間」と解釈できますよね。
「Webページの読み込み時間」を計るPageSpeed Insightsで測定した数値も、上記のような考えで評価をしているのだろうと思っていました。
ですが、色々なサイトをPageSpeed Insightsで分析してみると、AサイトよりもBサイトの方が体感的に表示が早いのに、評価が逆になっていることがありました。
なので今回は、下記のような実験をしてみてPageSpeed Insightsの評価がどうなるのか見てみました。
- HTMLコードにサイズの大きい画像を設置して表示
- HTMLコードに大量の文字を設置して表示
- JavaScriptを使ってsetIntervalで大量の文字を後から表示
実験1:HTMLコードにサイズの大きい画像を設置して表示してみる
まずは、約13MBの画像を21個読み込むページで実験してみます。
実験用のページは下記になります。
https://incloop.com/blog_neta/test/test1.html
※画像のURLにパラメーターがついているのは、別の画像と認識して読み込んで欲しいための小細工になります!
PageSpeed Insightsだけでなく、実際のブラウザでの表示速度も知りたいので、Google Chromeの拡張機能「Page load time」も使ってページの読み込み時間を計ってみました。
Page load timeの使い方は下記サイト様が非常に丁寧にまとめていますので、気になる方は参考にしてください。
『Page load time』サイトの表示速度を簡単に計測【Chrome拡張】
Page load timeの測定で読み込み完了までに37秒かかっているにも関わらずPageSpeed Insightsの結果はモバイル、PC共にイエローラインの中でもやや良い評価になっています。
待ち時間が長くてユーザー的にはそれなりのストレスになりそうですが…許容範囲なのでしょうか?
先程の37秒と比べると、読み込みは5秒と明らかに速いはずなのに点数がやたらと低い…。
嫌われているのかな…?
…気を取り直して。
この実験でPageSpeed Insightsに関して分かることは…
- 単純なページの読み込み速度だけで判定していない。
- 画像の重さは点数に影響を与えるものの、評価の比重としてはそこまで重くない。
この辺りでしょうか。
実験2:HTMLコードに大量の文字を設置して表示してみる
次に、テキストエディタが悲鳴を上げるような1400万字程度の文字を打ち込んだページを試してみます。
実験用のページは下記になります。
https://incloop.com/blog_neta/test/test2.html
良い結果ですね!
点数にデバイスの差っぽいものが出ている感じがします!たまりません!
結果としては、実験1よりも読み込みは速いのですが、PageSpeed Insights(モバイル)の結果は悪くなりました。
ちなみに、実験2で使ったHTMLファイルのサイズは13.8MBなので、実験1で使った画像1枚分と同じようなサイズになります。
この実験でPageSpeed Insightsに関してわかることは…
- 同じサイズの画像と文字情報では、モバイルに限っては文字情報の方が点数が低くなる。
もしかして、やたらと長い文字は画像にすることで点数が良くなるのでしょうか?
でもブラウザでの表示速度は遅くなるような…、うーん…?
実験3:JavaScriptを使って大量の文字を後から表示してみる
実験2で点数の低いパターンが出てきたので、次はちょっとした小細工をしてみます。
文字情報をすぐに表示せずに、読み込みの1秒後に大量の文字情報を表示したらどうなるのか試してみます。
実験用のページは下記になります。
https://incloop.com/blog_neta/test/test3.html
やっていることは単純で、setTimeout関数を使って読み込みの1秒後に大量の文字を表示しています。
読み込み完了は0.5秒と、他と比べて圧倒的に速いのですが、実験2よりも更に悪い点数になりました。
自分の想定としては、表示そのものは済んでいるので良い点数になると思っていました。意外です。
気になったので読み込み後の5秒後や10秒後の表示も試してみたのですが、どちらもPageSpeed Insightsからエラーが返ってきてしまいました。残念。
実験を通して分かったこと
今回の実験で「Webサイトの読み込み速度」は「ブラウザで実際に表示した結果」と「PageSpeed Insightsによる結果」が別物であることがわかりました。
もちろん、無駄にサイズの大きな画像やコードを削除して、更にキャッシュ化もして読み込み時間を短縮することは効果的なのですが、それ以上にスクリプトで余計な事をする方がPageSpeed Insights的にはアウトみたいですね。
自分は最近「JavaScriptやjQueryなら後からなんでもできるじゃん!超便利!」という浮ついた気持ちでいたのですが、「それはあかんぞ!」という結果が出てしまいました。反省します…。
表示速度の改善を行う際には、画像やコードのサイズを見るだけでなく、余計な処理がないかどうかも確認しないとダメですね。
非常に勉強になりました( ;∀;)