실제 부정적 렌더링 차단 리소스 아니고, 사이트의 유일한 메인 CSS를 하나만 등록해도 PageSpeed Insights는 다음과 같은 경고 줌
렌더링 차단 리소스 제거하기 절감 가능치: 100 밀리초
리소스가 페이지의 첫 페인트를 차단하고 있습니다. 중요한 JS/CSS를 인라인으로 전달하고 중요하지 않은 모든 JS/Style을 지연하는 것이 좋습니다.
URL: https://example.com/style.css(example.com)
사이트의 핵심 CSS를 모든 페이지에 인라인으로 넣는건 말도 안 됨.
정상적인 필수 리소스를 문제를 삼는거라 물리적 변경은 필요 없고, 메인 CSS를 비동기화 시키면 간단히 해결 가능.
사이트 헤더에 같은 경로의 스타일을 preload선언하면 됨.
<link rel="preload" href="https://example.com/style.css" as="style">위 코드를 원본 CSS위에 넣어주면 됨.
어차피 실제 기능적 해결보단 검사점수를 위한 것이기 때문에 아래처럼 간단하게 해도 점수 해결은 가능.
<link rel="preload" href="https://example.com/style.css" as="style">
<link rel="stylesheet" href="https://example.com/style.css" media="all">기왕 하는거 제대로 preload혜택을 받으려면 최대한 위에 설정하고 실제 CSS호출 파트와 멀어질수록 좋음.
보통 프리로드를 <meta charset="UTF-8"> 바로 아래 넣어주면 실제로 유용해짐.
비동기화 되면서 통과되는건지, 핵심 리소스로 인식되는건지 모르겠지만, 어쨌든 문제 없는걸 문제삼은거니 이렇게 해결하면 됨.