즉각적인 페이지 탐색을 위해 Chrome에서 페이지 사전 렌더링

Barry Pollard

게시일: 2022년 12월 2일, 최종 업데이트: 2025년 10월 23일

Chrome팀은 사용자가 탐색할 가능성이 있는 미래 페이지의 전체 사전 렌더링을 다시 도입했습니다.

사전 렌더링의 간략한 역사

이전에는 Chrome에서 <link rel="prerender" href="/next-page"> 리소스 힌트를 지원했지만 Chrome 이외의 환경에서는 널리 지원되지 않았으며 표현력이 뛰어난 API도 아니었습니다.

링크 rel=prerender 힌트를 사용하는 이 기존 사전 렌더링은 대신 향후 페이지에 필요한 리소스를 가져오지만 페이지를 완전히 사전 렌더링하거나 JavaScript를 실행하지는 않는 NoState Prefetch를 선호하여 지원 중단되었습니다. NoState Prefetch는 리소스 로드를 개선하여 페이지 성능을 개선하는 데 도움이 되지만 전체 사전 렌더링처럼 즉각적인 페이지 로드를 제공하지는 않습니다.

이제 Chrome팀에서 Chrome에 전체 사전 렌더링을 다시 도입했습니다. 기존 사용과의 혼동을 방지하고 사전 렌더링의 향후 확장을 허용하기 위해 이 새로운 사전 렌더링 메커니즘은 <link rel="prerender"...> 구문을 사용하지 않습니다. 이 구문은 NoState Prefetch에 그대로 유지되며 향후 언젠가 지원이 중단될 예정입니다.

페이지는 어떻게 사전 렌더링되나요?

페이지는 다음 네 가지 방법 중 하나로 사전 렌더링할 수 있으며, 모두 탐색 속도를 높이는 것을 목표로 합니다.

1. Chrome 주소 표시줄('검색주소창'이라고도 함)에 URL을 입력하면 이전 방문 기록을 기반으로 해당 페이지를 방문할 가능성이 높다고 판단되는 경우 Chrome에서 페이지를 자동으로 사전 렌더링할 수 있습니다.
2. 북마크 바를 사용할 때 포인터를 북마크 버튼 중 하나 위로 가져가면 Chrome에서 페이지를 자동으로 사전 렌더링할 수 있습니다.
3. Chrome 주소 표시줄에 검색어를 입력하면 검색엔진의 지시에 따라 Chrome에서 검색 결과 페이지를 자동으로 사전 렌더링할 수 있습니다.
4. 사이트는 Speculation Rules API를 사용하여 사전 렌더링할 페이지를 Chrome에 프로그래매틱 방식으로 알릴 수 있습니다. 이는 <link rel="prerender"...>의 기능을 대체하며 사이트가 페이지의 추측 규칙에 따라 페이지를 사전 렌더링할 수 있도록 합니다. 이러한 요소는 페이지에 정적으로 존재할 수도 있고 페이지 소유자가 적합하다고 판단하는 경우 JavaScript에 의해 동적으로 삽입될 수도 있습니다.

이러한 각 경우에 사전 렌더링은 페이지가 보이지 않는 백그라운드 탭에서 열린 후 사전 렌더링된 페이지로 포그라운드 탭을 대체하여 '활성화'된 것처럼 작동합니다. 페이지가 완전히 사전 렌더링되기 전에 활성화되면 현재 상태는 '포그라운드'가 되고 계속 로드되므로 여전히 좋은 시작을 할 수 있습니다.

사전 렌더링된 페이지는 숨겨진 상태로 열리므로 방해 행위를 유발하는 여러 API (예: 프롬프트)가 이 상태에서 활성화되지 않고 페이지가 활성화될 때까지 지연됩니다. 아직 불가능한 소수의 경우에는 사전 렌더링이 취소됩니다. Chrome팀은 사전 렌더링 취소 이유를 API로 노출하고 이러한 특이 사례를 더 쉽게 식별할 수 있도록 DevTools 기능을 개선하기 위해 노력하고 있습니다.

사전 렌더링의 영향

사전 렌더링을 사용하면 다음 동영상에 표시된 것처럼 페이지를 거의 즉시 로드할 수 있습니다.

예시 사이트는 이미 빠른 사이트이지만, 이 경우에도 사전 렌더링이 사용자 환경을 개선하는 방법을 확인할 수 있습니다. 따라서 LCP가 거의 0에 가깝고, CLS가 감소하며 (초기 뷰 전에 로드 CLS가 발생하므로), INP가 개선되는 등 사이트의 Core Web Vitals에도 직접적인 영향을 미칠 수 있습니다 (사용자가 상호작용하기 전에 로드가 완료되어야 함).

페이지가 완전히 로드되기 전에 활성화되더라도 페이지 로드를 미리 시작하면 로드 환경이 개선됩니다. 사전 렌더링이 진행되는 동안 링크가 활성화되면 사전 렌더링 페이지가 기본 프레임으로 이동하여 계속 로드됩니다.

하지만 사전 렌더링은 추가 메모리와 네트워크 대역폭을 사용합니다. 사용자 리소스를 소모하는 과도한 사전 렌더링을 하지 않도록 주의하세요. 페이지로 이동할 가능성이 높은 경우에만 사전 렌더링합니다.

분석에서 실제 성능 영향을 측정하는 방법에 대한 자세한 내용은 성능 측정 섹션을 참고하세요.

Chrome의 주소 표시줄 예상 검색어 보기

첫 번째 사용 사례의 경우 chrome://predictors 페이지에서 URL에 대한 Chrome의 예측을 확인할 수 있습니다.