워드프레스를 포함하여 모든 웹사이트 운영자는 초과 트래픽에 의한 비용 증가를 싫어합니다. 그래서 다양한 또는 최소한의 방법을 기본으로 설정하여 트래픽을 줄이기 위해 애씁니다. 또, 웹사이트 페이지의 로드 속도를 향상해 방문자의 답답함을 덜기 위해 애쓰기도 합니다. 보통은 이상하게도 운영자 혼자 답답해하는 때가 더 많은 것 같지만.
웹사이트 트래픽을 줄이고 페이지 로드 속도를 증가하기 위한 기본 제어 요소에 ‘이미지 콘텐츠’가 있습니다. 이미지는 상대적으로 용량이 크고, 용량이 크므로 페이지 로드 속도에 영향을 줍니다. 웹사이트에서 이미지를 제어하여 트래픽을 줄이고, 페이지 성능을 올리는 대표적인 것으로 ‘Lazy Loading’ 방법이 있습니다. 특정 소스를 말하는 것이 아니라 필요할 때 이미지를 불러오는 ‘동적 호출’ 정도의 뜻으로 해석하면 됩니다. 물론, 이미지가 아닌 요소도 가능합니다.
워드프레스에서 이미지 동적 호출
워드프레스에서 이미지를 동적으로 로드(호출)하는 방법 중 제일 쉬운 것은 이미지 동적 호출 기능이 있는 저장소 플러그인 설치입니다. 관련 플러그인을 설치하여 사용한 때가 없어서 효율적이고 가벼운 플러그인 추천은 어렵습니다.
‘Lazy load Images’ 제트팩 모듈
제트팩은 많은 기능의 모듈을 구분하여 제공하는데, 5.7.0 버전에 추가한 기능이 있습니다. ‘Lazy Images’ 이름의 모듈로, 이미지를 동적으로 로드하여 트래픽 절감과 페이지 로드 속도에 이점을 제공한다고 밝히고 있습니다. 테스트에서 평균 3배의 사이트 퍼포먼스 향상과 이전 대비 절반의 트래픽 감소를 확인했다고 합니다.
이 모듈은 관리페이지 제트팩 설정 화면에서는 볼 수 없기에 제트팩 전체 모듈 목록을 볼 수 있는 페이지로 접근해야 합니다.
제트팩 5.8 버전에서 이 모듈은 정식으로 추가되어 다음 그림처럼 일반 설정 화면에서 활성화할 수 있습니다.
정식으로 추가하지 않은 모듈과 제트팩 전체 모듈을 보려면 워드프레스 제트팩(Jetpack) 모듈 활성 및 비활성 한 페이지에서 함께 처리하기를 참고하세요.
Lazy load Images 모듈은 활성화만으로 사이트에 자동 적용되므로 운영자가 신경 쓸 일이 없습니다.
이미지 동적 로드 기능이 적용된 것을 보려면 먼저 이미지가 있는 포스트의 이미지 HTML 소스를 보면 됩니다.
예를 들어, 다음 소스에서 2번 줄이 원본 소스일 때 4번 줄은 제트팩 모듈이 사이트에서 이미지 소스를 필터한 것으로 방문자의 화면에 이미지가 노출되기 전이며, 6번 줄은 방문자의 화면에 이미지가 노출되었을 때의 소스입니다.
// 원본
<img class="" src="https://cts.wpu.kr/jetpack.jpg" />
// 사이트의 포스트에서 방문자 화면에 이미지가 노출되기 전
<img src=" https://cts.wpu.kr/placeholder.jpg" data-lazy-src=" https://cts.wpu.kr/jetpack.jpg" />
// 방문자 화면에 이미지가 노출될 때
<img class="jetpack-lazy-image--handled" src="https://cts.wpu.kr/jetpack.jpg" data-lazy-loaded="1">세부 과정을 꼭 알 필요는 없으며, 실제 운용하는 워드프레스 사이트에서 제트팩의 Lazy Images 모듈을 활성화한 후 이미지를 추가한 포스트를 작성하여 확인하는 게 좋습니다. 아직 워드프레스 사이트가 없다면 이 사이트의 다른 포스트를 둘러보면서 Lazy Images 모듈을 경험하세요.
이 모듈은 현재 3가지의 필터 훅을 제공하여 일부 커스텀 기능을 지원합니다.
lazyload_is_enabled
lazyload_images_placeholder_image
jetpack_lazy_images_new_attributes필요한 때가 있을 때 관련 문서를 참고하는 정도면 충분하며, 처음부터 테마 등을 직접 구성한 워드프레스 사이트가 아니라면 제공하는 수준 그대로 사용하는 것이 좋습니다.
모두의 문제
트래픽 절감의 과제는 이제 웹사이트 운영자와 방문자 모두의 문제가 되었습니다. 모바일 기기의 사용이 생활이 된 탓입니다. 모바일 환경 사용은 지금보다 더 늘어날 것으로 예상하므로 운영자는 콘텐츠 접근 성능을 향상하는 것이 필요합니다. 할 수 있는 최소한을 시작으로.