자바스크립트를 사용할 수 없는 경우 대체 콘텐츠를 제공하지 않음

점진적 개선은 최대한 많은 사용자가 사이트에 액세스할 수 있도록 하는 웹 개발 전략입니다. 핵심 원칙은 기본 콘텐츠와 페이지 기능은 가장 기본적인 웹 기술에만 의존해야 한다는 것입니다. CSS를 사용한 정교한 스타일 지정 또는 자바스크립트를 사용한 상호작용과 같은 향상된 환경을 이러한 기술을 지원하는 브라우저에 적용할 수 있습니다. 하지만 기본 콘텐츠 및 페이지 기능은 CSS나 JavaScript에 의존해서는 안 됩니다.

Lighthouse 대체 콘텐츠 감사 실패 방법

Lighthouse는 JavaScript를 사용할 수 없는 경우 일부 콘텐츠가 포함되지 않은 페이지에 플래그를 지정합니다.

JS를 사용할 수 없을 때 페이지에 일부 콘텐츠가 없음을 보여주는 Lighthouse 감사

Lighthouse는 페이지에서 자바스크립트를 사용 중지한 다음 페이지의 HTML을 검사합니다. HTML이 비어 있으면 감사에 실패합니다.

페이지에 자바스크립트가 포함되지 않은 콘텐츠가 포함되도록 하는 방법

점진적 개선은 방대하고 논란의 여지가 있는 주제입니다. 어떤 사람은 점진적 개선 전략을 준수하기 위해 기본 콘텐츠와 페이지 기능에 HTML만 필요하도록 페이지를 계층화해야 한다고 말합니다. 이러한 접근 방식의 예는 Smashing Magazine의 점진적 개선: 정의 및 사용 방법을 참고하세요.

다른 대규모 웹 애플리케이션에서는 이 엄격한 접근 방식이 실행 불가능하거나 불필요하다고 생각하고, 매우 중요한 페이지 스타일에 <head> 문서의 인라인 중요 경로 CSS를 사용할 것을 제안합니다.

이러한 점을 고려하여 이 Lighthouse 감사는 자바스크립트가 사용 중지되었을 때 페이지가 비어 있지 않은지 확인하는 간단한 검사를 수행합니다. 앱이 점진적 개선을 얼마나 엄격하게 준수하는지에 대해서는 논란의 여지가 있지만, JavaScript가 사용 중지되면 페이지를 사용하려면 JavaScript가 필요하다는 내용의 알림일 뿐인 경우에도 모든 페이지에 최소한 일부의 정보가 표시되어야 한다는 점에는 큰 차이가 있습니다.

반드시 자바스크립트를 사용해야 하는 페이지의 경우 한 가지 방법은 <noscript> 요소를 사용하여 페이지에 자바스크립트가 필요하다고 사용자에게 알리는 것입니다. 이 방법은 빈 페이지보다 페이지, 브라우저 또는 컴퓨터에 문제가 있는지 여부를 사용자가 확신할 수 없게 만들기 때문에 낫습니다.

JavaScript가 사용 중지되었을 때 사이트가 어떻게 표시되고 실행되는지 확인하려면 Chrome DevTools의 JavaScript 사용 중지 기능을 사용하세요.

자료