성능 최적화 심화
테마 감사 — 로드하는 자산과 실제 쓰는 자산
테마는 쓰지 않는 기능의 자산도 함께 내려받는 경우가 많습니다. 무엇이 실려 오는지 목록으로 만들면, 걷어낼 수 있는 것과 아닌 것이 나뉩니다.
Technote
성능 최적화
캐시 · Redis · Core Web Vitals · 이미지 최적화 · 쿼리 튜닝. 워드프레스를 빠르게 만드는 모든 실측 기반 노하우를 다룹니다.
글 47편· 성능 최적화
성능 최적화 실무
동영상 임베드의 숨은 비용
재생 버튼을 누르지 않아도 플레이어는 이미 로드됩니다. 포스터 이미지를 먼저 보여 주는 방식으로 그 비용을 클릭한 사람에게만 물릴 수 있습니다.
성능 최적화 심화
폴백 폰트 메트릭 보정으로 흔들림 없애기
웹폰트가 도착할 때 화면이 흔들리는 이유는 폰트가 늦어서가 아니라 폴백 폰트와 글자 폭·높이가 다르기 때문입니다. 그 둘을 맞춰 두면 교체가 일어나도 레이아웃이 그대로입니다.
성능 최적화 실무
속도가 매출에 닿는 경로를 우리 사이트에서 재기
"1초 느리면 매출이 얼마 준다" 는 남의 사이트 숫자입니다. 우리 사이트의 이탈 지점은 우리가 재야 하고, 재는 방법은 어렵지 않습니다.
성능 최적화 실무
서버를 올려야 하는 신호는 느림이 아닙니다
증설로 해결되는 문제와 안 되는 문제는 처음부터 갈려 있습니다. 구분하지 않고 요금제를 올리면 돈은 쓰고 문제는 그대로 남습니다.
성능 최적화 실무
font-display — 안 보이는 글자와 바뀌는 글자 사이
웹폰트가 도착하기 전의 몇백 밀리초를 어떻게 쓸지 정하는 속성입니다. 선택지는 다섯 개지만 실제 판단은 "빈 화면"과 "바뀌는 화면" 중 무엇을 받아들이느냐 하나입니다.
성능 최적화 실무
사진 올리기 전 30초가 속도를 바꿉니다
카메라와 휴대폰이 만드는 원본은 화면에 필요한 것보다 훨씬 큽니다. 올리기 전에 세 가지만 손보면 첫 화면이 눈에 띄게 빨라집니다.
성능 최적화 입문
우리 방문자의 실제 환경, 통계 대신 우리 데이터로
"요즘은 모바일이 대부분" 이라는 말은 우리 사이트의 답이 아닙니다. 답은 이미 우리 분석 화면에 있고, 확인하는 데 10분이면 됩니다.
성능 최적화 실무
지연 로딩의 예외 — 첫 화면 이미지
지연 로딩은 대부분의 이미지에 옳습니다. 그런데 첫 화면의 큰 이미지에 걸면, 성능 지표가 측정하는 바로 그 대상을 늦추게 됩니다.
성능 최적화 실무
한글 서브셋 분할 — 11,172자를 다 내려받지 않는 법
한글 폰트가 무거운 이유는 분명합니다. 현대 한글 음절 조합만 11,172개이기 때문입니다. unicode-range로 나누면 브라우저가 그 페이지에 실제로 쓰인 조각만 가져갑니다.
성능 최적화 입문
첫 화면이 뜨는 몇 초 동안 무슨 일이 일어나나
방문자는 속도를 초로 기억하지 않고 인상으로 기억합니다. 그 인상을 만드는 것은 대기 시간이 아니라 대기 중에 보이는 화면입니다.