Webサイトパフォーマンスを調べてみる

はじめに

こんにちは。MTです

ウェブサイトの表示スピードが気になったのでGoogle さんの「PageSpeed Insights」を使ってみることにしました。
サイトパフォーマンス見るの久しぶりです

早速使ってみます！ このページが記載されているブログのURL を入力します

ずらーっと出てきました！

Google さんは流石にUI がシンプルで的を得た Insight である。と私は思っている。。
「PageSpeed Insights」が無料で使えるなんて、太っ腹！

結果の冒頭は
「パフォーマンス」「ユーザー補助」「おすすめの方法」「SEO」の点数結果が記載されています。

「パフォーマンス」 57点、、どうなんだろう？
「ユーザー補助」 88点、、いいんじゃない！でも、何故黄色いのだろう。。
「お勧め方法」、「SEO」は 90点越えの緑色。問題ないんだろうね！
といった具合の簡単な判断ができます。

PageSpeed Insights その1 「パフォーマンス」

本件を構成する指標が以下の5通り記載されます

First Contentful Paint
Largest Contentful Paint
Total Blocking Time
Cumulative Layout Shift
Speed Index

赤い▲は少し遅いね、緑の●はいい感じ、といった指標が冒頭に記載されています

「ビューを開く」をクリックすると詳細が表示されます。

今回は初めてページを開く人の画像読み込みに、やや時間がかかっている
といった指摘をしてくれます。

それらの指摘をしてくれた後に「改善できる項目」といったレコメンドが表示されます
詳細はそれらをクリックすると表示されます。

最後に「改善できる項目」と「診断」のレコメンドが記載されています。
専門的な用語もやや記載されています。ネットで調べながらフムフムと把握するのがよいですね。

PageSpeed Insights その２ 「ユーザー補助」

UI/UX の向上を意識したWeb サイトの作成において、有効となる情報をお知らせしてくれます。
昨今のWebサイトでは、スマホアクセスがPC を上回り、アクセスビリティの検討箇所も スマホが中心となっていますよね。
「ユーザー補助」での指摘事項を確認することで、少しでもUI/UX の向上につながれば良いと思います。

PageSpeed Insights その３ 「おすすめの方法」

ここでの指摘はたまに難しいことをいってきます。セキュリティ面の指摘は特に難しい。。
簡易的なホワイトボックステスト(ソースコードレベルでの脆弱性診断) の内容を指摘された場合、
最寄りのセキュリティコンサル企業に相談するのが良いかも知れません。（お値段はお高いですが、、）

PageSpeed Insights その４ 「SEO」

Web に携わるお仕事をされている皆さんには、お腹一杯のこの言葉。
点数が悪いページは指摘事項の改善をすることで、検索結果が向上するかもしれません。 (しないかも知れませんが、、、）

以上ざっくり読み解いてみた内容を記載しました。

以前はサイトのパフォーマンスをアップさせるためには、対象となるページの Javascript をとにかく減らしていくこと、というのが定石でした。
ですが、昨今のWEB サイトでは、様々なビーコンが埋められていたり、 PC サイトよりスマホアクセスを意識しなくてはいけなかったり、 単純にスクリプトを削除していくだけではパフォーマンスアップは難しいご時世です。

EC サイトのような売り上げに直結するサイト以外では、ある程度のスピードが出ていればOKとして 極端に読み込みスピードが遅い画像等には、加工を加えるといった回避策が良いのではと 思っています。

今回記載した「PageSpeed Insights」が登場するよりはるか昔、米国の Gom〇〇 という同様の機能を もつツールがありました。
それが Dyn〇〇ace に買収され APM ツールの一部として機能吸収されました。かつては高額なツールであったパフォーマンス分析が、いまや無料で利用できるって時代って、凄いなーと痛感しております。

本当のパフォーマンス改善は、フロントページではなく、APM で確認する必要がある内部のロジックであることが多いです。
これからは、AMP の無料化もどんどん続いていくのかなー思っています。
機会があれば、APM のお話もしてみたいです。

では