예측 프리패치를 통해 엣지 캐시를 브라우저로 확장하기
속도와 전환의 관계
사용자 여정 지연이 전환율을 낮추고 이탈률을 높인다는 것은 이미 널리 알려진 사실입니다. 반대로, 탐색 및 페이지 로드 시간이 개선되면 전환은 증가합니다.
성능과 전환은 밀접한 관계가 있습니다. 사용자에게 가까운 정적 콘텐츠를 가져옴으로써 웹사이트의 콘텐츠 전송 속도를 높이면 사용자는 더 오래 머무르고, 더 자주 방문하며, 결과적으로 더 많이 구매합니다. ROI가 높아지는 것이죠.
한 단계 더 나아가 사용자 경험에서 네트워크 응답 시간을 완전히 없애고 네이티브 앱(어플리케이션)과 유사하게 만든다면 어떨까요? 속도 지연을 0으로 만든다면, 다시 말해 사용자가 클릭하기 전에 콘텐츠를 가져올 수 있다면 자연스럽게 전환도 극대화될 것입니다.
에지오의 예측 프리패치
불가능해 보여도, 에지오와 함께라면 가능합니다. 에지오는 예측 프리패치를 통해 사용자가 클릭하기 전에 콘텐츠를 미리 가져옵니다.
프리패치란?
프리패치는 원래 윈도우에서 사용되던 기능이었습니다. 부팅 혹은 응용프로그램 사용 시 이를 모니터링하여 얻은 정보로 파일을 미리 생성해두고, 이후에 재부팅 하거나 응용프로그램을 다시 실행할 경우 로딩 속도 향상을 위해 사용했습니다. 즉 윈도우에서 사용하는 프로그램 파일 등을 빠르게 로딩해서 프로그램 실행 시간을 줄여 주는 것을 목적으로 사용되던 것이 윈도우에서의 프리패치입니다. 인터넷에서의 캐시와 비슷한 기능입니다.
에지오의 프리패치는 에지를 브라우저까지 확장하여 최상의 전송 성능을 제공합니다. 실행될 가능성이 높은 에지 캐시에서 페이지 및 API 호출을 미리 가져와 사용자의 브라우징 경험을 가속합니다. 에지를 장치로 직접 가져오는 브라우저 통합 기능이라고 보시면 됩니다.
프리패치의 기능
1. link rel=”prefetch”
link rel=”prefetch”를 사용하여 사용자가 방문할 문서 및 페이지의 리소스를 미리 가져올 수 있습니다. A 페이지에 프리패치 힌트를 넣으면, 브라우저는 A 페이지의 로드를 완료한 후 지정된 문서 B, C 등의 리소스를 미리 가져와서 캐시에 저장합니다. 사용자가 프리패치된 문서 B를 클릭하면 브라우저 캐시에서 빠르게 제공해 해당 페이지의 리소스가 즉시 표시됩니다. 물론 CSS, JS 및 기타 자산을 추가로 다운로드해야 할 수도 있지만, 사용자 여정의 가장 중요한 부분을 미리 브라우저로 가져올 수 있습니다.
2. 대규모 연결
하지만 모든 페이지에 프리패치를 사용해 페이지와 리소스를 연결하기는 어렵습니다. 이때, 에지오의 예측 프리패치 및 Deep Fetch 플러그인을 사용하면 사용자의 브라우저가 에지 네트워크와 함께 작동하여 중요한 리소스를 끌어오는 동안 엔지니어링 및 추측 작업을 우회할 수 있습니다.
에지오의 예측 프리패치는 서비스 워커를 사용합니다. 서비스 워커는 서비스 워커는 사이트와 연결된 백그라운드 프로세스로, 웹, 브라우저, 네트워크 사이의 프록시 서버 역할을 하죠. 연관 페이지를 제어하고 리소스를 세부적으로 캐싱할 수 있습니다. 또한 에지오의 프리패치 스크립트는 사용자가 클릭할 수 있도록 사용자의 뷰포트로 링크를 가져오는 작업을 합니다. 클릭하면 즉시 다음 페이지로 이동할 수 있습니다.
이미지나 콘텐츠가 많은 사이트는 어떻게 해야 할까요? 이러한 대규모 연결의 경우에는 Deep Fetch 플러그인을 사용하면 됩니다. Deep Fetch 플러그인을 기존 프로젝트로 가져와서 활성화하면, 사용자가 이미지를 클릭했을 때 페이지가 즉시 표시되도록 작업할 수 있습니다.
3. 오리진 트래픽
마지막으로, 에지오의 웹 CDN은 자산이 캐시되지 않으면 오리진에 프리패치 요청을 전달하지 않습니다. 대신 412 에러 코드를 띄웁니다. 사용자가 미리 캐시되지 않은 링크를 클릭하면 다른 요청과 마찬가지로 오리진에 전달하고 현재 사용 중인 프록시 규칙을 준수합니다. 자연적인 트래픽이 사이트 내에서 활성화되고, 캐시나 412 에러 응답은 줄어들게 됩니다.
오늘은 에지오가 제공하는 예측 프리패치의 개념 및 기능에 대해서 알아보았는데요. 프리패치를 통해 사용자 여정을 빠르고 매끄럽게 구축하는 것은 전환 및 매출에도 긍정적으로 작용합니다. 여러분도 사용자에게 놀라운 디지털 경험을 제공하고, 전환율을 높이고 이탈률을 줄이는 방법을 직접 경험해보세요. 에지오의 예측 프리패치와 함께 놀라운 성과를 달성하세요.
