지난 5월 1일을 기점으로 드디어 티스토리 블로그의 LCP(Largest Contentful Paint) 최적화 작업을 모두 마쳤습니다. 덕분에 까다롭기로 소문난 구글 바이메트릭 평가(Biometric Evaluation)도 다시 기분 좋게 통과할 수 있었는데요. 사실 이런 작업은 단순히 숫자를 높이는 것 이상의 의미가 있습니다. 우리 블로그를 찾아주시는 방문자분들이 느끼는 체감 로딩 속도를 높여서 훨씬 쾌적한 사용자 경험을 선사할 수 있기 때문이죠.
우리가 흔히 말하는 SEO 최적화나 검색 상위 노출을 아무리 외쳐도, 구글이 표준으로 제시하는 바이메트릭 지표를 맞추지 못한다면 기초 공사가 부실한 집과 다름없습니다. 블로그 운영의 가장 기본이 되는 웹 성능 개선 작업이 제대로 이루어졌는지 판단하는 냉정한 잣대라고 볼 수 있습니다.
구글 바이메트릭 평가란 무엇일까요?
저 같은 경우 SEO 관련 전문 자료나 정보를 찾을 때 가장 먼저 확인하는 것이 있습니다. 바로 그 정보를 제공하는 사이트가 구글 바이메트릭 평가를 제대로 통과했는지 여부인데요. 기본 중의 기본인 이 평가조차 통과하지 못한 곳의 정보는 신뢰도가 떨어진다고 판단하기 때문입니다. 그만큼 바이메트릭은 SEO의 핵심 지표라고 해도 과언이 아닙니다.
티스토리 웹 성능 개선의 여정
한때 이유 없이 무너진 LCP 점수와 엉망이 된 권장사항 점수 때문에 밤잠을 설치기도 했습니다. 특히 CLS(누적 레이아웃 이동) 수치가 예고 없이 흔들릴 때면 정말 방심할 틈이 없더라고요.
이번 작업에서 CLS 영역은 직접 손대지 않았지만, 다행히 서서히 회복되는 모습을 보이고 있습니다. 사실 티스토리 CLS 문제는 플랫폼 자체 광고 시스템 때문에 구조적으로 레이아웃이 출렁거리는 경우가 많습니다. 우리 눈에는 멀쩡해 보여도 구글 AI는 미세한 화면 흔들림조차 검색 품질을 떨어뜨리는 요소로 간주하기 때문에 절대 가볍게 넘겨서는 안 되는 부분입니다.
또한 핵심 웹 지표 권장사항(Core Web Vitals Recommendations) 점수가 여전히 낮게 나오는 점은 아쉬움으로 남습니다. 이는 개인이 조절하기 힘든 티스토리 자체 광고 영향이 크기 때문인데요. SEO에 치명타를 줄 정도는 아니라고 하지만, 완벽한 블로그 최적화를 꿈꾸는 입장에서는 못내 아쉽고 신경 쓰이는 대목이기도 합니다.
바이메트릭 평가의 핵심 요소 3가지
구글이 사용자 경험을 판단할 때 중요하게 보는 바이메트릭(Biometric)은 단순히 사이트가 빨리 열리는지만 보는 게 아닙니다. 얼마나 안정적이고 몰입감 있는 환경을 제공하는지를 종합적으로 분석하죠. 특히 크롬 사용자 데이터를 기반으로 평가되기 때문에 실제 모바일 검색 순위에도 직접적인 영향을 줍니다.
| 항목 | 상세 설명 |
|---|---|
| LCP (Largest Contentful Paint) | 페이지에서 가장 큰 콘텐츠(이미지나 텍스트)가 화면에 완전히 나타나는 시간입니다. 2.5초 이내가 가장 좋습니다. |
| CLS (Cumulative Layout Shift) | 로딩 중에 글자나 이미지가 툭툭 튀어나오며 화면이 밀리는 정도를 말합니다. 0.1 미만을 유지해야 합니다. |
| FID/INP (입력 반응 속도) | 사용자가 클릭했을 때 얼마나 빨리 반응하는지를 측정합니다. 최근에는 더 포괄적인 INP 지표로 바뀌는 추세입니다. |
이번에 진행한 LCP 최적화 비법
답답했던 LCP 수치를 개선하기 위해 저는 다음과 같은 구체적인 작업을 진행했습니다.
- 첫 화면에 바로 보이는 블로그 썸네일의 지연 로딩(Lazy Loading) 기능을 제거하여 우선 노출되게 했습니다.
- 로딩 속도를 잡아먹는 외부 JS와 CSS 파일들을 비동기 로드 방식으로 처리했습니다.
- 본문 영역의 텍스트가 먼저 그려질 수 있도록 렌더링 순서를 조정했습니다.
- 글꼴이 늦게 뜨면서 화면이 변하는 것을 막기 위해 폰트 로딩 방식을 개선했습니다.
이러한 사이트 속도 개선 작업을 거친 결과, 기존에 3.6초나 걸리던 LCP 수치가 2초 대로 획기적으로 줄어들었습니다. 덕분에 구글 페이지스피드 인사이트 결과도 ‘실패’에서 ‘통과’로 멋지게 바뀌었답니다.
아직 남은 숙제: CLS와 광고 레이아웃
현재 CLS 지표는 ‘보통’ 구간에 머물러 있어 조금 더 지켜봐야 할 것 같습니다. 가장 큰 원인은 티스토리 자동 삽입 광고가 페이지 로딩 중간에 갑자기 끼어들며 콘텐츠를 아래로 밀어내는 현상인데요. 저는 이미 광고 흔들림 방지 코드를 적용해 두었기에, 다른 미세한 요인이 있는지 시간을 두고 지속적인 모니터링을 할 계획입니다.
티스토리를 사용하는 우리들에게 웹 성능 최적화는 단순히 자기만족이 아닙니다. 방문자 유지율을 높이고 광고 수익화를 극대화하기 위한 필수 전략이죠. 이번에 LCP를 수정하고 바이메트릭 평가를 통과한 것은 아주 기초적인 단계일 뿐입니다.
