The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

ページでスクリプトが利用できない場合に表示するコンテンツを用意する

監査が重要である理由

プログレッシブ エンハンスメントは、より多くの人々が利用できるサイトを構築するためのウェブ開発戦略です。 プログレッシブ エンハンスメントの最も一般的な定義は以下のとおりです。

ウェブの基盤技術のみを使用して基本的なコンテンツとページ機能を作成することにより、あらゆるブラウジング環境でページを利用可能にします。よりリッチなデザインや機能(CSS による高度なスタイル設定、JavaScript によるインタラクティブな機能など)については、これらの技術をサポートするブラウザに対して追加で提供します。 ただし、基本的なコンテンツとページ機能は CSS や JavaScript をベースに作成すべきではありません。

監査に合格する方法

プログレッシブ エンハンスメントは、議論の絶えない大きなテーマです。プログレッシブ エンハンスメントの方針に忠実に従うためには、ページをレイヤ化して、HTML のみを使用して基本的なコンテンツとページ機能を実装すべきであるという考え方があります。 このアプローチの例については、Progressive Enhancement: What It Is, And How To Use It をご覧ください。

一方、上記のような厳密なアプローチは、最新の大規模ウェブ アプリケーションでは実現不可能または不要であるとして、極めて重要なページのスタイル設定には、ドキュメントの <head> でインライン化したクリティカル パス CSS を使用すべきだという意見もあります。 このアプローチに関する詳細は、クリティカル レンダリング パスをご覧ください。

こうした状況をふまえ、Lighthouse の監査では、JavaScript が無効な場合に空白のページが表示されないことのみをチェックします。 アプリでプログレッシブ エンハンスメントの原則をどれだけ遵守すべきかという点については議論が絶えません。ただ、JavaScript が無効の場合は、すべてのページで何かしらの情報(ページの使用には JavaScript が必要である旨をユーザーに警告するだけのコンテンツでも可)を表示する必要があるということは広く同意されています。

そのアプローチの 1 つとして、JavaScript が必須のページでは、<noscript> 要素を使用して、JavaScirpt が必要であることをユーザーに警告する方法があります。 これは、空白のページを表示するよりも好ましい対応だといえます。空白のページが表示された場合、該当のページ、ユーザーのブラウザ、ユーザーのコンピュータのどれに問題があるのかユーザーにはわからないためです。

JavaScript が無効になった状態でのサイトの見え方や動作を確認するには、Chrome DevTools の Disable JavaScript 機能をご利用ください。

監査方法

このセクションでは Lighthouse による監査方法と監査スコアの算出方法を説明します。

Lighthouse では、ページの JavaScript を無効にしてページの HTML を調査します。HTML が空の場合は、この監査で不合格となります。 HTML が空でない場合は合格です。