설명
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는 아무것도 미리 로드하지 않습니다.
지원
플라잉프레스의 프리미엄 제품
플라잉프레스의 무료 플러그인
설치
WordPress 내부에서
- ‘플러그인 > 새로 추가’를 방문하세요
- ‘Flying Pages’ 검색
- 플러그인 페이지에서 Flying Pages for WordPress를 활성화하세요.
- ‘설정 -> Flying Pages’로 이동하여 구성하세요.
수동으로
flying-pages
폴더를/wp-content/plugins/
디렉터리에 업로드하세요.- WordPress의 ‘플러그인’ 메뉴에서 Flying Pages 플러그인을 활성화하세요.
- ‘설정 -> Flying Pages’로 이동하여 구성하세요.
FAQ
-
Flying Pages를 설치한 후 GTmetrix 완전 로드 시간이 증가했습니다. 어떻게 해야 하나요?
-
Flying Pages는 모든 다른 리소스의 다운로드가 완료되고 브라우저가 유휴 상태가 되었을 때 프리로딩을 시작합니다. 이는 TTFB, First Contentful Paint 또는 Time to Interactive에 영향을 미치지 않습니다. GTmetrix에서 완전히 로드되는 시간에 대해 걱정된다면 설정에서 ‘프리로딩 시작 지연 시간’을 더 높은 숫자로 설정하거나 마우스 오버 시에만 프리로딩하도록 설정하세요.
-
Flying Pages가 작동하는지 확인하는 방법은?
-
동영상을 보고 ‘프리페치 캐시’를 확인하세요 (만약 ‘로그인된 관리자에 대해 비활성화’를 활성화했다면 시크릿 모드 창에서 테스트해 보세요)
-
GTmetrix/Pingdom/Google PageSpeed Insights에서 개선 사항이 보이지 않습니다.
-
Flying Pages는 웹사이트가 로드된 후 링크를 미리 로드하며, 링크를 클릭할 때만 속도를 개선합니다. 초기 로드를 빠르게 하는 데에는 도움이 되지 않습니다.
-
캐시 플러그인이 필요할까요?
-
페이지/링크가 미리 로드될 때마다 PHP 코드와 MySQL 쿼리를 실행하므로 리소스를 많이 소모합니다. 따라서 FlyingPress와 같은 캐시 플러그인을 사용하는 것이 강력히 권장됩니다.
-
Flying Pages가 Google Analytics 또는 유사한 추적 스크립트에 영향을 미치나요?
-
Flying Pages는 HTML 콘텐츠만 다운로드합니다. 내부의 코드는 실행하지 않습니다. 따라서 Google Analytics나 유사한 스크립트에 영향을 미치지 않습니다.
-
Flying Pages가 내 대역폭 사용량을 증가시킬까요?
-
대역폭의 80%를 소모하는 것은 주로 동영상과 이미지입니다. Flying Pages는 HTML 페이지만 미리 로드하며(보통 <30KB) 그 안의 리소스(이미지, CSS, JS 등)는 다운로드하지 않습니다. Flying Pages를 설치해도 대역폭 사용량이 5%조차 증가하지 않습니다.
-
Flying Pages가 서버 부하를 증가시키나요?
-
간단히 말해서, 예. 하지만 Flying Pages를 구성하여 초당 프리로드 수를 제한하거나 마우스 오버 시에만 프리로드하도록 설정할 수 있어 서버 부하를 줄일 수 있습니다. 또한, FlyingPress와 같은 좋은 캐시 플러그인을 사용해야 합니다. 이렇게 하면 서버 부하가 크게 줄어듭니다.
-
지원 받는 방법?
-
공식 지원 포럼에 지원 요청을 작성해 주세요. 또한 WP Speed Matters의 페이스북 그룹에서 도움을 받을 수 있습니다.
후기
기여자 & 개발자
“Flying Pages: 더 빠른 내비게이션과 향상된 사용자 경험을 위한 페이지 미리 로드”(은)는 오픈 소스 소프트웨어입니다. 다음의 사람들이 이 플러그인에 기여하였습니다.
기여자변경이력
2.4.7
- PHP 경고 수정됨
2.4.6
- 업데이트된 FAQ
2.4.5
- 수정: 누락된 호환성 오류
2.4.4
- 업데이트된 바로가기 링크
2.4.3
- 업데이트된 ‘더 최적화하기’ 탭
2.4.2
- [업데이트] 무시할 키워드에 ‘/checkout’ 및 ‘.webp’ 추가
- [업데이트] JS 파일의 사소한 업데이트
- [수정] 관리자 설정 양식의 크로스 사이트 스크립팅
2.4.1
- [버그 수정] 호환성 탭의 경고 및 오류
2.4.0
- [NEW] 호환성 탭
2.3.0
- [버그 수정] 무시 목록이 비어 있을 때 사전 로딩 중지
- [NEW] 자주 묻는 질문
- [NEW] 더 최적화하기
2.2.2
- Fast Velocity Minify 플러그인의 버그 수정
2.2.1
- 마우스 오버 지연 시간(0ms) 및 최대 rps(2s)에 대한 추가 옵션
- 기본적으로 로그인된 관리자에 대해 비활성화
2.2.0
- 옵션의 구성 객체를 창으로 이동했습니다.
- ‘마우스 오버 시에만 미리 로드’에 대한 별도의 옵션
- DOMContentLoaded를 기다리지 않고 flyingPages() 시작하기
- 향상된 Babel 설정
- IE 호환성을 위해 화살표 함수를 제거했습니다.
2.1.2
- XMLHttpRequest를 제거하고 JS 파일의 최소화를 개선했습니다 (크기를 약 300바이트 줄임)
- 사전 로딩 시작 지연에 ‘2초’ 옵션 추가됨
2.1.1
- 동일한 변수를 사용하는 다른 플러그인과의 충돌을 방지하기 위해 JavaScript 범위를 변경합니다.
2.1.0
- 관리자로 로그인된 경우 프리로딩을 비활성화하는 옵션
2.0.9
- 인터넷 익스플로러에서 비활성화
- 다른 플러그인과의 충돌을 방지하기 위해 옵저버 객체의 이름을 변경했습니다.
2.0.8
- 기본적으로 쿼리 문자열 무시
2.0.7
- 1초 지연을 허용
2.0.6
- 우커머스를 위한 더 나은 호환성
- ‘touchstart’를 사용한 모바일에서의 프리페칭
2.0.5
- 버그 수정 – 메인 함수를 호출한 후에만 대기열을 시작하여 브라우저 콘솔에서 오류가 발생하는 문제 수정
2.0.4
- 버그 수정 – ‘스크립트 병합’이 활성화된 경우 Swift Performance 캐시 플러그인과 관련된 문제
2.0.3
- 버그 수정 – 플러그인 업데이트 시 최대 rps가 기본값으로 재설정되는 문제 방지
2.0.2
- 워드프레스 4.5+ 지원
- 복사 수정
2.0.1
- 버그 수정 – 플러그인 업데이트/활성화 시 기본 설정 구성
2.0.0
주요 업데이트!
* 무시할 키워드 구성
* 뷰포트에서 프리페치 지연 시간 구성
* 마우스 오버 시에만 프리페치하도록 구성
* 초당 최대 요청 수 구성
* 마우스 오버 지연 시간 구성
1.0.5
- 버그 수정 – wp-admin 링크의 프리로딩 방지
1.0.4
- Safari/iOS Safari 버그 수정
1.0.3
- 로그아웃 링크의 사전 로드를 방지합니다
1.0.2
- 외부 링크가 마우스 오버 시 미리 로드되지 않도록 방지
1.0.1
- Microsoft Edge 브라우저 지원
- 현재 페이지의 사전 로드를 방지합니다
1.0.0
- 초기 릴리스