Page Speed Insights を使ってページをテストしてみる
ユーザーフレンドリーなサイトにできるといいなと思いながら、モバイルフレンドリーのアドバイスを学びながら Do It Yourself^^ それにしてもWordPress ＋ ユーザーフレンドリーの世界は広くて深いです!
ページやサイトの表示速度は検索エンジンによるサイトの評価にも影響すると言われている重要なエレメント!? － だとするとどんな知識、どんな技術をマスターしなくてはいけないのだろう??
それくらい、”超基本” に立ち還ってちゃんと自立できるサイト運営を目指さないことには、ブログを通した情報発信を続けることはできないよね! － そう思いながら勉強を続けているのですが、表示速度のテストと称してPage Speed Insightsを使ってみただけで、学習・マスターすべき次のカリキュラムが見えてくるようです。
前回、サイトの改造をコピー版のローカル側でやれるようになることを目指して Instant WordPress＋Duplicator のインストールを目指しましたが、そのインストールにWP Super Cacheが作るキャッシュファイルが邪魔になるということが分かり、Super Cacheを機能オフにしました。
そのせいもあってだろうと思いますが、Page Speed Insightsのテスト結果は良くはありません^^; 。が…
- 赤： 要 修正
- 黄： 注意
- みどり： OK
の3段階評価のはずですが、赤の評価項目がありませんね。
Page Speed Insightsの良いところは “ここに問題があるからこんなふうに直してはどうですか?” と直接的に指導してくれるところ。
ですが、私のような “超基本” を必要とする人間は注意もしなくてはいけません。
たとえば、「サーバーの応答時間を短縮する」という項目があって、修正方法がアドバイスされていても 「ああそうか!」 と、あまり簡単・単純に飛びつかないようにしなくてはいけません。
それというのもこのスナップショットの例にある
- サーバーの応答時間を短縮する、そして
- ブラウザのキャッシュを活用する
のように、対応の仕方によっては相互に影響し合う、あるいは相互に設定のバランスを考慮しなくてはいけないものがあるからです。
Google のテストでは、お使いのサーバーは 1.5 秒で応答しました。サーバーの応答時間が遅くなる要因はたくさんあります。サーバーが多くの時間を費やしている箇所を監視し、測定する方法については、Google の推奨事項をお読みください。
出典：Page Speed Insights・サーバーの応答時間を短縮する のアドバイス
と書かれている説明にもそのことが現れていますね。
Page Speed Insightsの解説やアドバイスを読み解くには時間と努力が必要なのです。
webpagetest.org の目に見えるアドバイス
文字で読んでも説明されていることがイメージできない － そんな壁にぶつかったら、見える化してくれるツールを併用してみましょう。
このスナップショットは、私のあるページをテストしたときのもので、総合評価として表示されるヘッダー部分の情報…
そしてこのスナップショットは、ヘッダー情報の下につづくWaterfall Viewの一部です。
ページを構成しているエレメント
- dns
- connect
- ssl
- html
- js
- css
- imageなど
のステップとデータ要素がどんな順序でどれくらいの時間をかけて処理されているかが見えます。
もちろん、たとえば、「ブラウザのキャッシュを活用する」にはどうすればよいかをこのグラフに求めることはできません。「JavaScriptを縮小する」というアドバイスにあるスクリプト（js）がどのタイミングで動いているかは見ることができます。
つまり、Page Speed Insights のアドバイスに沿った改造 → WebPagetestとの比較・確認、そのコンビネーションで理解を進めていく － そんな提案です。