점진적 개선은 최대한 많은 사용자가 사이트에 액세스할 수 있도록 하는 웹 개발 전략입니다. 핵심 원칙은 기본 콘텐츠와 페이지 기능은 가장 기본적인 웹 기술에만 의존해야 한다는 것입니다. CSS를 사용한 정교한 스타일 지정 또는 자바스크립트를 사용한 상호작용과 같은 향상된 환경은 이러한 기술을 지원하는 브라우저에 계층화될 수 있습니다. 하지만 기본 콘텐츠 및 페이지 기능은 CSS나 JavaScript에 의존해서는 안 됩니다.
Lighthouse 대체 콘텐츠 감사가 실패하는 경우
Lighthouse는 JavaScript를 사용할 수 없는 경우 일부 콘텐츠를 포함하지 않는 페이지를 신고합니다.
Lighthouse는 페이지에서 자바스크립트를 사용 중지한 다음 페이지의 HTML을 검사합니다. HTML이 비어 있으면 감사가 실패합니다.
페이지에 자바스크립트가 포함되지 않은 콘텐츠를 포함하는 방법
점진적 개선은 방대하고 논쟁의 여지가 있는 주제입니다. 어떤 사람은 점진적 개선 전략을 준수하기 위해 기본 콘텐츠와 페이지 기능에 HTML만 필요하도록 페이지를 계층화해야 한다고 말합니다. 이러한 접근 방식의 예는 Smashing Magazine의 점진적 개선: 정의 및 사용 방법을 참고하세요.
또 다른 전문가는 이 엄격한 접근 방식이 많은 최신 대규모 웹 애플리케이션에 실행 불가능하거나 불필요하다고 생각하고, 절대적으로 중요한 페이지 스타일에 <head> 문서에서 인라인 중요 경로 CSS를 사용할 것을 제안합니다.
Lighthouse 감사는 이러한 사항을 고려하여 간단한 검사를 수행하여 JavaScript가 사용 중지되었을 때 페이지가 비어 있지 않은지 확인합니다. 앱이 점진적 개선을 얼마나 엄격하게 준수하는지는 논쟁의 여지가 있지만, JavaScript가 사용 중지되었을 때 모든 페이지에 최소한 일부 정보를 표시해야 한다는 데 전반적으로 동의합니다. 이는 사용자에게 페이지를 사용하려면 자바스크립트가 필요하다는 알림일 뿐이더라도 마찬가지입니다.
반드시 자바스크립트를 사용해야 하는 페이지의 경우, 한 가지 방법은 <noscript> 요소를 사용하여 페이지에 자바스크립트가 필요하다고 사용자에게 알리는 것입니다. 이 방법은
빈 페이지보다 사용자가 페이지, 브라우저 또는 컴퓨터에 문제가 있는지 확신할 수
없기 때문에 낫습니다.
JavaScript가 사용 중지되었을 때 사이트가 어떻게 표시되고 작동하는지 확인하려면 Chrome DevTools의 JavaScript 사용 중지 기능을 사용하세요.