구글 블로거 스크롤 내릴 때 이미지 늦게 뜨는 현상 해결과 애드센스 최적화 후기

구글블로거 이미지 지연 로딩 최적화 하기

구글블로거 이미지 지연 로딩 발생이유?

구글 블로거에 글을 올리고 읽어보는데 스크롤을 내릴 때마다 이미지가 조금씩 늦게 뜨더라고요. 

이미지를 WebP 포맷으로 압축해서 용량을 대폭 줄여둔 상태였던 터라 용량 문제도 아닐 텐데 왜 이러나 싶었죠.

독자 입장에서 스크롤을 내릴 때마다 사진이 딜레이되어 나타나니 답답하게 느껴질 것 같았어요. 

직접 지연 로딩 설정을 해둔 적도 없는데 원래 이렇게 작동하는 건지, 편의성을 위해 이걸 꺼야 하는 건지 궁금해서 찾아봤습니다.

HTML에 이미지 지연 로딩 스크립트 포함

개발자 도구로 코드를 직접 확인해보니 제가 사용 중인 테마에 lazy-yard라는 지연 로딩 전용 스크립트 클래스가 기본 탑재되어 있더라고요. 

이미지 주소를 바로 불러오지 않고 스크롤이 다가올 때 자바스크립트로 전송하는 방식이라 딜레이가 더 체감됐던 거였죠.

알아보니 이 지연 로딩은 수익형 블로그 운영에 필수적인 요소였어요. 

이미지를 나중에 불러오는 대신 애드센스 광고 스크립트와 초기 화면 요소를 먼저 불러와 주기 때문에, 구글 SEO 점수와 광고 노출 속도 면에서 훨씬 유리합니다. 

구글 블로거 개발자 도구(F12) 검사 창에서 테마 자체 이미지 지연 로딩 스크립트 클래스인 'img.lazy-yard'를 확인하는 화면 스크린샷

애드센스 광고 로딩 속도 높이기 

불편하다고 해서 이 지연 로딩 스크립트를 무작정 꺼버리면 페이지 초기 진입 속도가 느려져 방문자 이탈률이 오히려 높아질 수 있었어요. 

스크롤이 이미지 위치에 딱 도달했을 때 다운로드가 시작되다 보니 빠르게 스크롤을 내리는 독자에게는 딜레이가 보일 수밖에 없는 구조이긴 합니다.

결국 스크립트에 의한 정상적인 속도 최적화 동작이라는 점을 확인했고, 무조건 코드를 건드려 끄기보다는 지연 로딩은 시스템에 맡겨둬야 합니다. 

그리고 나서 애드센스 광고 로딩 속도를 높이는 쪽으로 방향을 잡는 게 현실적이라는 판단이 섰어요.

중복 스크립트 정리로 속도 최적화하기

수익화 블로거 대다수도 테마의 기본 지연 로딩을 그대로 두고 운영한다는 점을 알게 됐어요. 

코드 조작으로 테마 오류 위험을 안기보다는 글 작성과 트래픽 확보에 집중하는 게 낫다고 판단했죠.

대신 블로그 속도를 높이기 위해 포스팅마다 중복으로 들어가던 애드센스 메인 스크립트 코드를 테마 헤더에 1번만 넣고, 본문 광고 코드에서는 첫 줄을 정리하는 방식으로 최적화를 시도했어요. 

테마를 미리 백업해둔 덕분에 광고 중단 걱정 없이 안전하게 적용해볼 수 있었습니다. 

구글 블로거 SEO 및 속도 최적화를 위해 중복되는 애드센스 메인 JS 스크립트 코드와 광고 단위 <ins> 코드를 상하로 분리하여 설명하는 이미지

이미지 지연 로딩 결론

이미지 지연 로딩은 블로그 오류가 아니라 테마 자체의 lazy-yard 스크립트가 구글 SEO와 애드센스 속도를 지켜주는 정상적인 시스템이었어요. 

이미지 포맷을 WebP로 관리하고 계신다면 이미 상위 수준의 최적화를 하고 계신 테마에요.

지연 로딩은 그대로 두신 채 포스팅 본문의 중복 스크립트 정리에 집중해 보시는 것을 추천합니다.

간편한 워드프레스 블로그 구글지도 삽입 방법도 참고하세요!!