리뷰로거 — 모바일 성능 66점을 99점으로, 진짜 병목은 이미지가 아니었다

01프로젝트

리뷰로거 ↗ — 체험단 공고 통합검색 서비스. 유환호의 역할: 기획 · 개발 · 수집 파이프라인 · SEO·AEO · 운영.

02문제

느린 첫 화면은 사람의 이탈뿐 아니라 검색엔진의 페이지 경험 평가에도 불리하다. 검색 색인이 답변엔진의 출발점인 만큼 기술 SEO의 기본기다.

03기준선 (Baseline)

• —모바일 PageSpeed 성능 66점.
• —느린 4G 기준 첫 콘텐츠 표시(FCP) 2.8초, 시뮬레이션 FCP 4.2초.
• —가장 큰 핫링크 썸네일 1.1MB.
• —홈 서버 응답 930ms.

04측정 방법

• —PageSpeed Insights(모바일·데스크톱)로 점수와 진단 항목을 기록했다.
• —로컬 진단 도구로 4배 CPU 스로틀 조건에서 병목을 다시 분해했다.

05실행한 변경

• —폰트를 preload + onload 승격으로 비차단화하고 대체 폰트 폴백을 넣었다.
• —큰 썸네일을 이미지 프록시로 축소·변환했다(모바일 512KiB, 데스크톱 2.2MiB 절감).
• —카드에 걸린 복잡한 CSS 선택자를 직접 클래스 부여 방식으로 바꿨다(스타일·레이아웃 계산 800ms 이상이 원인).
• —애널리틱스를 로드 완료 1.5초 뒤 주입하되 페이지뷰 유실이 없도록 임시 저장소를 먼저 준비했다.
• —접힌 섹션은 렌더링을 건너뛰게 하고 스타일시트를 인라인했다.
• —엣지 캐시 배포 직후 빈 본문 응답 사고가 나 몇 분 만에 되돌렸고, 응답을 완전히 버퍼링한 뒤 새 응답 객체를 만드는 방식으로 다시 구현했다.

06동일 조건 재측정

같은 도구(PageSpeed Insights)·같은 페이지로 다시 측정했다.

07결과

• 모바일 성능 99점, 나머지 항목 100점.
• 데스크톱 성능·접근성·권장사항·SEO 전부 100점.
• 홈 서버 응답 930ms → 270ms.

08한계

• —PageSpeed 점수는 측정마다 편차가 있다. 남은 1점은 측정 편차와 별도 애널리틱스 도구의 중복 비콘 때문으로 본다.
• —성능 개선이 검색 순위나 AI 답변 노출에 준 영향은 따로 재지 않았다.

09다음 실험

중복 비콘을 운영 설정에서 정리하고, 실사용자 지표(Core Web Vitals 필드 데이터)를 확인한다.

10관련 원자료

• 기록 기록 — 모바일 속도 66점을 99점으로 올리며 진짜 병목을 다시 찾았다