지연 로드 콘텐츠 문제 해결하기

중요하지 않거나 표시되지 않는 콘텐츠의 로드 지연(대개 '지연 로드'라고도 함)은 일반적인 성능 및 UX 권장사항입니다. 자세한 내용은 로드 속도가 느린 이미지 및 동영상에 관한 웹 기초 가이드를 참조하세요. 그렇지만 이 기술이 제대로 구현되지 않는 경우 의도치 않게 Google에서 콘텐츠를 보지 못할 수도 있습니다. 이 문서에서는 Google이 로드 속도가 느린 콘텐츠를 크롤링하고 색인 생성할 수 있도록 설정하는 방법을 설명합니다.

표시 영역에 표시될 때 콘텐츠 로드하기

Google이 페이지의 모든 콘텐츠를 볼 수 있게 하려면 표시 영역에 콘텐츠가 표시될 때마다 로드 속도가 느린 구현이 관련 콘텐츠를 모두 로드하는지 확인합니다. 이렇게 하는 방법의 몇 가지 예시를 들어 보겠습니다.

구현을 테스트하는 것을 잊지 마세요.

무한 스크롤을 위한 페이지 매김 로드 지원

무한 스크롤 환경을 구현하는 경우 페이지 매김 로드를 지원해야 합니다. 페이지 매김 로드로 사용자가 콘텐츠를 공유하고 다시 이용할 수 있기 때문에 중요합니다. 또한 Google에서는 이를 통해 무한 스크롤되는 페이지의 상단이 아니라 콘텐츠의 특정 지점으로 연결되는 링크를 표시할 수 있습니다.

페이지 매김 로드를 지원하려면 사용자가 직접 공유하고 로드할 수 있는 각 섹션으로 연결되는 고유 링크를 제공하세요. 콘텐츠가 동적으로 로드되는 경우 History API를 사용하여 URL을 업데이트하는 것이 좋습니다.

테스트

구현을 설정한 후 제대로 작동하는지 확인해야 합니다. 한 가지 방법은 Puppeteer 스크립트를 사용하여 로컬에서 구현을 테스트하는 것입니다. Puppeteer는 헤드리스 Chrome을 제어하기 위한 Node.js 라이브러리입니다. 스크립트를 실행하려면 Node.js가 필요합니다. 다음 명령어를 사용하여 스크립트를 확인하고 실행하세요. 

git clone https://github.com/GoogleChromeLabs/puppeteer-examples
cd puppeteer-examples
npm i
node lazyimages_without_scroll_events.js -h

스크립트를 실행한 후 생성된 스크린샷 이미지를 직접 검토하여 Google이 보고 색인을 생성하기를 원하는 모든 콘텐츠가 포함되어 있는지 확인합니다.

Search Console에서 URL 검사 도구를 사용하여 모든 이미지가 로드되었는지 확인할 수도 있습니다. 스크린샷과 렌더링된 HTML을 확인하여 이미지가 로드되었는지 알아보세요.