블러그스팟 사진 로딩 속도 최적화로 이미지 로딩 속도를 빠르게 만드는 방법

1. loading="lazy"란 무엇인가?

loading="lazy"는 HTML5의 이미지 로딩 속성 중 하나로, 페이지가 로드될 때 모든 이미지를 한꺼번에 불러오는 대신, 사용자가 이미지가 있는 곳까지 스크롤할 때 이미지를 불러오는 방식입니다. 이 속성을 통해 초기 페이지 로딩 속도를 개선할 수 있습니다.

즉, 불필요하게 모든 이미지를 한꺼번에 불러올 필요가 없기 때문에 첫 화면에 보이는 이미지만 로드하고, 나머지 이미지는 사용자가 필요로 할 때 로드됩니다.

<img src="이미지_URL" alt="이미지 설명" loading="lazy">

이 코드에서 loading="lazy" 속성을 추가함으로써 브라우저는 이미지를 스크롤하는 순간에만 로드합니다. 이로 인해 초기 페이지 로딩 속도가 크게 개선되며, 특히 이미지가 많은 페이지에서 효과가 극대화됩니다.

2. 용량 차이를 실질적으로 줄이는 효과

loading="lazy" 속성을 사용하면 초기 로딩 시 필요한 데이터 용량이 크게 감소합니다. 이는 사용자가 처음 페이지에 진입할 때 모든 이미지를 한꺼번에 다운로드할 필요가 없기 때문입니다. 그 결과, 페이지 로딩 속도와 사용자 경험이 동시에 개선됩니다.

예시로 볼 수 있는 차이:

• Lazy Loading 없이: 페이지에 각각 500KB 크기의 이미지 15장이 있다고 가정하면, 모든 이미지를 한꺼번에 로드하게 됩니다. 따라서 15 × 500KB = 7.5MB가 즉시 다운로드되어야 하므로 로딩 시간이 길어집니다.

• Lazy Loading 사용 시: 초기 로딩 시 보이는 이미지만 먼저 불러온다면, 예를 들어 3개의 이미지(500KB x 3장 = 1.5MB)만 먼저 로드되고, 나머지 이미지는 사용자가 스크롤할 때 추가로 로드됩니다. 이로 인해 초기 로딩 속도가 크게 개선됩니다.

결론적으로, loading="lazy" 속성을 추가함으로써 초기 로딩 시 필요한 데이터 용량이 크게 줄어들고, 사용자 경험이 개선됩니다. 이 속성 자체의 HTML 용량은 무시할 정도로 적으므로, 추가적으로 페이지 성능에 부담을 주지 않습니다.

블로그 노출기간의 요인👆️

3. 티스토리에서도 적용 가능한 여러 장의 이미지 예시

티스토리에서 여러 장의 이미지를 삽입할 때도 loading="lazy" 속성을 손쉽게 적용할 수 있습니다. 티스토리에서 HTML 모드로 전환한 뒤, 각 이미지 태그에 loading="lazy" 속성을 추가하면 초기 로딩 속도가 크게 향상됩니다.

적용 방법 요약:

HTML 모드로 전환: 티스토리에서 포스트 작성 시 "HTML" 모드로 전환합니다.
이미지 태그 추가: <img> 태그를 삽입하고, src에 이미지 URL, alt에 설명을 넣고, loading="lazy" 속성을 추가합니다.
포스트 저장 또는 게시: 포스트를 저장하거나 게시하여 이미지가 원하는 위치에 정상적으로 삽입됩니다.

이미지 삽입 예시 (단순 이미지 삽입):

<img src="이미지_URL" alt="이미지 설명" loading="lazy">

예시 (텍스트와 함께 이미지 삽입):

<p>이곳에 이미지를 설명합니다:</p>
<img src="https://example.com/image.jpg" alt="이미지 설명" loading="lazy">
<p>이미지에 대한 추가 설명을 여기에 작성합니다.</p>

여러 장의 사진 예시 (5장):

<img src="이미지_URL_1" alt="이미지 설명 1" loading="lazy">
<img src="이미지_URL_2" alt="이미지 설명 2" loading="lazy">
<img src="이미지_URL_3" alt="이미지 설명 3" loading="lazy">
<img src="이미지_URL_4" alt="이미지 설명 4" loading="lazy">
<img src="이미지_URL_5" alt="이미지 설명 5" loading="lazy">

위 코드는 여러 장의 이미지를 삽입할 때 사용할 수 있는 예시입니다. 5장의 이미지를 삽입할 경우, 각 이미지에 loading="lazy" 속성을 추가하면 초기 로딩 속도가 개선되고, 사용자가 스크롤할 때마다 이미지가 순차적으로 로드됩니다.

검색엔진빠르게하는방법👆️

물론 이미지를 줄이는 https://tinypng.com/ 이란 프로그램이 있지만 보사와 다운로드 압축등 여러가지 단계를 거쳐야 하기때문에 다소 시간이 소모되기도 한다.

이미지별로 필요한 요소

src: 이미지 URL 주소 (이미지 업로드 후 해당 URL을 사용).
alt: 이미지 제목이나 설명 (이미지의 주제를 설명).
loading="lazy": 페이지 로딩을 최적화하기 위한 속성.

loading="lazy" 속성은 블로그나 웹페이지에서 여러 장의 이미지를 삽입할 때 매우 유용한 기능입니다. 이 속성을 사용하면, 초기 로딩 시 모든 이미지를 불러오지 않고, 사용자가 필요로 할 때만 이미지를 로드하기 때문에 로딩 속도가 크게 개선되고, 데이터 사용량도 줄일 수 있습니다. 

또한, 티스토리와 같은 블로그 플랫폼에서도 손쉽게 적용할 수 있으므로, 블로그를 운영하는 분들에게는 필수적인 기능입니다.

이미지 로딩 속도를 최적화하여 사용자에게 더 나은 경험을 제공하고, 데이터 절약 효과도 누리고 싶다면, 지금 바로 loading="lazy" 속성을 적용해 보세요!