Speculation Rules API를 사용하여 웹 페이지를 즉시 로드하는 방법

게시 됨: 2024-02-17

2024년은 즉시 로딩이 웹 성능의 새로운 표준이 되고 온라인 비즈니스 소유자가 귀를 기울이는 시기가 될 것입니다.

하지만 Fast에서 Instant로의 전환은 한동안 진행되어 왔습니다.

2009년 초에 더 빠르고 효율적인 페이지 로딩을 위한 탐구로 인해 Chromium 팀은 나중에 link rel=”prerender”가 추가된 첫 번째 리소스 힌트를 만들었습니다.

사용자가 페이지로 이동하기 전에 백그라운드에서 후속 페이지를 로드하여 전환이 발생할 때 더 빠른 렌더링을 보장하므로 성능에 상당한 영향을 미칠 것으로 예상되었습니다.

그러나 이 사전 렌더링 버전은 효율성이 충분히 입증되지 않았으며 2017년에 더 이상 사용되지 않습니다.

사전 렌더링 지원 중단 의도

오늘날 Google은 Speculation Rules API에 대한 유망한 개발을 시작하여 완전 사전 렌더링에 대한 보다 정교한 접근 방식을 허용하고 진정으로 원활한 웹 탐색을 잠금 해제합니다.

Google의 추측 규칙 API란 무엇입니까?

Speculation Rules API는 추측적 로딩 전략을 통해 웹페이지 로딩 성능을 향상시키기 위해 Google에서 개발한 JSON 정의 API입니다.

예측 로딩에는 후속 페이지 탐색을 위한 리소스 예측 및 사전 로드가 포함되어 렌더링 시간이 빨라지고 사용자 경험이 향상됩니다. Google은 개발자에게 미리 가져오거나 미리 렌더링해야 하는 문서를 지정할 수 있는 보다 유연하고 표현력 있는 방법을 제공하기 위해 이 API를 도입했습니다.

Speculation Rules API에 대한 주요 세부정보:

문서 URL 대상 지정: 특정 리소스 파일을 대상으로 하는 기존 프리패치 메커니즘과 달리 Speculation Rules API는 문서 URL에 중점을 둡니다. 따라서 단일 페이지 애플리케이션(SPA)보다는 다중 페이지 애플리케이션(MPA)에 특히 적합합니다.

사전 렌더링 및 프리페칭: API는 사전 렌더링 및 프리페칭 전략을 모두 지원합니다. 사전 렌더링에는 보이지 않는 탭에 콘텐츠를 가져오고, 렌더링하고, 로드하는 작업이 포함되며, 사용자가 페이지를 탐색할 때 거의 즉시 활성화될 수 있습니다. 반면에 프리페칭은 지정된 페이지 리소스(예: 문서, 이미지, 스크립트 등)를 다운로드하고 저장하여 사용자가 나중에 해당 페이지를 탐색할 때 로드 시간을 최적화합니다.

브라우저 지원: API는 현재 Chrome, Edge, Opera, Chrome Android, Opera Android 및 WebView Android를 포함한 모든 Chromium 기반 브라우저와 호환됩니다. 전체 호환성 분석을 보려면 Mozilla 설명서를 참조하세요.

브라우저 호환성

다음 코드를 사용하여 브라우저가 API를 지원하는지 확인할 수도 있습니다.

브라우저 지원 코드 조각

더 이상 사용되지 않는 기능에 대한 대안: 더 이상 사용되지 않는 Chrome 전용 기능 과 같은 이전 기술에 대한 대안으로 사용되어 더 나은 성능과 더 표현력이 풍부한 구문을 제공합니다.
보안 고려 사항: 사이트 간 미리 가져오기에는 사용자 개인 정보를 보호하기 위한 제한 사항이 있습니다. 교차 사이트 미리 가져오기는 사용자에게 대상 사이트에 설정된 쿠키가 없는 경우에만 작동하므로 사용자 활동을 추적할 수 없습니다.

귀하의 웹사이트에서 Speculation Rules API를 사용하는 이유는 무엇입니까?

Speculation Rules API는원활한 탐색 경험을 위해 거의 즉각적인 페이지 로드를지원합니다.

향상된 페이지 로드 시간,향상된 사용자 만족도 및 잠재적인 SEO 이점은개발자가 이 기술을 채택하는 강력한 이유입니다.

페이지 탐색 사이의 대기 시간을 줄임으로써 사용자는 웹 사이트가 더욱 유연하고 반응이 빠른 것으로 인식합니다. 이는 LCP(Largest Contentful Paint), CLS(Cumulative Layout Shift) 및 INP(Interaction to Next Paint)가 급격히 감소하는 사이트의핵심 웹 바이탈(Core Web Vitals) 에서 명확하게 드러납니다.

즉각적인 탐색 경험을 통해 이탈률은 낮아지고 사용자 유지율은 높아집니다. 이는 온라인 플랫폼의 성공을 위한 중요한 지표입니다. 따라서 Speculation Rules API 통합의 전략적 가치를 강조합니다.

추측 규칙 API는 어떻게 작동하나요?

Google의 Speculation Rules API는 특정 리소스 파일이 아닌 문서 URL을 타겟팅하도록 설계되었습니다. Speculation Rules API는 어떤 문서를 미리 가져오거나 미리 렌더링할지 지정하기 위해 더욱 표현적이고 구성 가능한 구문을 도입합니다.

스크립트 type="speculationrules" 내에서 JSON 형식으로 정의된 구조를 사용하면 개발자는 사전 렌더링 및 사전 가져오기에 대한 규칙을 명확하게 표현할 수 있습니다. 이러한 향상된 유연성을 통해 예측 로딩을 미세 조정할 수 있습니다.

최근 Google은 자동 링크 찾기 옵션을 제공하는 Chrome 121의 Speculation Rules API에 대한 새로운 개선 사항을 발표했습니다.

링크 찾기 코드 조각

이는 다음을 통해 수행됩니다.

문서 출처 지정
URL 또는 CSS 선택기를 기반으로 페이지에서 링크 선택
"열심함" 수준 지정 - 열망(즉시), 보통(200ms 동안 마우스를 올리면), 보수적(마우스 또는 터치다운 시)

그러나 Speculation Rules API를 처음 사용하는 경우 아래의 다양한 설정을 먼저 테스트해 보는 것이 좋습니다.

Google의 추측 규칙 API를 사용하는 방법

Speculation Rules API를 사용하면 개발자는 사전 렌더링 및 사전 가져오기 프로세스를 최적화하기 위한 구조화된 접근 방식을 따를 수 있습니다.

설정

먼저 script type="speculationrules" 요소를 생성하고 그 안에 있는 JSON 구조에 추측 규칙을 정의하는 것부터 시작합니다.

추측 규칙은 메인 프레임의 헤드 또는 본문에 추가될 수 있습니다.

중요: 하위 프레임의 추측 규칙은 실행되지 않으며 사전 렌더링된 페이지의 추측 규칙은 사용자가 페이지 자체로 이동한 후에만 실행됩니다.

추측 규칙은 정적으로 또는 동적으로 포함될 수 있습니다.

정적 설정은 페이지의 HTML에서 수행됩니다. (다음 작업의 확실성이 높은 웹사이트에 적합합니다. 예를 들어 뉴스 웹사이트에서는 그날의 하이라이트를 미리 렌더링하려고 할 수 있습니다.)
동적 설정은 JavaScript를 통해 수행됩니다 (개인화된 사용자 경험이 많이 사용되는 웹사이트에 적합).

추측 규칙 API 동적 설정

중요: 동적 설정을 선택할 때는 항상 향후 사용 가능하게 될 향후 개발 및 사용 사례에 대한 지원 문서를 다시 참조하세요.

사전 렌더링 할 URL을 브라우저에 알리려면 페이지에 JSON 지침을 삽입하면 됩니다.

추측 규칙 API 코드 조각

마찬가지로미리 가져오기를 위해 다음 JSON 지침을 삽입하세요.

프리페치 코드 조각

페이지에 여러 추측 규칙을 추가할 수 있으며, 이 경우 브라우저에 다음 수준 중 하나를 지시할 수 있습니다.

URL 목록
다중 추측 규칙
하나의 추측 규칙 세트 내의 여러 목록

사전 렌더링/프리페치를 위한 경로 지정

예측적 로딩을 미세 조정하려면 사전 렌더링 및 사전 가져오기를 위한 경로를 지정해야 합니다. 개발자는 사용자 탐색의 중요성이나 가능성을 기준으로 페이지를 분류함으로써 예측 로딩 전략을 최적화할 수 있습니다.

그러나 다음과 같이 안전하지 않은 것으로 간주되는 일부 경로가 있습니다.

로그아웃 URL
언어 전환 URL
"장바구니에 추가" URL;
서버가 SMS 전송을 요청하는 로그인 흐름 URL(예: 2단계 인증(2FA)이 필요한 경우)
서버측 광고 전환 추적을 시작하는 URL
예를 들어 월별 무료 기사 허용량을 사용하여 사용자의 사용 제한을 트리거하는 URL입니다.

이러한 페이지를 캐싱에서 제외하는 것과 마찬가지로 해당 페이지를 미리 가져오고 미리 렌더링하지 않는 이유는 동적 변수와 관련이 있습니다.

이는 사용자 작업에 따라 값이 업데이트되는 콘텐츠에 민감한 페이지이며, 백그라운드에서 미리 로드하면 페이지의 오래된 상태가 표시될 위험이 매우 높습니다.

정확성과 절충점

Barry Pollard가 웹 세미나에서 "즉시 페이지 로드"에 대해 언급한 것처럼:

"[프리페칭 및 사전 렌더링 사용] 낭비 효율성(올바른 예측의 %)을 줄이고 예측 정확도(사용된 예측 수)를 높이기 위해 무엇을 할 수 있는지 파악하려는 균형이 중요합니다."

프리패치와 프리렌더링의 절충안

프리페칭은 많은 웹 페이지에서 복제할 수 있는 가장 안전한 접근 방식이지만 특정 리소스만 다운로드하면 되기 때문에 보상이 가장 낮습니다.

반면에 전체 페이지 사전 렌더링은 더 높은 보상을 제공하지만 다음과 같은 이점이 있으므로 자제해서 사용해야 합니다.

백그라운드에서 제한된 양의 작업만 실행할 수 있으므로 브라우저를 압도합니다.
상당한 대역폭과 CPU 리소스를 소비하므로 느린 네트워크나 리소스가 제한된 장치의 사용자에게는 성능 저하가 발생할 수 있습니다.
방문자가 페이지를 탐색하지 않으면 리소스 낭비가 커집니다.

사전 렌더링을 올바르게 설정하려면 사용자의 행동을 고려하고 웹 사이트 전반의 일반적인 탐색을 분석해야 합니다. 히트맵과 Google Analytics 흐름도를 사용하면 필수 경로를 식별하고 예측 로딩 실험을 시작할 수 있습니다.

페이지가 사전 렌더링되었는지 확인하려면 PerformanceNavigationTiming 의 0이 아닌 activateStart 항목을 사용하세요. 그런 다음 맞춤 측정기준을 사용하여 이를 기록할 수 있습니다.

맞춤 측정기준 사전 렌더링

이렇게 하면 사전 렌더링과 다른 유형의 탐색 간의 비율을 측정할 수 있습니다.

또한 추측 규칙을 최적화하고 더 높은 적중률과 더 낮은 리소스 낭비를 달성하려면 이후에 방문하지 않는 사전 렌더링된 페이지 수를 측정하는 것이 중요합니다.

사전 렌더링이 요청되었음을 나타내기 위해 추측 규칙이 삽입될 때 분석 이벤트를 실행하여 이를 수행할 수 있습니다. 그런 다음 이러한 이벤트 수를 실제 사전 렌더링 페이지 조회수와 비교합니다.

아니면…

NitroPack의 Navigation AI를 사용한 자동화된 페이지 사전 렌더링 고려

Navigation AI는 NitroPack의 AI 기반 웹 브라우징 최적화 프로그램으로, 고객 여정 중에 사용자 행동을 적극적으로 예측하고 분석하여 전체 페이지를 미리 렌더링합니다.

Navigation AI는 사이트 소유자가코드 한 줄도 작성하지 않고도 데스크탑과 모바일에서 즉각적인 탐색 경험을 제공할 수 있도록 지원하여 고객 참여와 전환율을 높입니다.

참고: Navigation AI는 별도의 제품이지만 NitroPack과 100% 호환되며 사이트 소유자에게 이점을 더욱 확장합니다.

Navigation AI 대기자 명단에 등록하고 사이트에서 즉각적인 사용자 경험을 잠금 해제하세요 →

NitroPack의 Navigation AI는 Speculation Rules API를 기반으로 구축되었으며 사전 렌더링 시나리오에서 높은 적중률과 리소스 효율성을 달성하기 위한 자동화된 솔루션을 제공합니다.

내비게이션 AI 작동 방식

Navigation AI는 데이터를 기반으로 페이지 로드에 대한 AI 강화 초기 예측을 적용하고 사용자 행동을 분석함으로써 예측을 조정하고 Speculation Rules API에 실제로 방문할 페이지를 사전 렌더링하도록 정확하게 지시할 수 있습니다.

이 페이지가 이미 배경에 그려져 있기 때문에 결과적으로 페이지가 즉시 로드됩니다. 모바일 장치에서 Navigation AI는 사용자가 페이지에서 어디에 있는지 식별하고 작은 뷰포트를 통해 사용자가 탭할 위치를 쉽게 예측할 수 있습니다.

내비게이션 AI는 1,200개 웹사이트를 기반으로 이미 눈부신 성과를 보이고 있습니다.

결과 #1: Navigation AI를 사용하는 웹 페이지는 Navigation AI가 없는 경우 6.12초에 비해 ~2.86초의 로드 시간을 일관되게 표시합니다.

Navigation AI가 있는 경우와 없는 경우의 페이지 로드 시간

결과 #2: Navigation AI를 사용하면 사전 렌더링된 페이지에서 LCP가 85%(3.1초에서 0.4초로) 향상되고 CLS가 80%(0.3초에서 0.06초로) 향상되는 것으로 나타났습니다.미리 가져온 페이지의 경우 Navigation AI는 LCP를 52%(3.1초에서 1.5초로) 늘립니다.

Navigation AI를 통한 성능 지표 개선

결과 #3: Navigation AI를 사용하면 전체 웹 사이트의 성능 지표가 크게 향상됩니다. LCP는 15%, CLS는 8%, TTFB는 26%입니다.

내비게이션 AI가 LCP, CLS, TTFB에 미치는 영향

대기자 명단에 등록하여 내비게이션 AI에 액세스하세요 →

추측 규칙 API 및 WordPress

"즉각적인 페이지 로딩" 웹 세미나에서 Google의 개발자 관계 엔지니어인 Adam Silverstein은 WordPress 핵심 성능 팀이 새로운 Speculation Rules API의 보다 안정적인 구현을 위해 노력하고 있음을 밝혔습니다.

현재는 생태계의 사이트 소유자와 개발자가 API 기능의 작은 부분을 사용하여 핵심 부분으로 만들기 전에 효율성과 채택 속도를 테스트하는 데 중점을 두고 있습니다. WordPress 사용자가 지금까지 활용할 수 있는 내용은 다음과 같습니다.

Performance Lab 플러그인의 모듈
Speculation Rules API 프런트엔드만 구현하는 독립형 플러그인(보수적인 "열심" 수준을 적용하지만 개발자는 동작을 자유롭게 수정할 수 있음)

WP-admin 경로는 기본적으로 제외되지만 우선순위를 정할 경로를 결정하는 것은 WP 개발자의 몫입니다.

WordPress 핵심 성능 팀은 생태계의 플러그인 내에서 보다 정교한 구현을 위해 노력하고 있습니다. 이는 어떤 경로가 최우선 순위이고 어떤 경로가 가지 말아야 할지를 알아낼 때 개발자가 해야 하는 일부 힘든 작업을 완화하는 것을 목표로 합니다.

투기 규칙에는 어떤 개선이 있을 예정인가요?

현재 추측 규칙은 동일한 탭 내의 페이지로 제한되어 있지만 이러한 제한을 줄이기 위한 노력이 진행 중입니다.

사전 렌더링은 기본적으로 동일한 출처 페이지로 제한됩니다. 그러나 Chrome 119의 최근 업데이트에서는 이제 동일한 사이트 교차 출처 페이지에 대한 사전 렌더링을 지원하므로 HTTP 헤더를 통한 선택이 필요합니다.

향후 버전에서는 사전 렌더링을 원본 간 페이지로 확장하고 새 탭에서 허용할 수 있습니다. Speculation Rules API는 확장되어 문서 규칙에 대한 점수와 구문을 도입하고 마우스를 눌렀을 때 링크를 사전 렌더링하는 등 더 많은 유연성을 제공하도록 설정되었습니다.

Chrome에서 진행 중인 실험에서는 추가 기능을 탐색하고 있으며 사이트에서는 오리진 트라이얼에 참여하여 향후 추가될 수 있는 기능을 테스트하고 피드백을 제공할 수 있습니다.