KORBOOSTPerformance 83점, LCP 3.76초
렌더링을 막는 CSS/JS 요청들이 줄줄이 걸려 있어서, 화면에 제일 큰 콘텐츠가 뜨기까지 3.76초가 걸렸습니다. 83점이면 나쁘지 않아 보이지만, LCP 하나만 놓고 보면 체감 속도는 그보다 훨씬 느렸습니다.
왜 우리 사이트를 처음부터 다시 만들었나
첫 번째 작업 케이스는 다른 회사가 아니라 저희 사이트 자체입니다. 구 사이트를 실제로 감사한 결과와, 그걸 근거로 무엇을 어떻게 고쳤는지 그대로 남깁니다.
예전 KORBOOST 사이트는 워드프레스에 Elementor를 얹은, 흔한 구성이었 습니다. 눈으로 보기엔 큰 문제가 없어 보였어요. 그런데 실제로 Lighthouse를 돌려보니 이야기가 달랐습니다.
Performance 점수는 83점. 나쁘지 않은 숫자처럼 보이지만, 그 안을 들여다보면 사정이 다릅니다.
발견한 문제들
폰트 5종 로드, 실사용 2종
히스토리를 뒤져보니 이전에 테스트해보고 안 쓰기로 한 폰트들이 그대로 남아 계속 로드되고 있었습니다. 3종은 완전히 죽은 무게였습니다.
jQuery + jquery-migrate, 사용 흔적 전무
Elementor가 기본으로 깔아주는 스크립트라 당연하다는 듯 들어가 있었는데, 실제로 이 두 라이브러리를 호출하는 코드는 사이트 어디에도 없었습니다.
미사용 CSS/JS 약 76KB
Elementor는 페이지에 쓰는 위젯이 아니라 설치된 모든 위젯의 스타일을 통째로 불러옵니다. 실제로 쓰는 건 몇 개뿐인데 나머지 스타일까지 다 같이 로드된 거죠.
Meta description 없음, 내비게이션 죽은 # 링크
검색결과에 뜰 설명 자체가 없었고, 메뉴 몇 개는 눌러보면 그냥 #으로 끝나는 아무 반응 없는 링크였습니다.
브랜드명이 크롤러에 안 보임
KORBOOST라는 이름이 화면에는 분명히 보이는데, 실제로는 JS로 그린 pixel-grid였습니다. 텍스트로 중복 표기가 안 되어 있어서 크롤러 입장에서는 브랜드명이 아예 없는 페이지였습니다.
무엇을 바꿨나
- 워드프레스/Elementor를 완전히 걷어내고 Astro 정적 사이트로 재구축 — 실제로 쓰는 위젯만큼만 CSS/JS가 나갑니다.
- 폰트를 Pretendard Variable 1종(self-hosted)으로 통일 — 헤딩과 본문, 한글과 영문 모두 이 파일 하나로 처리합니다.
- jQuery/jquery-migrate 제거, 순수 바닐라 JS + islands 구조로 전환.
- 모든 페이지에 meta description을 기본값으로 강제 — 빠뜨릴 수 없게 레이아웃 단에서 처리했습니다.
- 내비게이션 링크를 전부 실제 라우트로 연결 — 죽은 # 링크 제거.
- 브랜드명은 실제 텍스트 + SVG 로고로 표기 — pixel-grid JS 렌더링 방식 폐기.
결과 — 실제로 측정했습니다
재구축이 끝나고 실제 배포된 www.korboost.net/에서 Lighthouse를 돌렸습니다. 지어낸 숫자가 아니라 실측치입니다.
Performance는 83점에서 100점으로, LCP는 3.76초에서 1.5초로 줄었습니다 — 처음 발견했던 렌더링 차단 요청과 미사용 CSS/JS를 걷어낸 결과가 그대로 숫자에 반영됐습니다. 여기에 Worker 라우팅 설정(정적 파일이 엣지 캐시를 안 타고 Worker를 거치던 문제)과 LCP 이미지 우선순위까지 손보고 나니 100점이 나왔습니다. SEO는 100점, Accessibility는 95점.
Best Practices는 78점 — 100은 아닙니다. 이 부분은 다음에 손볼 예정이고, 여기서 미리 좋게만 포장하고 싶지는 않았습니다.