이 규칙은 PageSpeed Insights에서 페이지의 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 추가적인 네트워크 왕복이 필요함이 감지되면 트리거됩니다.
개요
필요한 데이터 양이 초기 혼잡 윈도우(일반적으로 14.6 KB 압축)를 초과하면 서버와 사용자 브라우저 간에 추가 왕복이 필요합니다. 모바일 네트워크와 같이 지연 시간이 긴 네트워크를 사용하는 사용자의 경우 이로 인해 페이지 로드가 크게 지연될 수 있습니다.
권장사항
페이지 로드 속도를 높이려면 페이지에서 스크롤 없이 볼 수 있는 콘텐츠를 렌더링하는 데 필요한 데이터(HTML 마크업, 이미지, CSS, 자바스크립트)의 크기를 제한하세요. 몇 가지 방법은 다음과 같습니다.스크롤 없이 볼 수 있는 중요한 콘텐츠를 먼저 로드하도록 HTML 구성
페이지의 주요 콘텐츠를 먼저 로드하세요. 서버의 초기 응답에서 페이지의 중요한 부분을 렌더링하는 데 필요한 데이터를 즉시 보내고 나머지를 지연하도록 페이지를 구성하세요. 이렇게 구성하려면 CSS를 두 부분, 즉 콘텐츠 중 ATF 부분의 스타일 지정을 담당하는 인라인 부분과 지연해도 되는 부분으로 분할해야 할 수 있습니다.
사이트의 로드 속도를 높이기 위해 재구성하는 방법에 관한 다음 예를 고려하세요.
- HTML에서 제3자 위젯을 로드한 후 주요 콘텐츠를 로드하는 경우 주요 콘텐츠를 먼저 로드하도록 순서를 변경합니다.
- 사이트에서 탐색 사이드바와 자료가 포함된 2열 디자인을 사용하는데 HTML에서 사이드바를 내용보다 먼저 로드하는 경우 내용을 먼저 로드해 보세요.
리소스에서 사용하는 데이터의 양 축소
사이트를 여러 기기에서 잘 작동하고 중요한 콘텐츠를 먼저 로드하도록 다시 디자인했으면 다음 기술을 사용하여 페이지 렌더링에 필요한 데이터의 양을 줄입니다.- 리소스 축소: 불필요한 공백과 주석을 삭제하면 HTML, CSS, 자바스크립트를 축소할 수 있습니다. 리소스의 변수 이름을 변경하는 도구를 사용하여 세부적으로 최적화할 수 있습니다.
- 가능하면 이미지 대신 CSS 사용
- 압축 사용