성능 최적화 실무
실측과 실험실이 다를 때 누구를 믿습니까
실험실 데이터는 통제된 조건의 재현 가능한 한 번이고, 실측 데이터는 실제 고객이 겪은 것의 분포입니다. 둘이 어긋날 때는 서로 다른 질문에 답하고 있는 것입니다.
Technote
성능 최적화
캐시 · Redis · Core Web Vitals · 이미지 최적화 · 쿼리 튜닝. 워드프레스를 빠르게 만드는 모든 실측 기반 노하우를 다룹니다.
글 43편· 성능 최적화
성능 최적화 입문
쿼리 프로파일 읽는 법 — 느린 쿼리와 중복 쿼리
같은 화면에 나란히 나오지만 완전히 다른 문제입니다. 한쪽은 쿼리를 고쳐야 하고, 다른 한쪽은 캐시로 사라집니다. 구분이 먼저입니다.
성능 최적화 실무
첫 화면 이미지는 특별 취급해야 합니다
첫 화면의 가장 큰 요소가 그려지는 시점이 곧 체감 속도입니다. 히어로 이미지에 지연 로딩을 걸면 그 시점이 스스로 늦어집니다.
성능 최적화 실무
움직여도 되는 속성과 프레임을 갉아먹는 속성
한 프레임에 허락된 시간은 아주 짧습니다. transform 과 opacity 만이 레이아웃 계산 없이 움직이고, 나머지는 매 프레임 값을 치릅니다.
성능 최적화 입문
Lighthouse 점수는 요약이고, 일은 항목에 있습니다
점수는 여러 지표를 가중 합산한 하나의 숫자입니다. 실행할 수 있는 것은 그 아래 항목 목록이고, 개발자에게 넘길 것도 점수가 아니라 항목입니다.
성능 최적화 심화
폰트가 도착할 때 화면이 흔들리는 이유와 그 해결
웹폰트가 늦게 도착해 글자가 바뀌면 줄 수가 달라지고 그 아래 전부가 밀립니다. 폴백 가족의 메트릭을 웹폰트에 맞추면 이 흔들림이 사라집니다.
성능 최적화 입문
고치기 전에 잽니다 — 최적화의 첫 30분
직관으로 최적화하면 대개 무언가는 좋아집니다. 문제는 그것이 병목이 아니었다는 점입니다. 구간을 나누고 숫자를 얻는 절차부터 정합니다.
성능 최적화 입문
속도가 매출에 닿는 세 갈래 길
"1초 늦으면 전환이 몇 퍼센트 준다" 는 남의 사이트에서 나온 숫자입니다. 속도가 돈에 닿는 경로 세 개를 알고 나면, 우리 사이트에서 직접 잴 수 있습니다.
성능 최적화 심화
테마 감사 — 로드하는 자산과 실제 쓰는 자산
테마는 쓰지 않는 기능의 자산도 함께 내려받는 경우가 많습니다. 무엇이 실려 오는지 목록으로 만들면, 걷어낼 수 있는 것과 아닌 것이 나뉩니다.
성능 최적화 실무
동영상 임베드의 숨은 비용
재생 버튼을 누르지 않아도 플레이어는 이미 로드됩니다. 포스터 이미지를 먼저 보여 주는 방식으로 그 비용을 클릭한 사람에게만 물릴 수 있습니다.
성능 최적화 심화
폴백 폰트 메트릭 보정으로 흔들림 없애기
웹폰트가 도착할 때 화면이 흔들리는 이유는 폰트가 늦어서가 아니라 폴백 폰트와 글자 폭·높이가 다르기 때문입니다. 그 둘을 맞춰 두면 교체가 일어나도 레이아웃이 그대로입니다.
성능 최적화 실무
속도가 매출에 닿는 경로를 우리 사이트에서 재기
"1초 느리면 매출이 얼마 준다" 는 남의 사이트 숫자입니다. 우리 사이트의 이탈 지점은 우리가 재야 하고, 재는 방법은 어렵지 않습니다.