남의 서비스를 분석할 때는 못 하는 일이 있다. 스타일 작성 방식을 통째로 갈아 끼우거나, 빌드 파이프라인을 다른 언어로 다시 쓰거나, 실패한 시도를 지우지 않고 그대로 남겨두는 것이 그렇다. 이 시리즈는 그런 일을 이 블로그에서 해본 기록이다.
각 편은 같은 방식으로 쓴다. 바꾸기 전과 후를 같은 조건에서 재고, 좋아진 것과 나빠진 것을 함께 적고, 측정해 보고 접은 방법까지 남긴다. 숫자가 기대와 반대로 나온 편도 있다.
◆ SERIES · 3 POSTS
블로그 성능 개선하기
다른 사이트가 아니라 이 블로그를 직접 고쳐가며 남긴 실측 기록. 스타일 전송량, 빌드 시간, 렌더를 막는 자원을 하나씩 붙잡고 전후를 같은 조건에서 재봤다
README
03 ITEMS
전체 글
in order
01
Tailwind를 StyleX로 옮기며 다시 따져본 성능
블로그의 Tailwind 4를 StyleX로 옮겼다. 유틸리티만 옮긴 중간 상태에서는 CSS와 FCP가 줄었지만 전체 전송량은 늘었다. 전환 범위를 넓히자 홈 FCP가 59% 느려졌고, 작성 방식을 고친 뒤에도 격차가 남았다. 마지막 개선은 KaTeX 조건부 로딩과 본문 CSS 분리에서 나왔다. CSS 크기와 전체 전송량, 페인트 지표를 따로 비교한 기록이다. 블로그 성능 개선하기 시리즈의 첫 편이다.