Flying Pages: 더 빠른 내비게이션과 향상된 사용자 경험을 위한 페이지 미리 로드
Flying Pages는 사용자가 클릭하기 전에 페이지를 미리 로드하여 즉시 로드되도록 합니다.
어떻게 작동하나요?
Flying Pages는 작은 JavaScript 코드(1KB gzipped)를 삽입하고 브라우저가 유휴 상태가 될 때까지 기다립니다. 그런 다음 뷰포트에 있는 페이지와 마우스 오버 시 페이지를 감지하여 미리 로드합니다.
Flying Pages는 지능적으로 작동하여 프리로딩이 서버를 다운시키거나 느려지지 않도록 합니다.
-
뷰포트 내 페이지 미리 로드 – ‘교차 관찰자(Intersection Observer)’를 사용하여 뷰포트(현재 보기 영역) 내의 링크를 감지하고 브라우저에 ‘프리페치(prefetch)’를 사용하여 미리 로드하도록 지시합니다. 사용 가능하지 않을 경우 xhr로 전환합니다 (Quicklink와 유사).
-
마우스 오버 시 페이지 미리 로드 – 링크에 마우스를 올렸을 때, 위의 ‘뷰포트’를 사용하여 아직 미리 로드되지 않았다면 Flying Pages가 즉시 프리페치합니다 (이는 Instant.page와 유사합니다).
-
초당 프리로드 수 제한 – 페이지에 링크가 너무 많으면 모든 링크를 동시에 프리페치하면 서버가 다운되거나 웹사이트가 방문자에게 느려질 수 있습니다. Flying Pages는 내장된 큐를 사용하여 초당 프리로드 수를 제한합니다 (기본값은 3 req/sec). 예를 들어, 뷰포트에 10개의 링크가 있는 경우, 이 모든 링크의 프리로드는 4초에 걸쳐 분산됩니다.
-
서버가 바쁠 경우 사전 로딩 중지 – 서버가 느리게 응답하거나 오류를 반환하기 시작하면 서버 부하를 줄이기 위해 사전 로딩이 중지됩니다.
-
사용자의 연결 및 선호 사항 이해 – 사용자가 2G와 같은 느린 연결을 사용 중이거나 데이터 절약 모드를 활성화했는지 확인합니다. 이 경우 Flying Pages는 아무것도 미리 로드하지 않습니다.