웹 페이지 속도를 높이기 위해 WordPress Lazy Load가 필요한 이유는 무엇입니까?

표시할 수 있는 것보다 더 많은 데이터를 로드하는 이유는 무엇입니까?

빠른 웹 사이트는 필요한 것을 빠르고 쉽게 찾을 수 있는 더 많은 사용자를 유치하는 데 더 지속 가능하고 일반적으로 더 효율적입니다. 그러나 이미지가 제대로 최적화되지 않으면 페이지 로드, 응답성 등을 저하시킬 수 있는 상당한 로드가 발생할 수도 있습니다.

Akamai에 따르면 방문자의 47%는 웹 페이지가 2초 이내에 로드될 것으로 예상합니다. 페이지가 로드되는 데 3초 이상 걸리면 방문자의 40%가 웹사이트를 떠납니다. 또한 1초 지연으로 인해 매출이 7% 감소할 수 있습니다. 때문에:

아무도 웹 페이지가 로드 되기를 "기다리고" 싶어하지 않습니다.

뿐만 아니라 검색 엔진의 거인 구글도 2~3초 미만의 빠른 로딩 시간을 가진 웹사이트를 선호합니다.

일반적으로 웹 또는 WordPress 게시물/페이지는 HTML, CSS, JavaScript, 이미지, 비디오, 댓글 등을 포함하는 여러 페이지 콘텐츠로 구성됩니다. 일반적으로 WordPress 웹사이트의 속도를 높이는 방법에는 여러 가지가 있지만 대부분의 기술은 코드 최소화에서 WordPress의 지연 로드 기술에 이르기까지 다양합니다.

이 가이드에서는 지연 로딩, 장점/단점, 사용 사례를 설명하고 WordPress 이미지, 비디오, 댓글 을 지연 로드 하고 무한 스크롤을 사용 하는 방법을 보여줍니다.

게으른 로드란 무엇입니까?

방문자가 웹 페이지를 열면 내용이 아무리 무거워도 전체 페이지의 내용이 다운로드 및 렌더링되기 시작합니다. 방문자가 첫 번째 접힌 부분만 본 후 웹 페이지를 닫을 가능성이 있습니다.

페이지 방문은 대역폭을 소모하고 메모리를 사용하여 캐시된 데이터를 저장합니다. 페이지를 매우 빨리 종료하면 메모리와 대역폭이 낭비될 수 있습니다. 여기에서 지연 로드가 시작됩니다.

레이지 로딩은 웹 콘텐츠를 한 번에 모두 로드하는 것이 아니라 필요할 때 웹 콘텐츠를 로드하는 기술입니다.

지연 로딩 기술을 사용하면 페이지 내용이 뷰포트(화면)에 표시될 때만 로드됩니다.

지연 로딩은 어떻게 작동합니까?

기본적으로 지연 로딩은 지연 로딩된 웹 페이지 리소스(이미지, 비디오 등)에 참조 src 속성을 넣고 원본 콘텐츠에 대해 다른 속성을 추가한 다음 JavaScript를 사용하여 방문자의 페이지 스크롤 위치를 감지합니다. 스크롤 위치가 참조 객체에 가장 가까우면 참조 src 속성을 실제 src로 바꾸고 내용을 로드합니다.

예를 들어 방문자가 웹 페이지를 열고 즉시 떠나면 웹 페이지의 상단 부분을 넘어서는 아무 것도 로드되지 않습니다.

런타임에 자산을 로드하면 페이지가 초기 로드를 위해 서버에 보내야 하는 요청 수가 줄어들어 WordPress 호스팅 서버와 방문자 간의 통신이 한 번에 더 빠르고 최소화됩니다.

지연 로드가 SEO에 영향을 줍니까?

Lazy Load는 SEO 친화적이지 않습니다(적어도 이 가이드를 작성하는 시점에서). 콘텐츠(이미지, 동영상, 댓글 등)는 처음에 방문자를 위해 로드되지 않으므로 검색 엔진 스파이더에도 동일한 흐름이 적용됩니다. Lazy Loaded 콘텐츠(이미지, 동영상) 중 일부는 Google 이미지/동영상 섹션에서 색인이 생성되지 않을 수 있으며 이는 SEO 관점에서 좋지 않습니다.

Lazy Loaded 콘텐츠에 링크를 추가하는 것과 같은 해결 방법이 있습니다. 이러한 방식으로 Google은 이를 표준 웹페이지로 간주하고 그에 따라 콘텐츠의 색인을 생성합니다. 그러나 방문자는 여전히 웹 페이지가 Lazy Loaded로 표시됩니다.

검색 엔진의 거인인 Google은 Lazy Loading을 활용하고 GoogleBot이 Lazy Loaded 콘텐츠를 검색할 수 있도록 하는 방법에 대한 도움말 문서를 준비하고 있습니다.

미디어가 웹사이트를 느리게 합니까?

이미지와 비디오는 웹 페이지의 웹 콘텐츠 요소의 일부입니다. 따라서 예, 로딩 시간에 영향을 미칩니다.

웹 페이지 크기가 무거울수록 로드하는 데 더 많은 시간이 걸립니다.

따라서 WordPress 사이트에 이미지를 업로드하기 전에 항상 이미지를 최적화하는 것이 좋습니다. WP Compress, ShortPixel, WP Smush It 등을 사용하여 이미지 크기를 줄일 수 있습니다.

또한 이미지 크기를 지정합니다. 예를 들어 1000x1000픽셀의 이미지가 있지만 100x100픽셀로 크기를 조정하면 브라우저가 필요 이상으로 10배 더 로드됩니다. 또한 브라우저가 JPG, PNG 및 GIF 이미지를 빠르게 로드할 수 있으므로 TIFF, BMP 등과 같은 복잡한 파일 형식을 피하십시오.

지연 로드를 사용해야 합니까?

지금은 스피드의 시대!

모든 방문자는 웹 페이지가 눈 깜짝할 사이에 로드되기를 기대합니다. 페이지 로드 시간을 개선할 수 있는 방법을 계속 찾아야 하며 지연 로드는 이를 수행하는 방법 중 하나입니다.

모바일 사용자의 엄청난 성장과 함께 전 세계 트래픽의 52% 이상이 스마트폰을 통해 제공됩니다. WordPress 웹 사이트를 최적화하는 동안 모바일 사용자를 확실히 고려해야 합니다.

3 지연 로드의 사용 사례

대부분의 경우 지연 로드는 이미지에 사용되지만 이는 이미지에만 국한되지 않습니다. 비디오, 댓글, 스크립트 등과 통합하는 데 사용할 수 있습니다. 인터넷 거물은 이미 어떤 방식으로든 지연 로드를 사용하고 있습니다. 다음은 그 중 몇 가지입니다.

1. 중간

Medium을 방문한 적이 있다면 실제 고해상도 이미지가 완전히 로드될 때까지 지연 로드 이미지에 대해 흐릿한 자리 표시자를 표시하는 것을 관찰했을 것이므로 방문자는 이미지가 로드될 것으로 예상합니다. 이것은 방문자의 주의를 끌기 위해 초기에 로드된 일부 콘텐츠를 표시함으로써 사용자 경험을 향상시킵니다.

2. 유튜브

기본적으로 YouTube에서 가장 먼저 표시하는 것은 시청하려는 동영상이며 초기 로드 시 다른 추천 동영상의 댓글과 썸네일을 로드하지 않습니다. 스크롤을 시작하면 썸네일 및 댓글과 같이 느리게 로드된 항목을 로드하기 시작합니다. 이렇게 하면 방문자는 전체 페이지가 로드될 때까지 기다릴 필요가 없습니다. 그는 즉시 비디오 시청을 시작할 수 있습니다.

3. 구글 이미지

Google에서 이미지를 검색할 때 자리 표시자 이미지가 축소판으로 바뀌고 여러 이미지를 표시한 후 더 많은 이미지가 로드되는 것을 관찰했을 수 있습니다. Google은 검색 결과를 개선하기 위해 무한 스크롤과 지연 로딩을 결합하는 다른 접근 방식을 사용합니다.

WordPress 웹 사이트에 지연 로드 추가

WordPress 웹 사이트에서 지연 로딩 기술을 구현하여 요청 수를 줄일 수 있습니다. 이 기술은 서버 응답 시간을 줄여 더 빠른 페이지 로딩 경험을 제공합니다.

WordPress 커뮤니티의 기여 덕분에 WordPress 콘텐츠에서 지연 로드를 구현하는 것은 그다지 기술적인 작업이 아닙니다.

1. WordPress 지연 로드 플러그인

워드프레스 플러그인 디렉토리에서 " 지연 로드 "를 검색하면 많은 지연 로드 플러그인을 볼 수 있습니다. 그러나 이 가이드에서는 WordPress 웹 사이트에서 지연 로드 기술을 구현하기 위해 가장 인기 있고 기능이 풍부하고 널리 사용되는 플러그인 중 하나인 a3 Lazy Load를 선택합니다.

2. WordPress 지연 로드 이미지

이미지는 리소스 집약적이며 많은 대역폭과 저장 공간을 사용합니다. 3 Lazy Load 플러그인을 사용하면 켜기/끄기를 전환할 수 있습니다. 뿐만 아니라 이미지에 대한 지연 로드가 켜져 있을 때 다음을 포함하여 작동해야 하는 위치를 제어할 수 있습니다.

• 게시물, 페이지 및 사용자 정의 게시물 유형(모든 콘텐츠 영역)
• 위젯(사이드바, 머리글 및 바닥글)
• 게시물 미리보기 이미지에 적용
• 그라바타에 적용

3. WordPress Lazy Load 비디오 및 iFrames

3 Lazy Load는 지연 로드 이미지에만 국한되지 않고 비디오도 지연 로드할 수 있습니다. iFrame을 사용하여 초기 로드 시 비디오를 로드하는 모든 WordPress 비디오 임베드를 지원합니다. 다시 말하지만, ON/OFF에 대한 토글이 포함되어 있습니다. 켜져 있으면 아래 언급된 영역을 제어할 수 있습니다.

• 게시물 및 페이지(모든 콘텐츠 영역)에 URL로 삽입된 동영상
• 위젯 유형, 텍스트 위젯 및 HTML 위젯의 비디오
• 인기 있는 YouTube Embed 플러그인과 완벽하게 호환

4. WordPress 지연 로드 댓글

대부분의 WordPress 사용자가 사용하는 여러 WordPress 주석 플러그인이 있습니다. 다른 WordPress 지연 로드 플러그인을 사용하여 지연 로드를 많은 항목에 적용할 수 있습니다.

• 기본 WordPress 댓글의 경우 댓글에 Lazy Load를 사용할 수 있습니다.
• Disqus 주석의 경우 Disqus 조건부 로드를 사용할 수 있습니다.
• Facebook 댓글의 경우 Lazy Facebook 댓글을 사용할 수 있습니다.

5. 5. WordPress용 더 많은 지연 로드 플러그인

3 Lazy Load 외에도 고려할 수 있는 유용한 플러그인이 많이 있습니다.

• a3 지연 로드
• BJ 게으른 로드
• WordPress 무한 스크롤 – Ajax 더 로드
• WP Rocket의 Lazy Load
• WooCommerce에 대한 더 많은 제품 로드
• 댓글에 대한 지연 로드
• Disqus 조건부 로드
• 비디오에 대한 지연 로드

워드프레스 무한 스크롤

이름에서 알 수 있듯이 무한 스크롤은 다음 페이지를 자동으로 추가하여 전체 페이지에서 한 번에 로드하는 시간을 절약합니다. 예를 들어, Facebook 뉴스피드에서 경험했을 가능성이 큽니다. 계속 아래로 스크롤하면 전체 페이지가 로드되지 않고 피드가 자동으로 업데이트됩니다.

WordPress에서는 Download WordPress Infinite Scroll – Ajax Load More 플러그인을 사용하여 이를 구현할 수 있습니다. AJAX 기반 쿼리로 게시물, 단일 게시물, 페이지, 댓글 등을 지연 로드하는 데 사용됩니다.

뿐만 아니라 전체 웹 페이지를 로드하지 않고도 수천 개의 제품을 표시하는 WooCommerce 및 Easy Digital Downloads와 같은 인기 있는 전자 상거래 플러그인을 사용하여 끝없이 스크롤하는 데 유용합니다.

Google 크롬은 기본적으로 지연 로드를 통합할 수 있음

Google은 느리게 로드된 콘텐츠를 더 쉽게 액세스할 수 있도록 하기 위해 노력하고 있습니다. 또한 Google Chrome에서 지연 로드에 대한 지원을 추가할 수 있는 가능성을 실험하고 있습니다. 따라서 현재 화면에 표시된 페이지의 일부만 로드하고 아래로 스크롤하면 "스크롤 없이 볼 수 있는 부분"의 모든 항목이 로드됩니다.

현재 개발자와 얼리 어답터를 위한 초기 릴리스 버전인 Google Chrome Canary에서 테스트할 수 있습니다. 사용해 보려면 Canary를 다운로드한 다음 주소 표시줄에 아래를 입력하십시오.

• chrome://flags/#enable-lazy-image-loading
• chrome://flags/#enable-lazy-frame-loading

이 플래그가 활성화되면 Chrome은 현재 화면에 표시되지 않는 이미지나 iFrame을 로드하지 않습니다. Google 크롬에서 웹 페이지를 더 빠르게 로드하는 데 도움이 되고 대역폭 사용을 줄여 모바일 브라우저에 특히 유용한 기능이 됩니다. 더 나은 방법으로 모바일 방문자에게 서비스를 제공하십시오!