當 JavaScript 無法使用時,不提供備用內容

漸進式強化是網站開發策略,可確保最多目標對象存取您的網站。核心原則在於基本內容和網頁功能只應使用最基本的網路技術。針對支援這些技術的瀏覽器,您可在上面疊加更優異的體驗,例如使用 CSS 設定複雜的樣式或使用 JavaScript 互動。不過基本內容和網頁功能不應仰賴 CSS 或 JavaScript

Lighthouse 備用內容稽核失敗情形

當 JavaScript 無法使用時,Lighthouse 會標記不含部分內容的網頁:

Lighthouse 稽核功能在無法使用 JS 時,網頁不會顯示部分內容

Lighthouse 會停用網頁上的 JavaScript,然後檢查網頁的 HTML。如果 HTML 空白,稽核作業就會失敗。

如何確保網頁內容沒有 JavaScript

漸進式增強效果是一大主題,一名營所說,為了遵循漸進式強化策略,網頁必須分層,使基本內容和網頁功能只需要 HTML。如需此方法的範例,請參閱《Smashing Magazine》的《Progressive Enhancement: What It, and How To Use It》(漸進式增強功能:定義、使用方法) 一文。

另陣營認為,許多現代大型網頁應用程式都無法採取這項嚴格做法,也無法使用。因此,我們建議在文件 <head> 中使用內嵌的重要路徑 CSS,確保網頁樣式極為重要。

基於上述考量,這項 Lighthouse 稽核會執行簡單的檢查,確保 JavaScript 停用時您的網頁不會呈現空白。嚴格來說,應用程式遵循漸進式強化機制是一個辯論的主題,但廣泛協議規定 JavaScript 停用時,所有頁面至少應顯示「部分」資訊,即使內容只是提醒使用者,JavaScript 需要使用網頁。

如果網頁絕對必須使用 JavaScript,其中一種方法是使用 <noscript> 元素,告知使用者網頁需要使用 JavaScript。這比顯示空白網頁更好,因為空白網頁會讓使用者不確定網頁、瀏覽器或電腦是否有問題。

如要查看網站在 JavaScript 停用後的外觀和效能,請使用 Chrome 開發人員工具的「停用 JavaScript」功能。

資源