yceffort
◆ SERIES · 3 POSTS

블로그 성능 개선하기

다른 사이트가 아니라 이 블로그를 직접 고쳐가며 남긴 실측 기록. 스타일 전송량, 빌드 시간, 렌더를 막는 자원을 하나씩 붙잡고 전후를 같은 조건에서 재봤다

README

남의 서비스를 분석할 때는 못 하는 일이 있다. 스타일 작성 방식을 통째로 갈아 끼우거나, 빌드 파이프라인을 다른 언어로 다시 쓰거나, 실패한 시도를 지우지 않고 그대로 남겨두는 것이 그렇다. 이 시리즈는 그런 일을 이 블로그에서 해본 기록이다.

각 편은 같은 방식으로 쓴다. 바꾸기 전과 후를 같은 조건에서 재고, 좋아진 것과 나빠진 것을 함께 적고, 측정해 보고 접은 방법까지 남긴다. 숫자가 기대와 반대로 나온 편도 있다.

03 ITEMS

전체 글

in order
01

Tailwind를 StyleX로 옮기며 다시 따져본 성능

#css#web-performance#blogging
블로그의 Tailwind 4를 StyleX로 옮기기. 유틸리티만 옮겼을 때 CSS 크기와 FCP는 줄었지만 전체 전송량은 늘어난 중간 단계와, 전환 범위를 넓히자 59% 느려진 홈 FCP. 작성 방식을 고친 뒤에도 남은 격차를 줄인 방법은 KaTeX 조건부 로딩과 본문 CSS 분리
수정
51분 · read
02

블로그의 마크다운 파이프라인을 Rust/WASM으로 옮기기

#rust#markdown#blogging
블로그의 remark/rehype 체인을 Rust로 옮기고 WASM으로 빌드해 Next.js 서버에서 호출하기. 파싱, HAST 생성, Oniguruma 하이라이트, MathML 수식, 이미지 크기와 MDX 속성 처리를 한 번의 호출로 끝내는 구조. 메모리 전달과 해제, 기존 글과의 호환, WASI 바이너리 배포를 구성하며 얻은 것과 감수한 비용
수정
62분 · read
03

블로그를 고친 뒤 첫 화면을 다시 재봤다

#web-performance#blogging#debugging
블로그 마이그레이션 뒤 5.6초까지 늘어난 수식 글의 LCP. 일반 웹 글꼴을 코드에서 제거해 LCP를 2.4초로 줄이고, 수식 전용 글꼴은 쓰는 글리프만 남겨 334KiB에서 26KiB로 줄이기
수정
44분 · read