웹사이트를 한 번 빠르게 만드는 일은 쉽습니다. 어려운 것은 기능을 계속 추가하면서도 그 속도를 지키는 일입니다. 새 컴포넌트, 폰트, 라이브러리가 하나씩 더해질 때마다 페이지는 조금씩 무거워지고, 사이트가 느리게 느껴질 때까지 아무도 눈치채지 못합니다. 그래서 저희는 속도를 일회성 점검으로 다루지 않고, 모든 변경이 통과해야 하는 테스트로 만들었습니다.
출발점
이 사이트를 처음 제대로 측정했을 때, 로딩 중 레이아웃이 튀었고(Cumulative Layout Shift 약 0.2) 속도를 제한한 모바일 연결에서 주요 콘텐츠가 나타나기까지 4~6초가 걸렸습니다. 기본 스타일시트는 압축 후 41 KB였는데, 대부분 관리자 영역용 컴포넌트와 유효성 검사 코드가 방문자에게도 전송됐기 때문이었습니다.
바꾼 점
- 방문자에게는 방문자용 코드만. 관리자 UI 라이브러리와 폼 유효성 검사 라이브러리는 더 이상 공개 사이트에 포함되지 않습니다. 테스트가 사이트의 import를 따라가며 둘 중 하나라도 다시 들어오면 실패합니다.
- 페이지에 있는 것만을 위한 CSS. 기본 스타일시트는 296 KB에서 98 KB로, 압축 후 16 KB로 줄었습니다.
- 레이아웃을 흔들지 않는 폰트. 핵심 폰트는 미리 로드하고, 필요하지 않을 수도 있는 코드는 더 이상 미리 가져오지 않습니다.
그 상태를 지키는 테스트
모든 풀 리퀘스트마다 CI가 사이트를 빌드하고 프로덕션과 같은 방식(HTTP/2, TLS, 압축)으로 서비스한 뒤, 핵심 페이지 네 곳에서 Lighthouse를 세 번씩 실행해 중앙값을 취합니다. 예산은 다음과 같습니다. 모든 점수 95 이상, 가장 큰 콘텐츠 표시 2초 미만, 레이아웃 이동 0.1 미만, 메인 스레드 차단 200 ms 미만. 변경이 예산을 넘기면 CI가 빨간색으로 바뀌고 그 변경은 머지되지 않습니다. 접근성 검사도 함께 실행되며, 현재 검사 대상 페이지에서 WCAG AA 위반은 발견되지 않습니다.
결과
CI에서는 네 가지 Lighthouse 카테고리 모두 100점이며, 주요 콘텐츠가 1초 안에 나타납니다. 실제 사이트에서는 홈페이지가 100점에 주요 콘텐츠 표시가 약 1.2초이고, 상품 페이지는 98점입니다.
아직 완벽하지 않은 부분도 솔직히 말씀드립니다. 일본어를 비롯한 CJK 언어 페이지는 폰트가 훨씬 커서 더 느립니다. 이 문제는 별도 작업으로 다루고 있습니다.
여러분에게 중요한 이유
느린 페이지는 방문자가 한 단어도 읽기 전에 떠나게 만들고, 검색 엔진도 이를 알아챕니다. 저희와 함께 랜딩 페이지나 온라인 스토어를 만드시면 이 예산이 기본으로 따라옵니다. 추가 옵션이 아니라 저희가 일하는 방식의 일부입니다.