Webサイトの測定ツール「WebPageTest」特徴・概要編

こんにちは、プロクラスの國府です。

Webサイトを作成して、「表示スピードが遅い」「検索結果の上位に表示されない」ということはないでしょうか？

今回は、Webサイトの表示スピードの測定ツール「WebPageTest」を紹介したいと思います。

ただ、「WebPageTest」だけで、「O’REILY（オライリー）」から出版されている１冊の本「Using WebPageTest ページ数 214」になるくらいのボリュームです。

特徴、概要や測定方法や測定結果の見方を１つの記事で説明すると長くなるので連載で紹介します。

今回は、概要、特徴について説明したいと思います。

「WebPageTest」とは、オープンソースで公開されているWebサイトのパフォーマンス（スピード）を計測するためのWebサイトです。

無料（一部機能は有料）で気軽に利用できるので、活用している企業も多いです。

特徴について

下記の５種類から選択することができます。

「Site Performance」（サイトパフォーマンス）:ブラウザのレンダリングのタイムラインやHTTPのリクエスト数、コンテンツの種類（HTML, CSS, JS, Image）ごとのバイトサイズなどを計測したりすることができます。

「Core Web Vitals」（コアウェブバイタル）：

ユーザー体験（UX）をより優れたものにするためにGoogleが提唱している３つの指標(LCP, FID, CLS)のことです。この3つの指標を計測することができます。

「Lighthouse」（ライトハウス）：

Googleが無料で提供しているための、Webサイトを分析・診断するGoogle Chrome拡張機能です。

下記の5つのジャンルをまとめて測定することができます。

1. 1. Performance：　ページの読み込みや、ユーザーの操作によって生じるレスポンスの速さなど、主にサイト内のスピードに関する項目を測定する
  2. ProgressiveWebApp：　ふつうのWebページをスマホアプリ化する技術で、その要件を満たしているかを測定します
  3. Accessibility：　サイトの訪問者および、検索エンジンのロボットに対して最適な作りになっているかを測定します。具体的には、テキストや背景の色が見やすいか、またHTMLの構造が正しく設定されているかなどです。
  4. Best Practices：　HTTPSを使用しているか、画像のアスペクト比が適切あるか、ブラウザのエラーコードがあるかなどの、ブラウザのセキュリティやパフォーマンスを低下させる要素を測定します。
  5. SEO：　検索結果のランキングに影響する項目を測定します

「Visual Comparison」:

２つ以上のWebページの測定値を比較することができます。

　　　　　ブラウザのレンダリングを画像付きでタイムラインで比較したり、

コンテンツごとの合計バイト数の比較を横棒グラフで表示したりできます

「Traceroute」:

Linuxなどのコマンド「traceroute」と同じで、対象サーバにたどり着くまでに辿ったルーターのIPアドレスと時間を計測します。

これらの５つの測定方法や結果の指標は、使い方や計測結果の見方で詳しく説明します。