이미지는 홈페이지를 돋보이게 하고 의미 전달을 부드러우면서도 명확하게 해줍니다. 그러나, 천하의 명약도 잘 못 쓰면 독이 되듯이, 이미지에 대해 잘 모르고 사용하면 워드프레스 블로그의 성능을 갉아 먹을 수 있습니다. 가장 듬직한 아군이 알고보니 무서운 적군이었던 거죠.
먼저 자신의 홈페이지에 이미지가 제대로 잘 사용되고 있는지 알기위해서, Pagespeed Insights의 점검사항을 확인해봅니다.
블로그 최적화 점검
예시로 NaOneCharm.com 이라는 사이트를 점검해 본 결과는 다음과 같습니다.
모바일 부분에서 Performance 가 매우 떨어집니다. 처음 html을 접수하고 가장 큰 이미지가 그려지기까지 걸린 시간, 즉 Largest Contentful Paint(LCP)가 6.2 s 입니다. 가장 처음 렌더링된 요소는 1.9 s가 걸렸습니다. 이런 경우, 사용자들이 들어왔다가도 그냥 나가버리는 사이트가 될 수도 있습니다.
가장 큰 이미지가 로딩되는 시간이 6.2초가 걸렸는데, Load Delay가 4.4초로 그 중 대부분을 차지합니다. 실제 Load Time은 1초니까 심각한 문제는 아닙니다. 이런 경우, LCP(Largest Contentful Paint)를 2.5이내로 향상시키기 위해서는 이미지 최적화 뿐만 아니라, 다른 원인을 찾아 해결해야합니다. 즉, 이미지가 로딩이 시작되기 전 단계에서 심각한 문제가 있습니다.
여기까지 읽으시고 이해가 잘 안되시면, 이전 블로그 글을 먼저 읽어보세요.
Load Delay 에 대한 원인 분석
보통 html이 접수되고 style sheet이 표현됨과 동시에 이미지가 로딩되어야합니다. 그 후에 자바스크립트 같은 스크립트가 작동하게 됩니다. 그런데, 위 경우를 보면 html 접수 시점과 이미지로딩 시작 시점 사이에 어떤 방해요소(Blocking Element)가 있으리라 추측됨니다.
HTML 헤더 분석
사이트의 헤더부분을 살펴보겠습니다. 헤더부분에 ‘구글 사이트 킷’이라는 플러그인에서 넣어놓은 javascript파일이나 link들이 수도 없이 나열되어 있습니다. <head> 부분에서는 stylesheet 외에 다른 스크립트를 작동시키고 있다면 그 부분이 방해요소(Blocking Element)가 됩니다. 그 방해요소들이 이미지 로딩 전에 실행되면서 이미지 로딩이 Delay되는 거예요.
<head>
<meta charset="UTF-8">
<!-- 사이트 킷에 의해 추가된 구글 애널리틱스 옵트아웃 스니펫 -->
<script src="https://pagead2.googlesyndication.com/pagead/managed/js/adsense/m202405020101/show_ads_impl_fy2021.js"></script>
<script>window["ga-disable-G-KYVP9DHXBY"] = true;
</script>
<!-- 사이트 킷에 의해 추가된 구글 애널리틱스 차단 스니펫 종료 -->
<meta name="robots" content="max-image-preview:large">
<meta name="viewport" content="width=device-width, initial-scale=1"><link rel="dns-prefetch" href="//www.googletagmanager.com">
<link rel="dns-prefetch" href="//pagead2.googlesyndication.com">
<link rel="alternate" type="application/rss+xml" title="NaOneCharm.com » 피드" href="https://naonecharm.com/feed/">
<link rel="alternate" type="application/rss+xml" title="NaOneCharm.com » 댓글 피드" href="https://naonecharm.com/comments/feed/">
......... 이하 생략 ............
</head>자바스크립트의 경우 방해요소로 작용하지 않도록 head가 아니라 html body 마지막 부분에 놓여지는 것이 일반적입니다. 그렇게하면 LCP 가 짧아지니까요.
사이트 점검 보고서 재확인
다시한번 Pagespeed Insights 보고서에서 Third Party Code에 관한 내용을 찾아봅니다. 역시나 구글 애드 관련 Third Party Code 들이 무수히 많이 보입니다.
이 블록킹 요소들이 0.5초 동안 블록했다고 나오지만, 실제로는 그 후에도 이미지 로딩 속도나 다른 style sheet 실행 속도에 영향을 미쳤을 가능성이 높습니다. 그렇다면, 구글 사이트 킷이 어떤 이유로 이렇게 지연을 초래하는 지 분석해서 해결하는 것이 급선무입니다. 구글 사이트 킷이 모든 사이트에서 악영향을 미치는 것이 아니지만, 다른 플러그인들과 충돌하는 등의 문제가 있을 수 있습니다.
이 경우는 이미지가 사이트 성능을 떨어뜨리는 직접적인 요인이 아니라는 것이 밝혀졌습니다. 그런데 우리는 왜 이미지 로딩에 주목할까요?
우리는 왜 이미지를 주목하는가?
가장 큰 이미지의 로딩이 완료되기까지의 시간을 측정하는 LCP(Largest Contentful Paint)는 사이트의 문제점을 찾아나가는 데에 있어 큰 기준이 됩니다. 설사, 이미지 로딩 속도 자체가 범인이 아니었다하더라도 이미지의 로딩을 방해하는 요소를 추적함으로써 문제의 해결책을 찾아가는 것입니다. 블로그 최적화 길을 알려주는 이정표가 되는 셈이죠.
위의 예에서, 우리는 구글 사이트 킷 플러그인을 제거하면 이미지 로딩속도의 빨라질 수 있겠다는 가설을 정립할 수 있습니다. 그 플러그인을 제거해서 LCP가 2.5초 안으로 들어온다면, 가설을 확정할 수 있는 겁니다.
맺음말
이 글에서는 워드프레스 블로그 최적화의 과정을 깊이 살펴보았습니다. 코딩을 전혀 몰랐던 분들에게는 조금 어렵게 느껴질 수도 있었겠지만, 이 글을 반복해서 보시면서 사이트 분석툴을 여러번 사용해보시면, 스스로 사이트를 관리할 수 있는 능력이 자연스럽게 생기게 될 것입니다.
이미지를 왜 주목해야하는 지에 대해 이야기했으니, 다음 블로그 글에서는 이미지 자체의 최적화 방법에 대해 깊이 다루어보겠습니다.