지연 로딩이란?

지연 로딩이란?

지연 로딩은 웹 페이지의 특정 부분(특히 이미지)이 필요할 때까지 로딩을 기다리는 기술입니다. 브라우저는 모든 것을 한꺼번에 로드하는 대신("즉시" 로딩), 사용자가 리소스가 필요한 방식으로 상호 작용할 때까지 특정 리소스를 요청하지 않습니다. 지연 로딩을 제대로 구현하면 페이지 로드 시간을 단축할 수 있습니다.

이러한 유형의 로딩은 웹 브라우저가 미루도록 유도하므로 "지연"이라고 합니다.지연 로딩 웹 페이지를 표시할 때 브라우저는 기본적으로 다음과 같이 표시합니다. "이 이미지가 실제로 필요할 때까지 로딩을 기다리겠습니다."로딩 중인 웹 페이지를 표시할 때 브라우저는 정반대의 태도를 취합니다. "모든 것을 즉시 처리하겠습니다!"현실 세계에서는 미루는 것이 부정적인 의미를 지니는 경우가 있지만, 이 경우에는 오히려 더 효율적인 경우가 많습니다.

예를 들어 블로그 게시물에는 페이지 상단에 이미지가 있고 하단에 다이어그램이 있을 수 있습니다. 블로그 게시물을 읽는 사람이 몇 분 동안 텍스트 하단에 도달하지 못할 수 있으므로 브라우저는 독자가 해당 섹션으로 스크롤할 때까지 다이어그램을 로드하지 않고 기다립니다. 이렇게 하면 브라우저가 두 개의 이미지 대신 하나의 이미지를 로드하기 때문에 페이지가 처음에 더 빨리 로드됩니다.

이미지 지연 로딩은 어떻게 작동할까요?

일반적으로 사용자 탐색은 이미지 지연 로딩을 유발합니다. 특히 사용자가 페이지에서 아래로 스크롤하면 브라우저에 해당 페이지에 표시되는 이미지를 로드하도록 지시합니다.

웹 페이지가 로드될 때 사용자에게 표시되는 부분은 "접힌 부분 위쪽", 아직 표시되지 않는 부분은 "접힌 부분 아래쪽"*입니다. 접힌 부분 위에 있는 이미지는 즉시 로드해야 하며, 그렇지 않으면 사용자 경험에 영향을 미칩니다. 하지만 사용자는 스크롤을 내릴 때까지 접힌 부분 아래에 있는 이미지를 볼 수 없습니다. 따라서 접힌 부분 아래의 이미지에 대하여 지연 로딩을 사용할 수 있습니다.

*" 접힌 부분"은 무엇을 의미할까요? "접힌 부분 위" 및 "접힌 부분 아래" 는 신문 레이아웃에서 유래했습니다. 신문은 일반적으로 가로로 반으로 접혀서 나오며, 앞쪽 절반(접힌 부분 위)이 독자가 가장 먼저 보게 되는 부분입니다. 이 용어를 웹 레이아웃에 적용하면 "접힌 부분"이 사용자 화면 하단에 표시됩니다.

이미지에 지연 로딩을 구현하는 방법

지연 로딩을 구현하는 한 가지 방법은 이미지 태그에 로딩되는 HTML 속성을 사용하는 것입니다.아래 예와 같이 loading="lazy"를 추가하면 사용자가 이미지 가까이 스크롤할 때까지 이미지 로드를 기다리도록 브라우저에 지시합니다.

<img src="example.com/image" alt="example image" width="100" height="100" loading="lazy">

웹 개발자는 프로그래밍 프레임워크를 사용하여 보다 정교한 지연 로딩을 구현할 수도 있습니다. 이러한 용도로는 일반적으로 Angular가 사용됩니다. JavaScript library React도 지연 로딩을 지원합니다.

Cloudflare Mirage도 지연 로딩을 구현하는 또 다른 방법입니다.Mirage는 이미지 크기를 자동으로 조정할 뿐만 아니라 필요할 때만 이미지를 로드하는 지연 로더 역할을 합니다.Cloudflare Mirage 기능은 Pro 및 Business 셀프 서비스 요금제를 사용하는 Cloudflare 고객과 Enterprise 고객이 이용할 수 있습니다.

지연 로딩을 사용할 수 있는 다른 페이지 리소스에는 어떤 것이 있을까요?

• JavaScript: JavaScript는 렌더링 차단 리소스로 알려져 있으며, 이는 브라우저가 JavaScript 코드가 로드될 때까지 페이지를 렌더링할 수 없음을 의미합니다.JavaScript 코드는 필요할 때 로드되는 작은 모듈로 나눌 수 있어 JavaScript를 실행해야 하는 페이지의 로드 시간을 줄일 수 있습니다(자세히 알아보기).
• CSS: CSS도 렌더링 차단 리소스입니다.CSS 파일을 여러 파일로 분할하여 필요할 때만 로드하면 브라우저가 페이지의 나머지 부분을 렌더링하지 못하도록 차단되는 시간을 줄이는 데 도움이 될 수 있습니다.비차단 CSS 파일에는 미디어 속성을 추가하여 브라우저에 로드 시기를 알려주는 자체 링크가 있어야 합니다(자세히 알아보기).
• iframe: iframe은 외부 소스의 콘텐츠를 웹 페이지에 삽입하는 데 사용됩니다.iframe 태그에는 이미지에 대해 위에서 설명한 것과 동일한 HTML 로딩 속성을 포함할 수 있습니다.

지연 로딩의 장점은?

페이지 로드 속도 향상: 다른 모든 조건이 동일할 경우 파일 크기가 작은 웹 페이지가 더 빠르게 로드됩니다.지연 로딩을 사용하면 웹 페이지가 전체 크기보다 작게 시작되므로 로딩 속도가 빨라집니다.빠른 웹 성능에는 더 나은 SEO, 더 높은 전환율, 개선된 사용자 경험 등 다양한 이점이 있습니다.

불필요한 콘텐츠 없음: 페이지에 여러 개의 접힌 부분 아래의 이미지가 로드되지만, 사용자가 아래로 스크롤하기 전에 페이지를 종료한다고 가정해 보겠습니다.이 경우 이미지 전송에 사용되는 대역폭과 이미지를 요청하고 렌더링하는 데 소요되는 브라우저의 시간이 낭비될 수밖에 없습니다.반면 지연 로딩은 이러한 이미지가 필요할 때만 로드되도록 합니다.이렇게 하면 시간과 처리 능력이 절약되고 대역폭이 덜 사용되므로 웹 사이트 소유자의 비용도 절감될 수 있습니다.

지연 로딩의 단점은?

예를 들어 사용자가 페이지를 빠르게 아래로 스크롤하면 이미지가 로드될 때까지 기다려야 할 수 있습니다.이는 사용자 경험에 부정적인 영향을 미칠 수 있습니다.

서버와의 추가 통신: 브라우저에서는 모든 페이지 콘텐츠를 한 번에 요청하는 대신 사용자가 페이지와 상호 작용할 때 웹 사이트 서버에 콘텐츠 요청을 여러 번 보내야 할 수 있습니다.콘텐츠 전송 네트워크(CDN)를 사용하면 이미지가 CDN에 의해 캐시되고 브라우저가 이미지를 가져오기 위해 원본 서버로 요청을 보낼 필요가 없으므로 이러한 잠재적 단점을 최소화할 수 있습니다.

브라우저에서 처리할 추가 코드: 개발자가 페이지 리소스를 지연 로드하는 방법을 브라우저에 알려주기 위해 웹 페이지에 여러 줄의 JavaScript를 추가하면 브라우저가 로드하고 처리해야 하는 코드의 양이 늘어납니다.비효율적으로 수행되면 이러한 약간의 추가 로딩 및 처리 시간이 지연 로딩으로 절약되는 시간보다 더 클 수 있습니다.

즉시 로딩이란?

즉시 로딩은 모든 웹 페이지 리소스를 동시에 또는 가능한 한 빨리 로드하는 것입니다. 즉시 로딩을 사용하는 일부 애플리케이션에는 "로딩 중" 화면이 표시될 수 있습니다. 온라인 게임과 같이 복잡하고 코드가 많은 웹 애플리케이션은 빠른 로딩을 선호할 수 있습니다.

개발자가 웹 페이지 속도를 높일 수 있는 다른 방법은 무엇일까요?

웹 성능에 영향을 미치는 요인은 여러 가지가 있지만, 다음 세 단계는 웹 사이트를 더 빠르게 만들기 위한 좋은 출발점입니다.

1. CDN 사용: 웹 콘텐츠가 CDN에 캐시되면 지연 로딩 사용 여부와 관계없이 원본 서버와의 통신이 최소한으로 유지됩니다.또한 CDN은 일반적으로 원본 서버보다 사용자와 더 가까우므로 사용자에게 콘텐츠를 더 빠르게 전송할 수 있습니다.
2. 이미지 최적화: 지나치게 큰 이미지는 지연 로딩을 사용하더라도 성능에 영향을 미칩니다.가능한 한 이미지 파일 크기를 줄이면 이미지가 빠르게 로드됩니다.
3. 코드 축소: 축소는 기능을 변경하지 않고 CSS 및 JavaScript 코드에서 불필요한 문자를 모두 제거하는 프로세스입니다.여기에는 공백, 주석, 세미콜론의 제거가 포함됩니다.축소하면 코드 파일 크기가 줄어들어 로드 속도가 빨라집니다.

웹 페이지 성능을 개선하는 더 많은 방법 보기: 웹 사이트 속도 향상을 위한 팁