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