GigaOM Radar Edge Platform Leader & Outperformer 2024 | 
인스턴트 전환: 예측 사전 추출을 사용하여 Edge 캐시를 브라우저로 확장하는 방법
탐색 지연이 전환율을 낮추고 이탈률을 높인다는 것은 일반적인 지식입니다. 트래픽이 많은 사이트에서 전환을 관리하고 추적하는 사람들을 위해,이 시나리오가 잘 진행되는 것을 보셨을 것입니다. 바라건대, 여러분은 역행렬도 보았을 것입니다. 탐색 및 페이지 로드 시간이 개선되면 전환율이 증가하는 것을 확인했습니다.
성능과 변환이 함께 진행됩니다.
CDN 기업은 종종 이 그림을 예로 사용하여 서비스에 대한 ROI를 입증합니다. 해결책은 간단합니다. 정적 콘텐츠를 최대한 사용자와 가까운 위치에 배치하여 전송 속도를 높이고 ROI를 높일 수 있습니다. 방문객들은 더 오래 머물고 더 많은 구매를하고 더 자주 돌아올 것입니다. 말이 되죠, 그렇죠? 이 글을 읽고 계신다면, 아마 이미 알고 계실 겁니다. 하지만 그 다음은 무엇일까요? 한 걸음 더 나아가 웹 경험에서 네트워크 응답 시간을 완전히 없애고 네이티브 앱과 유사하게 만들 수 있을까요? 지연을 0으로 줄일 수 있다면 전환율을 극대화하지 않을까요? 사용자가 클릭하기 전에 브라우저에서 에지 콘텐츠를 캐시할 수 있다면 네이티브 앱과 유사하게 전환이 즉각적으로 이루어질 수 있습니다.
“사이트 방문자를 위한 네이티브 앱과 비슷한 웹 애플리케이션 성능을 제공할 수 있을까요?”
Edgio와 함께 할 수 있습니다.
먼저 네이티브 모바일 애플리케이션의 장점을 살펴보겠습니다. 대부분의 모바일 앱 사용자들은 백그라운드에서 어떤 일이 일어나고 있는지 모르지만, 애플리케이션을 다운로드하고 디바이스에 설치함으로써 얻을 수 있는 성능 향상에 대해 확실히 감사하고 있습니다. 간단합니다. 앱을 로드하고 화면을 탐색하고 전환을 즉시 수행할 수 있습니다. 한 가지를 다음 항목으로 탭하고 장바구니에 품목을 추가하여 마찰 없는 경험을 즐기십시오. 드물게 사용자가 “로딩” 표시기를 볼 수 있으며, 그들이 할 때, 그것은 의미가; 체크 아웃하는 동안 지불 정보를 제출하는 것과 같은. 이 모든 것은 현명한 개발과 유능한 플랫폼으로 가능합니다.
Edgio의 예측 사전 추출을 입력합니다. 이제 웹 사용자도 동일한 유형의 경험을 즐길 수 있습니다.
많은 CDN 회사들은 오리진에서 엣지로 콘텐츠를 가져오는 데 도움이 되는 “프리페치”라고 하는 캐시 워밍 옵션을 제공합니다. 훌륭한 첫 걸음이지만, 모든 것을 얻을 수는 없습니다. 사용자는 콘텐츠가 장비로 이동하는 동안 기다려야 합니다. 그렇다면 어떻게 한 걸음 더 나아갈 수 있을까요? 오리진에서 에지까지 그리고 클릭하기 전에 브라우저에 이르기까지 Edgio의 프리페치는 에지를 장치에 직접 가져오는 브라우저 통합입니다. 기존 CDN은 할 수 없는 것.
“마술처럼 들리는데, 어떻게 작동합니까?”
좋은 질문과 우리는 당신의 회의론을 완전히 이해합니다. 그것이 어떻게 작동하는지 이해하려면, 우리는 기초부터 시작해야합니다. 아래의 간략한 설명을 확인한 다음 프리페치의 핵심에 대해 살펴보겠습니다.
프리페치란 무엇인가… 정말?
브라우저가 이해하는 프리페치의 정의에 대해 MDN을 살펴보겠습니다. 링크 프리페치는 나중에 리소스가 확보될 때 필요할 수 있는 자산을 다운로드해야 한다는 힌트입니다. 먼저 페이지가 로드되고 비동기 요청 처리를 시작합니다. 네트워크와 CPU가 확보되면 브라우저에서 문서에 추가한 추가 리소스를 가져옵니다. 기본 프리페치의 경우 브라우저가 이해하는 대로 다음과 같이 약간 보일 수 있습니다.
<head>
…
<link rel="prefetch" href="/next-page.html" />
<link rel="prefetch" href="/next-image.jpg" />
…
</head>
결과적으로 사용자가 원본 페이지와 상호 작용하는 동안 브라우저에서 next-page.html 및 next-image.jpg 가 다운로드되고 캐시됩니다. 클릭하는 경우 다음 페이지의 골격과 로컬로 이미 캐시된 추가 이미지가 즉시 나타납니다. 물론, 추가 CSS, JS 및 기타 자산을 다운로드해야 할 수도 있지만, 필요하기 전에 브라우저에 가장 중요한 부분을 가져왔습니다. 좋은 시작이며 예제에서 알 수 있듯이 작은 사용 사례에 매우 적합합니다. 순차적 인 여행 사이트, 어쩌면 방문 페이지 또는 2 개지만 당신이 아마 생각하고있는 것은 이것입니다 …
“내 사이트에는 수천 개의 이미지와 페이지가 있지만 어떻게든 할 수 없습니다.
모든 페이지의 머리글에 모든 이미지와 페이지를 연결할 수는 없습니까?”
아니, 그럴 필요 없어 Edgio의 Predictive Prefetching 및 Deep Fetching 플러그인을 사용하면 사용자의 브라우저가 에지 네트워크와 연동하여 중요한 리소스를 끌어오는 동안 엔지니어링 및 추측을 우회할 수 있습니다.
좋아요, 그럼 어떻게 할 수 있을까요?
Edgio의 예측 사전 추출은 서비스 작업자라는 것을 사용합니다. SW는 모든 현대 브라우저가 이해하는 무언가이며, 실제로 Chrome 40 이후 지원되었습니다. SW는 기본 요청이 유휴 상태일 때 작동하는 사이트와 연결된 백그라운드 프로세스입니다. 프런트 엔드 개발이나 보다 현대적인 진보적 웹 애플리케이션 분야에서 일해 본 적이 있다면 서비스 작업자에게 노출되었을 수 있습니다. 현재 사이트에서 서비스 작업자를 사용하지 않는 경우 현재 사용자 환경에 영향을 주지 않고 쉽게 추가할 수 있습니다. Edgio는 사전 구축된 서비스 작업자 중 한 명과 함께 쉽게 설정할 수 있도록 도와드립니다.
서비스 작업자의 등록 및 설치는 프런트 엔드 프레임워크의 사용 여부에 따라 달라질 수 있습니다. 여러 가지 방법에 대한 자세한 지침을 보려면 설명서를 확인하십시오.
이제 서비스 작업자를 추가하고 사이트에 등록했으므로 수행해야 할 작업이 있습니다. Edgio Prefetch 패키지를 추가한 후에는 사용자의 브라우저를 작동시키기 위해 경로를 추가할 시간입니다. 기본적으로 서비스 작업자 캐시는 2분 동안 저장됩니다. 성능을 극대화하기 위해 경로 파일에서 이를 조정할 수 있습니다.
import {Router} from '@edgio/core';
export default new Router()
.get('/api/products/:id.json', ({cache, proxy}) => {
cache({
edge: {
maxAgeSeconds: 60 * 60,
staleWhileRevalidateSeconds: 60 * 60 * 24,
},
browser: {
serviceWorkerSeconds: 60 * 60,
},
});
});
간단한 규칙 하나로 24시간 동안 API 응답을 검증하여 최신 상태를 유지하도록 Edge를 구성했으며 브라우저가 이를 프리페치할 뿐만 아니라 한 시간 동안 기다리도록 지시했습니다.
Edgio에 익숙하다면 현지에서 테스트할 수 있습니다. 브라우저의 개발자 도구를 열고 사이트를 정독하는 동안 네트워크 탭을 확인합니다. 탐색할 때 서비스 작업자가 라우트 파일의 링크에 대한 원시 HTML을 잡는 것을 볼 수 있습니다. 독특한 기어 아이콘과 “service-worker”가 이니시에이터로 표시되어 있습니다.
애플리케이션 탭을 확인하고 캐시를 살펴보면 서비스 작업자 캐시를 별도로 볼 수도 있습니다.
Edgio 프리페치 스크립트는 사용자가 클릭할 수 있도록 링크를 사용자의 뷰포트로 끌어오는 역할을 합니다. 클릭하는 경우 다음 페이지로 바로 이동합니다.
좋은 시작, 하지만 당신은 또한 가져올 필요가 제품 또는 기사 이미지와 콘텐츠 무거운 사이트가있는 경우? 그렇다면 Edgio의 독특한 Deep Fetch 플러그인을 사용할 때입니다.
Deep Fetch 플러그인은 쉽게 사용할 수 있습니다. 기존 프로젝트로 플러그인을 가져오고 플러그인이 찾아야 할 몇 가지 HTML 선택기를 선택하기만 하면 됩니다. 전자 상거래 사이트를 운영하는 경우 제품 페이지가 템플릿으로 작성될 가능성이 높습니다. LCP는 다음과 같이 보일 수 있습니다. 모든 페이지가 다른 이미지를 가지고 있지만 “main-image” CSS 선택기를 사용하여 사이트 전체에서 스타일을 유지할 수 있습니다.
<img src=”/images/product-image.jpg” class=”main-image” />
Deep Fetch 어레이에 “main-image” 선택기를 추가하고 서비스 작업자가 작업하도록 합니다.
import {Prefetcher} from '@edgio/prefetch/sw';
import DeepFetchPlugin from '@edgio/prefetch/sw/DeepFetchPlugin';
new Prefetcher({
plugins: [
new DeepFetchPlugin([
{
selector: 'img.main-image',
maxMatches: 1,
attribute: 'src',
as: 'image',
},
]),
],
});
간단히 말해서, Deep Fetch 플러그인에서 main-mage 선택기를 찾고 src를 이미지로 프리페치하도록 합니다. 이 예제에서는 maxMatches를 1로 설정했습니다. 즉, 첫 번째 일치 항목만 프리페치합니다. 그러나 거기서 멈출 필요는 없습니다. 프리페치할 자산 유형에 따라 maxMatches를 조정합니다.
이제 서비스 작업자가 뷰포트에서 링크를 프리페치하고 해당 선택기의 HTML을 스캔한 다음 해당 이미지에 대한 프리페치 링크를 추가합니다. 사용자가 이미지를 클릭하면 페이지가 즉시 표시됩니다.
“오리진은 어떻습니까? 모든 사용자의 트래픽 증가를 지원할 수 없습니다.”
에드지오가 당신을 덮었습니다. Akamai의 차세대 WebCDN은 자산이 캐싱되지 않은 경우 프리페치 요청을 오리진으로 전달하지 않습니다. 에지오는 412로 답할 것이다. 사용자가 캐시되지 않은 링크를 클릭하면 다른 요청과 마찬가지로 오리진으로 전달되며 사용자가 보유한 프록시 규칙을 준수합니다. Edgio를 사용하면 출처가 안전하다는 것을 확신할 수 있습니다. 사이트 전체의 자연 트래픽은 캐시를 따뜻하게 하고 412개의 응답이 감소합니다. 사이트를 간결하게 유지하려면 유효하지 않은 항목을 새로 찾는 동안 제공할 수 있도록 유효하지 않은 항목을 다시 검증하는 동안 사용해야 합니다.
크롬의 개발자 도구를 파헤치지 않고도 이 모든 것을 실제로 보고 싶으신가요? 에드조는 그곳에서도 도움을 줄 수 있다. 예측 프리페칭이 고객에게 얼마나 큰 가치를 제공하는지를 살펴본 결과, Edgio 콘솔 내부에 특수 목적용 대시보드를 갖추고 있습니다. 프리페치 요청과 적중률 모두에 대해 프리페치 성능을 쉽게 모니터링할 수 있습니다.
이제 Edgio의 Predictive Prefetching이 사용자에게 Edge 캐시를 제공하여 사용자에게 진정으로 놀라운 디지털 경험을 제공하고 전환율을 높이며 이탈률을 줄이는 방법을 확인해 보십시오.
