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