웹 페이지 사전 로드의 용도는 무엇입니까? 웹 페이지 미리 불러오기 Instant.page 기술 미리 가져오기

페이지 로딩 속도는 검색 엔진에서 전자상거래 웹사이트의 SEO 순위에 영향을 미칩니다 .

웹 페이지 미리 로드란 무엇입니까?

실제로 프리로드 기술인 프리페치라는 기술이 있습니다.

• 사용자가 의도적으로 페이지를 방문하면 브라우저가 페이지를 미리 로드합니다.
• 사용자가 실제로 링크를 클릭하면 사용자는 미리 로드된 캐시에서 페이지 콘텐츠를 직접 읽고 페이지 로드 시간을 줄입니다.
• Amazon 등은 100밀리초의 대기 시간이 매출의 1%를 차지하지만 웹에서의 대기 시간은 극복하기 어렵다는 것을 발견했습니다.

웹페이지 미리 가져오기사전로드의 용도는 무엇입니까?

Instant.page는 즉시 미리 로드를 사용합니다 - 사용자가 ▼를 클릭하기 전에 페이지를 미리 로드합니다.

• 사용자가 링크를 클릭하기 전에 링크 위로 마우스를 가져갑니다.
• 사용자가 65ms 동안 호버링하면 링크를 클릭할 기회가 있으므로 Instant.page가 이 시점에서 미리 로드되기 시작하여 페이지가 미리 로드되는 데 평균 300ms 이상 걸립니다.
• 휴대기기에서 사용자는 해제하기 전에 디스플레이를 터치하기 시작하며 페이지를 미리 로드하는 데 평균 90ms가 걸립니다.

Prefetch는 웹 페이지를 더 빠르게 로드합니다.

• 인간의 뇌는 행동을 즉시 인지하는 데 100밀리초도 걸리지 않습니다.
• 따라서 Instant.page 사전 로딩 기술은 3G에서도 웹사이트를 즉각적으로 느끼게 할 수 있습니다(페이지 렌더링 속도가 빠르다고 가정).

웹 페이지의 느린 로딩을 해결하는 방법은 무엇입니까?

페이지는 사용자가 방문할 확률이 높을 때만 미리 로드되며, 사용자와 서버의 대역폭과 CPU를 고려하여 해당 페이지의 HTML만 미리 로드합니다.

• 페이지를 매끄럽게 유지하기 위해 수동 이벤트 리스너를 사용합니다.
• 사용자가 데이터 보호를 활성화할 때 미리 로드되지 않습니다(버전 1.2.2 기준).
• 그것은 1kB이고 다른 모든 후에 로드됩니다.무료이며 오픈 소스입니다(MIT 라이선스).

Instant.page를 미리 불러오는 Prefetch 웹 페이지의 효과는 무엇입니까?

Instant.page 코드 추가를 테스트한 후에도 웹 사이트 액세스 속도의 향상은 여전히 ​​상대적으로 큽니다.

• 기본적으로 이 사이트 링크만 미리 로드하도록 필터링하고 다른 사이트의 링크는 로드하지 않습니다.
• 마우스가 왼쪽의 기사 링크를 65ms 이상 클릭하면 네트워크가 기사 페이지를 미리 로드합니다.
• 65ms 미만의 호버링 시 프리로드가 수행되지 않습니다(빨간색 부분)▼

Instant.page를 사용하면 사이트의 PV와 요청량이 크게 증가합니다.

• 친구의 말에 따르면 방문당 평균 방문 횟수는 13.84회였습니다.
• 사용 후 17.43인당 방문 횟수는 4회로 증가했으며 이는 XNUMX인당 XNUMX페이지를 더 펼친 것과 같습니다.

참고 :

• 유료 CDN 및 개방형 전체 사이트 CDN을 사용하는 블로거는 주의해야 합니다.
• 그러나 걱정하지 마십시오. 미리 로드하면 html 페이지만 로드되고 이미지 및 기타 파일은 로드되지 않으므로 트래픽 손실이 많지 않습니다.

웹 페이지 사전 로딩 기술을 사용하는 방법은 무엇입니까?

실제로 html5의 link 태그에는 rel 속성이 있는데 그 중 하나가 prefetch이지만 소비자의 수가 적습니다.

이 글에서 소개하는 Instant.page는 이 기법을 사용하는 스크립트이다.

• 이 스크립트는 사용자가 링크 위에 마우스를 올린 시간에 따라 판단합니다.
• 65ms에 도달하면 사용자는 링크를 열 확률이 절반이 되며 Instant.page는 이 페이지를 미리 로드합니다.

웹 페이지 미리 로드 JS 스크립트 코드

1) 공식 웹사이트는 Cloudflare 가속 기능을 지원하는 JS 스크립트를 제공합니다▼

Instant.page의 사용은 매우 간단합니다. 다음 코드를 웹사이트에 추가하기만 하면 됩니다.라벨 직전.

<script src="//instant.page/5.2.0" type="module" integrity="sha384-jnZyxPjiipYXnSU0ygqeac2q7CVYMbh84q0uHVRRxEtvFPiQYbXWUorga2aqZJ0z"></script>

2) 천웨이량 씨가 직접 관리함 ▼

• 스크립트는 Instantclick-1.2.2.js 서버에 있으므로 속도 저하에 대해 걱정할 필요가 없습니다. 

웹사이트에 다음 코드를 추가하세요.라벨 바로 앞:

<script src="https://img.chenweiliang.com/javascript/instantpage.js" type="module"></script>