워드프레스 뉴스페이퍼 (Newspaper) 테마에서 이미지 지연 로딩 설정하기

워드프레스 정보를 제공하는 블로그 Avada 2020. 1. 29. 00:12 • 댓글:

사진이나 이미지가 많은 사이트인 경우 사이트 로딩 속도가 느려지는 경향이 있고, 그러면 방문자의 이탈률(Bounce Rate)이 높아져서 SEO에 불리하게 됩니다.

이미지가 많아 고민인 경우 이미지를 지연 로드시키면 페이지 로딩 속도가 빨라져 SEO에 긍정적으로 작용하게 됩니다.

인기 블로그, 매거진 워드프레스 테마인 뉴스페이퍼 (Newspaper)에서는 이미지를 지연 로드(레이지 로드)하는 기능을 제공합니다. 뉴스페이퍼에서 이미지 지연 로딩 기능을 사용하려면 워드프레스 관리자 페이지에서 Newspaper > Theme panel > Template Settings로 이동한 다음, Image loading - animations (LazyLoad) 섹션을 클릭합니다.

그러면 위의 그림과 같이 LazyLoad 기능에 대한 설명과 함께 레이지 로드 기능을 활성화할 수 있는 옵션이 표시됩니다. 애니메이션 효과를 활성화하면 사용자가 스크롤할 때 테마 이미지에 애니메이션 효과가 적용됩니다. USE LOADING ANIMATION IMAGE를 활성화(③)하고 Save Settings 버튼을 클릭하면 레이지 로드 기능을 활성화합니다.

그러면 방문자가 사이트의 페이지를 로드하면 보이는 영역의 이미지만 로드되고, 보이지 않는 영역은 로드되지 않고 있다가 아래로 스크롤하면 이미지가 로드되어 사이트 속도가 개선됩니다.

위의 영상에서처럼 마우스를 스크롤할 때 이미지가 표시되기 시작합니다. 사진이나 이미지, 그래픽이 많은 사이트에서 특히 효과적입니다.

뉴스페이퍼는 콘텐츠가 많은 블로그나 뉴스, 매거진 사이트에 적합한 테마 같습니다. 뉴스페이퍼는 애드센스 광고 수익률도 높은 것으로 평가받고 있습니다("워드프레스 뉴스페이퍼 테마 업데이트 후에 애드센스 수익 증가" 참고).

참고: