プログレッシブ エンハンスメントとは、できる限り多くのユーザーがサイトにアクセスできるようにするためのウェブ開発戦略です。基本原則は、基本的なコンテンツとページ機能は、最も基本的なウェブ テクノロジーのみに依存するべきであるということです。CSS を使用した高度なスタイル設定や、JavaScript を使用したインタラクティビティなどの拡張機能は、これらの技術をサポートするブラウザ向けにさらに重ねることができます。ただし、基本的なコンテンツやページ機能は、CSS や JavaScript に依存しないようにしてください。
Lighthouse のフォールバック コンテンツ監査が失敗する仕組み
Lighthouse では、JavaScript が利用できない場合、一部のコンテンツを含まないページにフラグが付けられます。
Lighthouse では、ページ上の JavaScript を無効にしてから、ページの HTML を検証します。HTML が空の場合、監査は失敗します。
JavaScript を使用せずにページにコンテンツを表示する方法
段階的なエンハンスメントは、大きな議論を呼ぶ大きなトピックです。あるキャンプでは、プログレッシブ エンハンスメントの戦略に従い、基本的なコンテンツとページ機能が HTML だけで済むようにページを階層化する必要があると述べています。このアプローチの例については、Smashing Magazine の Progressive Enhancement: What It Is, And How To Use It をご覧ください。
別のキャンプでは、この厳密なアプローチは、最新の大規模なウェブ アプリケーションの多くでは実現不可能または不要であると考えており、絶対に不可欠なページスタイルについては、ドキュメント <head> でインライン クリティカル パス CSS を使用することを提案しています。
こうした点を考慮して、この Lighthouse の監査では、JavaScript が無効になっている場合にページが空白にならないよう簡単なチェックを行います。アプリがプログレッシブ エンハンスメントにどの程度準拠するかは議論の的ですが、JavaScript が無効になっている場合、すべてのページに少なくとも一部の情報を表示するという方法は広く見受けられます。これは、JavaScript がそのページを使用する必要があるというユーザーに対するアラートにすぎないコンテンツであってもです。
どうしても JavaScript を使用する必要があるページでは、<noscript> 要素を使用して、そのページには JavaScript が必要であるとユーザーに警告する方法があります。空白のページを表示すると、ページ、ブラウザ、パソコンのいずれに問題があるのかがユーザーにわからないため、空白のページを表示するよりも効果的です。
JavaScript が無効になっている場合のサイトの外観やパフォーマンスを確認するには、Chrome DevTools の JavaScript を無効にする機能を使用します。