Lighthouseで把握するWebサイトパフォーマンス

2016年12月10日 著

この記事は、Webサイトパフォーマンス Advent Calendar 2016の10日目の記事です。数日前に突然、竹洞さんから参加のお誘いをいただいてしまい......正直、取り立ててこの分野に長けているわけではないので、つい最近知ったLighthouseを紹介することでお茶を濁そうと思います（汗

Lighthouseを一言でいえば、Progressive Web Apps（PWA）の品質チェックツールです。そもそもPWAとは何ぞや、となるとまたちょっと表現が難しいのですけど、自分はWebアプリとネイティブアプリの「いいとこ取り」みたいに言うことが多いです。Webアプリ開発の最新トレンド、とも言えるでしょうか。LighthouseはCLIで実行することもできますが、Chromeの拡張機能をインストールして利用するのがお手軽です。英語ですが、導入と使用法の簡単な解説「Using Lighthouse」があります。

Lighthouseは、「Do Better Web（Webをより良くしよう）」という一種のスローガンみたいのを掲げていて、ただ単にPWAに求められる品質のみならず、Webアプリ全般におけるベストプラクティスについても、出来栄えをチェックしてくれます。本校執筆時点では、以下の項目をチェックできます：

• Progressive Web App
  • オフラインまたは不安定な通信状態でアプリを実行できるか
  • ページの読み込みパフォーマンスは速いか
  • プログレッシブ・エンハンスメントの作法に従っているか
  • セキュアなネットワーク接続を使用しているか
  • 固有のスプラッシュスクリーンで起動するか
  • アドレスバーはブランドカラーに相応しいか
  • モバイルフレンドリーなデザインか
• ベストプラクティス
  • モダンなオフライン機能を使っているか
  • モダンなプロトコルを使っているか
  • モダンなCSS機能を使っているか
  • モダンなJavaScript機能を使っているか
  • ユーザー体験に悪影響を及ぼすAPIを避けているか
  • アクセシビリティ
  • その他
• パフォーマンス計測

デフォルトでは上記の全項目をチェックするので、PWAではないフツーのWebページで実行すると酷い成績が返ってくるのですが、注目すべきは「ページの読み込みパフォーマンスは速いか（Page load performance is fast）」の項。これ、竹洞さんが「Web制作を仕事にされているのであれば、使うのを止めましょう」と主張されているPageSpeed Insights（PSI）よりかは、デザイナーや開発者にとって「使える」と思うんですけど、いかがでしょう。PSIと比べ、何をどうすれば良くなるみたいなアドバイスを詳しく提示はしてくれないものの、Lighthouseの方が実用的だと思います。目下、値を出してくれるのは、本校執筆時点で以下の各項（なんか急に訳すの面倒になったので英語表記のママ）：

• First meaningful paint
• Perceptual Speed Index
• Estimated Input Latency
• Time To Interactive

Lighthouseはチェック項目を絞り込めますから、PWAかどうかに関係なく、Webサイトパフォーマンスを把握する目的に限定して使うのもアリではないか......とまぁそんな感じで、今後Lighthouseを活用していきたい所存。