구글 PageSpeed Insights에서 워드프레스 사이트의 속도 최적화를 측정할 때 "최대 콘텐츠 렌더링 시간 이미지가 지연 로드되었습니다" 경고가 표시되는 경우가 있을 수 있습니다.
위와 같은 경고가 표시될 때 확인할 사항에 대하여 간단히 살펴보겠습니다.
워드프레스: "최대 콘텐츠 렌더링 시간 이미지가 지연 로드되었습니다" 경고
네이버 카페에 "최대 콘텐츠 렌더링 시간 이미지가 지연 로드되었습니다" 오류에 대한 문의가 최근 올라온 적이 있습니다.
세부 정보를 살펴보면...
스크롤 없이 볼 수 있는 이미지가 지연 로드되면 페이지 수명 주기 후반에 렌더링되므로 최대 콘텐츠 렌더링 시간이 늘어날 수 있습니다. 최적의 지연 로드에 관해 자세히 알아보기 LCP
이와 같은 메시지가 표시됩니다.
경고 문구 자체만 보면 이미지 지연 로드 때문에 발생하는 문제처럼 보입니다. 말 그대로 스크롤 없이 볼 수 있는 이미지를 지연 로드시키면 페이지 로딩 시 후반에 렌더링되므로 최대 콘텐츠 렌더링 시간이 늘어날 수 있다는 경고 같습니다.
이런 경고가 표시되면 이미지 지연 로드가 원인일 수 있습니다.
실제로 해당 워드프레스 사이트는 클라우드웨이즈에서 호스팅되고 있었는데, 클라우드웨이즈에서 제공하는 Breeze 플러그인의 이미지 지연 로드 기능을 비활성화하도록 제안하니 문제가 해결되었다고 합니다.
Breeze 플러그인을 사용하는 경우 설정 » Breeze » BASIC OPTIONS에서 Lazy Load Images (이미지 레이지 로드) 옵션을 비활성화할 수 있습니다.
워드프레스 5.4 이상 버전에서는 이미지 지연 로드 기능이 기본적으로 탑재되어 있습니다.
이 때문인지 몰라도, 제 워드프레스 사이트에서는 Lazy Load Images 옵션을 활성화하면 사이트가 약간 이상하게 작동하여 저는 이 옵션을 비활성화하고 있습니다.
"최대 콘텐츠 렌더링 시간 이미지가 지연 로드되었습니다" 에러가 발생할 경우 이미지 지연 로드 기능을 비활성화하여 문제가 해결되는지 체크해 보시기 바랍니다. 캐시 플러그인이나 최적화 플러그인에서 이 옵션이 활성화될 수 있습니다. 또한, a3 Lazy Load 등 이미지 지연 로드를 위한 전용 플러그인에서도 이 기능을 제공합니다.
Breeze나 다른 캐시 플러그인을 사용하는 경우 캐시 플러그인의 옵션을 세부적으로 설정하여 사이트에 문제를 일으키지 않으면서 속도에 가장 좋은 옵션을 찾으시기 바랍니다.
LCP 문제 해결
구글 서치 콘솔에서 LCP(Largest Contentful Paint, 최대 콘텐츠풀 페인트) 문제가 발생하는 경우 캐시 플러그인과 최적화 플러그인을 사용하여 세팅하고, 이미지 크기를 줄이는 등 최적화 조치를 취하면 효과가 있을 수 있습니다.
이미지의 경우 WEBP 포맷으로 변환하고 온라인 이미지 최적화 사이트에서 추가로 이미지를 압축하면 사이즈를 최대한 줄일 수 있습니다. 이미지 크기가 작으면 페이지 로딩 속도를 개선하고 트래픽도 절감하며, SEO(검색엔진 최적화)에도 긍정적인 영향을 미칩니다.
무료 WebP 변환 프로그램 - 꿀뷰 이미지 뷰어 - 워드프레스 정보꾸러미
WebP(웹피)는 구글이 개발한 이미지 포맷으로, 기존 인터넷에서 널리 사용되는 GIF, JPG, PNG 포맷을 대체할 목적으로 만들어졌습니다. 이 포맷의 가장 큰 장점은 동일한 이미지 품질을 유지하면서도
www.thewordcracker.com
유료 화면 캡처 프로그램인 스내그잇(Snagit)을 사용하면 보다 화면을 캡처하여 간단한 편집을 한 후에 WebP 형식으로 이미지를 저장할 수 있어 시간을 절약할 수 있습니다.
화면 캡처 및 편집 프로그램 Snagit: WebP 포맷으로 이미지 저장하기
화면 캡처 및 편집 프로그램인 Snagit이 WebP 파일 포맷으로 이미지를 저장하는 기능이 지난 8월 공개된 Snagit 버전 2022.1.1에 도입되었습니다. 최근 Snagit이 2023 버전으로 업데이트되면서 기능이 조금
avada.tistory.com
마치며
이상으로 워드프레스에서 최대 콘텐츠 렌더링 시간 이미지가 지연 로드 문제 발생 시 확인할 사항에 대하여 살펴보았습니다.
캐시 플러그인이나 최적화 플러그인에서 이미지 지연 로드 기능을 해제하거나 이미지 지연 로드 플러그인이 설치된 경우 비활성화/삭제하면 문제가 해결될 수 있을 것입니다. 뉴스페이퍼 등 일부 테마에서도 이미지 지연 로드 기능이 탑재되어 있을 수 있습니다.
참고
https://avada.tistory.com/3046
해외웹호스팅: 클라우드웨이즈 vs. 블루호스트 vs. 카페24 비교 (Cloudways vs. Bluehost vs. Cafe24)
저는 오랫동안 블루호스트(Bluehost)를 이용해 왔으며 2021년부터는 클라우드웨이즈(Cloudways) 웹호스팅 서비스도 함께 이용하고 있습니다. 현재 일부 중요하지 않는 블로그는 Bluehost에서 호스팅되고
avada.tistory.com
https://avada.tistory.com/3235
카페24 매니지드 워드프레스 PHP 8.2로 업그레이드하기
카페24에서는 이제 매니지드 워드프레스 호스팅 상품과 10G 광아우토반 FullSSD+ 호스팅 상품에서 PHP 8.2를 지원합니다. 비슷한 방법으로 매니지드 워드프레스와 10G 광아우토반 호스팅에서 PHP 버전
avada.tistory.com
