[レベル: 上級]

この記事では、11 月 12 〜 13 日に米サンフランシスコで開催された Chrome Dev Summit 2018 のセッションをレポートします。

今年の Chrome Dev Summit で Google が特に力を入れていたテーマはウェブのパフォーマンス改善でした。
モバイルウェブ高速化の成功事例のセッション高速化のための最新テクニックのセッションを先週はこのブログでレポートしています。

この記事で紹介するセッションのトピックは、パフォーマンス改善に役立つツールです。
ウェブサイトの高速化にはどんなツールが利用できるのでしょうか?

一緒に見ていきましょう。

Paul Irish and Elizabeth Sweeny taking at Chrome Dev Summit 2018

Metrics

何かを改善しようとするなら、計測することが重要。まず何を計測するかのMetrics(指標)を決める。ユーザーにかかわる指標を計測する。

ウェブページでは、次の 3 つを指標にするといい。

  • First Contentful Paint (FCP): 意味のあるコンテンツの初回ペイント――ページの主要なコンテンツが可視化されるまでにかかった時間
  • Time to Interactive(TTI) : インタラクティブになるまでの時間――ページが完全にインタラクティブになるまでの時間
  • First Input Delay (FID): 入力の推定待ち時間――ユーザーの入力に対して応答するまでの時間
FFC と FID とTTI

指標のデータを集めるために利用できるツール

Lighthouse の改良

Lighthouse は、Google が開発したオープンソースのパフォーマンス計測ツール。

Lighthouse の新しいバージョンの変更点

一部は v4 から実装(現行バージョンは v3)。v4 は alpha 版をリリース済み。

  • PWA のチェック項目
  • 新しい UI
  • パフォーマンス向上
  • スコア評価――いままでは、75 点以上が速いと認定されたが、90 点以上になる
    • 速い: 90~100
    • 平均: 50~89
    • 遅い: 0~49
  • プリセットのラベルを Fast 3G から Slow 4G に変更(中身は同じ)

Lighthouse と他のツールの統合

Lighthouse のレポートを組み込んだサードパーティ製のパフォーマンス測定ツールが出ている。

PageSpeedInsights API

PageSpeedInsights API v5 をリリースした。分析エンジンに Lighthouse を使用している。Chrome User Experience Report (CrUX) が提供するフィールドデータを統合する。

以上です。

パフォーマンス改善に取り組む際には、まずは、次の 3 つの指標にフォーカスするといいとのことでした。

  • FCP
  • TTI
  • FID

高速化のテクニックを解説するドキュメントやスピード測定ツールで頻出する用語ですね。
新しい PageSpeed Insithts では FCP と FID のフィールドデータをレポートするようになりました。

Google としては自社製ということもあってでしょうか、Lighthouse をイチオシしているように感じました。
バージョンアップを重ねています。

新 PSI では、分析エンジンに Lighthouse を使うようになりました。
次バージョンの v4 を先取りで搭載しています。

Lighthouse と連携できるサードパーティ製ツールも増えているようです。
パフォーマンス改善に積極的な大手サイトは、たとえば SpeedCurve を Performance Budget 管理に活用していることがほかのセッションで紹介されていました(Performance Budget も最近よく耳にする概念。CDS でも多くのセッションで登場していた)。

Google がパフォーマンス改善をプッシュしているのは、それだけユーザーが速いサイトを求めているからなのでしょう。
ユーザー体験向上を目指すなら優先的に取り組みたいものです。
ツールを最大限に活かすことも成果を上げるためは重要になります。

なおセッション録画は YouTube で視聴できます。

このエントリーが役に立ったらシェアしてください

[Ads & Featured Articles]

海外SEO情報ブログTOPSEOツール › ウェブのパフォーマンス改善にはスピード測定ツールが必要不可欠、GoogleのイチオシはLighthouse #ChromeDevSummit

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


▲ページの一番上に戻る