◆ number-flow 개선기 · 4편
number-flow를 에이전트에게 맡기면 어디까지 고칠까
코딩 에이전트 다섯 개가 고친 number-flow와 내 포크 v0.2.1을 다시 비교해보기. 글꼴에 따라 달라진 성능 보고, 작성자를 가린 코드 리뷰, 마스크 기본값을 유지하기로 한 후속 실험
20 POSTS
Browser 1
◆ number-flow 개선기 · 3편number-flow 갱신 경로의 강제 동기 레이아웃 줄이기
number-flow의 값을 바꿀 때마다 스타일과 레이아웃을 여러 번 다시 계산하던 문제. 0.2.1에서 DOM을 읽고 쓰는 순서를 바꾸며 확인한 성능 변화와 남은 비용
◆ Core Web Vitals 직접 수집하기 · 3편앱 웹뷰의 핵심 웹 지표를 공용 관측 인프라로 보내기
앱 웹뷰에서 측정한 핵심 웹 지표를 공용 관측 인프라로 보낼 때 일부 값이 누락되는 문제. 웹뷰의 이탈 이벤트부터 tail sampling, 누적 변환, Tempo 조회까지 재현 환경에서 확인하고, 수집 코드를 바꿔 해결할 수 있는 범위 가늠해보기
◆ Core Web Vitals 직접 수집하기 · 2편페이지를 떠나는 순간 핵심 웹 지표를 보내기
페이지를 떠날 때 CLS와 INP가 누락되는 원인을 OTel JS의 전송 방식과 flush 순서에서 찾기
◆ Core Web Vitals 직접 수집하기 · 1편web-vitals는 언제 핵심 웹 지표를 보고하는가
web-vitals 6.2.3의 지표별 보고 조건과, 클릭 직후 페이지를 떠날 때 INP가 누락되는 원인
◆ number-flow 개선기 · 2편number-flow 성능 개선기: 애니메이션을 합성 스레드로 옮기기
구형 브라우저를 지원하려고 만든 number-flow 포크에서, 모던 브라우저에서도 매 프레임 스타일을 다시 계산하던 애니메이션. 0.2.0에서 가산 합성으로 만들던 움직임을 transform과 opacity 키프레임으로 옮긴 과정과, 마스크와 인터럽트에 남은 비용
Next.js 앱의 Marp 슬라이드를 오프라인에 저장하기
기존 Marp 뷰어를 그대로 오프라인에서 실행하려던 첫 시도부터, 배포, 네트워크, 발표자 창에서 드러난 문제를 하나씩 보완해 오프라인 저장 기능을 완성하기까지의 과정
실행하지 않는 JavaScript를 10MiB까지 늘려봤다
호출하지 않는 함수가 10MiB 들어 있으면 얼마나 손해일까. 파일 크기에서 오는 비용과 코드 형태에서 오는 비용을 나눠 855회 측정한 결과, 호출하지 않는 선언은 MiB당 약 21ms, 파일을 읽자마자 실행되는 초기화 코드는 MiB당 201ms. 실제 라이브러리에서 import만으로 실행되는 모듈 평가까지 확인해보기
여러 웹뷰에서 하나의 웹 운영하기: 환경 분기를 어댑터로 모은 과정
자사 앱과 파트너 앱의 iOS, Android 웹뷰를 지원하며 흩어진 환경 분기를 어댑터로 모으기. 인셋, 브릿지, CSS를 정리한 방법과 SSR 시드, hydration에서 겪은 문제들
◆ 서비스 워커 캐싱 딥다이브 · 3편서비스 워커 경유 비용 실측: GA4가 답하지 못한 대조군을 랩에서 만들기
2편에서 워커 경유 비용으로 남겨 둔 500ms 확인하기. 대조군이 될 하드 리로드가 하루 한 건도 안 돼 Playwright와 셰이핑 프록시로 직접 만든 대조군에서 잰 워커 경유 비용은 내비게이션당 2ms. 글을 클릭할 때 늘어난 시간 대부분은 워커가 배경에서 글 HTML을 저장하며 같은 회선을 나눠 쓴 결과이고, 랩과 실사용자 데이터가 어긋난 원인은 103 Early Hints 때문에 달라진 측정 정의
framer-motion 배너에서 프레임드랍 없애기: 두 번의 삽질과 이징 함수
framer-motion으로 만든 배너가 열리는 0.6초 동안 버벅인 홈 화면. 코드를 읽고 세운 추정이 실측에서 두 번 뒤집힌 끝에 이징 함수 하나로 리플로우를 없앤 과정
◆ 서비스 워커 캐싱 딥다이브 · 1편서비스 워커 캐싱의 동작 원리: 프록시, 라이프사이클, 다섯 가지 전략
『프런트엔드 성능 최적화 Deep Dive』의 캐시 장에 다 싣지 못한 서비스 워커 이야기. 캐시가 왜 오래된 채로 남는지, 배포한 뒤에도 왜 옛 버전이 보이는지, 무엇을 어떤 전략으로 저장할지, 정말 써야 하는지 따져보고, 104KB짜리 opaque 응답이 저장 용량에는 6.6MB로 집계되는 현상까지 측정해보기
◆ number-flow 개선기 · 1편number-flow를 구형 브라우저로 이식하기: 다섯 가지 결정과 두 가지 번복
Chrome 125, Safari 17.2부터 애니메이션을 켜는 number-flow의 하한을 Chrome 66과 WebKit 16.4까지 내리는 포크를 만들며 두 번 번복한 판단과, Safari 버그를 조사한 끝에 자동 강등을 포기한 이유
『프런트엔드 성능 최적화 Deep Dive』가 출간되었습니다.
🙇🏻♂️
React의 <ViewTransition>: 브라우저 네이티브 애니메이션을 React답게
View Transition API를 React가 감싸면 어떻게 되는가
IntersectionObserver 싱글톤 패턴과 WeakMap으로 메모리 누수 방지하기
수백 개의 요소를 효율적으로 관찰하면서 메모리 누수도 방지하는 방법
WebGPU, 드디어 모든 브라우저에서 사용 가능해지다
2025년 7월, 14년 만에 브라우저 GPU API 세대교체가 완료됐다
- ◆ 웹 서비스 성능 분석 · 4편
웹 서비스 성능 분석 (4)
나도 해볼까.. 라는 생각이 든다면 바로 지금 연락주세요!!
브라우저의 프리로드 스캐너(pre-load scanner)와 파싱 동작의 이해
브라우저 최적화랑 싸우지마
Largest Contentful Paint (LCP) 최적화하기
브라우저 동작 방식을 이해하기