게으른 로딩 이미지 : Complete Guide Plus 3 가지 구현 방법

게으른 로딩 이미지 : Complete Guide Plus 3 가지 구현 방법

게으른 로딩 이미지 : Complete Guide Plus 3 가지 구현 방법
СОДЕРЖАНИЕ
02 июня 2020

게으른 이미지로드 : 전체 가이드


웹에서 기능과 상호 작용이 증가함에 따라 지난 몇 년 동안 웹 페이지 크기가 꾸준히 증가했습니다. 2018 년 초 현재, 평균 페이지 크기 인터넷에서 2MB 이상을 차지했습니다! 어떻게 싸우는가? 게으른 로딩 이미지라는 것이 더 나은 솔루션 중 하나입니다..

이 가이드에서는 게으른 로딩 이미지의 모든 복잡한, 그것을 구현하는 세 가지 다른 방법에 대해 이야기하십시오..

앞으로 나올 내용의 목차부터 시작하겠습니다.

  • 게으른 로딩이 중요한 이유?
  • 게으른 로딩이란??
  • 게으른 로딩의 장점
  • 이미지 로딩 지연시 고려해야 할 사항
  • 옵션 1 : 처음부터 지연 로딩 구현 (초보자 친화적 : ⭐ / 5)
  • 옵션 2 : JavaScript 플러그인 사용 (초보자 친화적 : ⭐⭐ / 5)
  • 옵션 3 : 워드 프레스 플러그인 사용 (초보자 친화적 : ⭐⭐⭐⭐⭐ / 5)
  • 결론

게으른 로딩이 중요한 이유?

웹 페이지의 거대한 페이로드는 주로 이미지, 스크립트, 스타일 시트, 글꼴 및 비디오로 구성됩니다. 그러나 이미지는 일반적인 웹 페이지 크기의 60 % 이상을 차지합니다. 이미지는 웹 페이지 디자인에도 중요하므로 이미지를 제거 할 수있는 것은 아닙니다.

최적화없이 사용자의 웹 브라우저는 페이지를 완전히 렌더링하기 전에 모든 리소스를 다운로드합니다. 이로 인해로드 시간이 증가하여 사람들을 끌 수 있습니다.. WooCommerce 추정 전자 상거래 웹 사이트는 100ms의 페이지 속도 개선 시마다 1 %의 수익을 올릴 수 있음.

이와 같은 시나리오에서는로드 시간을 최적화하는 데 필요한 모든 작업을 수행하는 것이 좋습니다. 이미지는 웹 페이지 크기의 주요 원인이므로 이미지부터 시작하는 것이 좋습니다. 이것은 게으른 로딩이 작용하는 곳입니다..

게으른 로딩이란??

게으른 로딩의 작동 방식을 이해하기 위해 CodeinWP에서 이미지가 렌더링되는 방법을 보여주는 빠른 애니메이션 GIF가 있습니다..

게으른 로딩 이미지 데모CodeinWP의 지연 로딩 데모

페이지가로드되면 모든 이미지가 즉시 다운로드되지 않습니다. 이미지를 아래로 스크롤하면 먼저 이미지가 흐려지고 실제 이미지가 백그라운드에서로드되기 시작합니다. 이 흐릿한 이미지는 최종 이미지의 저해상도 버전입니다. 사용자가 이미지를 스크롤 할 때까지 이미지 다운로드 및 렌더링을 지연시키는 현상은 바로 게으른 로딩이라고합니다..

이기는 하지만 "게으른" 일반적으로 부정적으로 연결됩니다. 게으른 로딩은 실제로 좋은 방법이며 전체 사이트를 최적화하여 페이지로드 시간을 줄입니다..

노트. 이 게시물에서는 지연 로딩 이미지의 프로세스를 살펴 보지만 지연 로딩은 이미지에만 국한되지 않습니다. 비디오와 같은 다른 리소스를 렌더링 할 때 동일한 아이디어를 사용할 수 있습니다 (주석을 작성하는 방법에 대한 전체 섹션이 있음) 에 이 포스트) 및 글꼴.

게으른 로딩의 장점

웹 페이지의 로딩 시간이 이탈에 크게 기여하기 때문에 게으른 로딩 이미지는 페이지가로드 될 때까지 페이지에 머무르는 사용자를 크게 늘려 궁극적으로 판매 또는 전환으로 이어질 수 있습니다.

지연 로딩 이미지의 또 다른 중요한 이점은 서버 비용을 낮추는 것입니다. 뷰어가 스크롤하는 이미지 만 제공하고 보지 않은 페이지 부분의 대역폭을 절약합니다. 이미지가 페이지 무게의 주요 부분을 형성함에 따라 서버 비용이 절감 될 수 있습니다.

모든 이미지를 미리로드하는 것은 독자에게 해로울 수 있습니다. 사용자가 웹에 대한 무제한 데이터 요금제를 사용하는 경우에는 중요하지 않습니다. 그러나 데이터가 제한된 계획에서는 이미지를 느리게로드하여 뷰어의 데이터를 저장하고 있습니다.

이미지 로딩 지연시 고려해야 할 사항

웹 사이트에 올바른 로딩을 구현하기로 결정 했으므로,이를 수행하는 방법에 대한 몇 가지 주요 고려 사항을 살펴 보겠습니다..

지연로드하려는 이미지 식별

모든 이미지가 게으른 로딩에 이상적인 것은 아닙니다. 예를 들어, 디자인 구조에 필수적인로드 지연을 원하지 않고 모든 것을 올바르게 렌더링하기 위해로드해야합니다.

화면이 꺼져 있고 페이지 구조에 영향을 미치지 않는 이미지 만 지연 로딩으로 간주해야합니다. 일반적으로 이들은  페이지 본문에 나타나는 요소.

이미지 자리 표시 자 선택

다음으로 고려해야 할 것은 뷰어가 스크롤하면 이미지가로드 될 때 표시되어야하는 중간 이미지 또는 색상입니다. 이미지 로딩 시간은 이미지의 크기에 따라 다르며 최대 몇 초까지 걸릴 수 있습니다. 따라서로드 시간 동안 선호하는 것을 고려해야합니다..

개발자가 이와 관련하여 일반적으로 취하는 두 가지 방향이 있습니다.

  • 이미지의 주요 색상을 배경으로 사용
  • 저품질 버전의 이미지 사용

저해상도 자리 표시 자게으른 로딩을위한 자리 표시 자로 사용되는 저품질 버전의 이미지 예

여기에서 올바른 선택은 사이트 디자인과 이미지가로드 될 때까지 사용자에게 표시하기를 원하는 것에 따라 다릅니다..

뷰포트에 들어가 자마자 이미지를로드하는 기술이 있지만, 사용자가 자리 표시자를 보지 못하도록 버퍼 시간을 추가하는 것이 좋습니다..

이미지를로드 할 때 페이지 구조를 변경하지 않도록주의하십시오

이미지가로드되기 전에 0px 크기로 표시 될 수 있습니다. 디자인 구조를 유지하는 데 적합하지 않습니다..

이것은 페이지의 레이아웃과 텍스트의 위치를 ​​쉽게 변경할 수 있습니다. 간단한 해결책은 이미지에 올바른 치수를 즉시 추가하는 것입니다. 이렇게하면로드 후 이미지 요소의 크기가 동일하게 유지됩니다.

위의 고려 사항을 벗어난 상태에서 WordPress 사이트에서 실제로 지연 로딩을 구현하는 방법을 살펴 보겠습니다..

옵션 1 : 처음부터 지연 로딩 구현

먼저 플러그인을 사용하지 않고이 작업을 수행하는 방법을 살펴 보겠습니다. 이 옵션은 JavaScript에 익숙한 사용자에게 권장됩니다. 이상적으로는 다음 단계를 수행해야합니다.

  1. 페이지로드 중 이미지로드 방지 : 페이지의 속성에서 이미지의 URL 또는 경로를 지정할 때  태그가 있으면 이미지가 페이지로드 중에 브라우저에 의해 다운로드됩니다. 브라우저가 이미지를 다운로드하지 못하게하려면 이미지의 데이터 소스 속성에서 이미지의 위치를 ​​지정해야합니다.  대신 태그.
  2. JavaScript에서 이벤트 핸들러 함수를 등록하여 두 가지 이벤트 (로드 및 스크롤)에서 요소를 확인하십시오..
  3. 요소가 뷰 포트에 들어 오면 data-src 요소의 값을 src 요소에로드하면 브라우저가 이미지를로드합니다..

이 프로세스의 간단한 구현은 로빈 오스본 데모가 가능합니다 CodePen에서.

옵션 1.1 : 교차 관찰자 API 사용

교차 관찰자 API 특정 시점에서 뷰 포트에있는 DOM 요소를 식별하는 데 도움이됩니다. 이것은 이벤트 핸들러 함수를 작성하지 않고 지연로드를 구현하는 더 확실한 방법입니다. 지연로드를 구현하는 코드 줄 수가 상당히 줄었습니다. 그러나 브라우저 호환성은 여전히 ​​문제입니다.

Google 개발자 블로그 를 통해 교차 관찰자 API의 구현을 설명합니다. 이 CodePen 데모.

옵션 2 : JavaScript 플러그인 사용

위에서 설명한 두 가지 옵션에는 JavaScript에 대한 중간 수준의 지식이 필요합니다. 서버에 부하를 가하는 무거운 플러그인을 사용하지 않고 지연 로딩을 더 쉽게 구현하려는 경우 일반 JavaScript 플러그인을 사용해 볼 수 있습니다, 게으른.

그만큼 게으른 도서관 2KB 미만의 크기는 페이로드에 추가로드를 제공하지 않고 지연로드 이미지를 쉽게 처리 할 수 ​​있습니다..

bLazy 라이브러리를 사용하려면 초기화해야합니다  다음과 같은 속성을 가진 요소 :

  • 클래스 : 모든 클래스를 설정  b-lazy 태그
  • src : 플레이스 홀더 이미지에 링크
  • data-src :로드 할 이미지에 대한 링크
  • data-src-small : 너비가 420 픽셀 미만인 화면에로드 할 이미지에 링크

단 몇 줄의 코드로 bLazy 라이브러리를 초기화해야하며 모든 이미지는 지연 로딩을 통해 렌더링됩니다.

;(함수() {
// 초기화
var bLazy = new Blazy ();
}) ();

CodePen 데모를 사용할 수 있습니다 여기.

옵션 3 : 워드 프레스 플러그인 사용

게으른 로딩을 제공 할 수있는 몇 가지 옵션이 있습니다. 가장 주목할만한 점 :

이 모든 플러그인은 자동으로 지연 로딩을 처리합니다. 각각에는 멋진 측면 기능도 있습니다.

예를 들어 WP Rocket의 Lazy Load는 lazy도 YouTube 동영상을로드하고 미리보기 이미지로 교체합니다..

ThemeIsle 제품군에 새로 추가 된 것 외에도 Optimole은 견고한 이미지 최적화 기능을 제공합니다 (여기서 테스트 한대로)와 관련하여 상당히 고급 기능을 제공합니다. 예를 들어 사용자의 화면 크기에 따라 동적 크기 조정이 가능합니다.


Optimole의 이미지 최적화 및 지연로드 이미지 최적화 & Optimole의 지연로드

저자 : 최적

현재 버전 : 2.3.1

최종 업데이트 : 2020 년 4 월 21 일

optimole-wp.zip


96 % 등급


50,000 회 이상 설치


WP 4.7+ 필요

대부분의 플러그인과 마찬가지로 지연 로딩을하려면 플러그인을 설치하고 플러그인 제어판에서 기능을 활성화하면됩니다.

지연 로딩 이미지를위한 최적

결론

이 게시물에서는 지연 로딩 이미지의 필요성과 이점에 대해 살펴 보았습니다. 또한 WordPress 웹 사이트에서 지연 로딩을 구현하는 세 가지 방법에 대해 논의했습니다.

  • JavaScript에 중급 수준 인 경우 처음부터 지연 로딩을 구현할 수 있습니다.
  • 일부 프로그래밍을 알고 있지만 가벼운 JavaScript 라이브러리 인 플러그인을 원하지 않는 경우 bLazy는 옵션입니다.
  • 웹 사이트에 이미지를 느리게로드하기위한 원 클릭 솔루션을 원한다면 Optimole과 같은 플러그인을 사용해야합니다

지연 로딩에 대해 어떻게 생각하십니까? 웹 사이트의 성능을 향상시키기 위해 사용해 보셨습니까??

WordPress 사이트 속도를 높이기위한 충돌 과정에 참여하는 것을 잊지 마십시오. 몇 가지 간단한 수정으로로드 시간을 50-80 % 줄일 수 있습니다.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    
    워드 프레스 사이트가 기능을 수행하는 방식을 바꾸는 10 가지 방법 כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    모바일 우선 성능 지향 워드 프레스 테마를 구성하는 방법 [1 부] כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    
    2020 년에 웹 사이트를 안전하게 유지하기위한 25 가지 간단한 워드 프레스 보안 요령 כיצד להקים עסק מסחר אלקטרוני
    0 комментариев
    Adblock
    detector