성능 최적화 실무
태그 하나가 더하는 밀리초는 누가 냅니까
추적 스크립트는 내려받고 끝나지 않습니다. 파싱과 실행이 메인 스레드를 점유하는 동안 페이지는 손가락에 반응하지 않습니다. 그 비용은 직접 잴 수 있습니다.
Technote
성능 최적화
캐시 · Redis · Core Web Vitals · 이미지 최적화 · 쿼리 튜닝. 워드프레스를 빠르게 만드는 모든 실측 기반 노하우를 다룹니다.
글 38편· 성능 최적화
성능 최적화 실무
워드프레스 Redis 오브젝트 캐시 — 적용 전에 알아야 할 것과 실측 결과
워드프레스가 느린 원인의 상당수는 페이지를 만들 때마다 같은 데이터베이스 쿼리를 반복하는 데 있습니다. Redis 오브젝트 캐시는 이 반복 쿼리를 메모리에서 꺼내 쓰게 만들어, 특히 관리자…
성능 최적화 심화
Redis 오브젝트 캐시 적중률을 읽는 법 — 90%가 항상 좋은 것은 아니다
적중률 숫자 하나만 보고 캐시가 잘 돌고 있다고 판단하면, 정작 느린 화면은 그대로 남습니다. 어떤 키가 몇 번 조회되는지까지 내려가 봐야 병목이 보입니다.
성능 최적화 실무
오브젝트 캐시 — Redis 를 붙이면 실제로 줄어드는 것
반복되는 동일 조회는 사라집니다. 느린 쿼리 한 건은 그대로입니다. 이 구분을 모르면 캐시를 붙여 놓고 왜 안 빨라지는지 묻게 됩니다.
성능 최적화 실무
N+1 쿼리 — 루프 안의 get_post_meta 와 캐시 프라이밍
WP_Query 는 자기 결과에 대해서만 캐시를 채웁니다. 손으로 만든 ID 목록에는 그 혜택이 따라오지 않고, 그 차이가 쿼리 수를 결정합니다.
성능 최적화 실무
LCP 를 줄이는 프리로드 체크리스트 — 실측으로 고른 자원만
preload 는 우선순위를 사는 게 아니라 빌리는 것입니다. 남발하면 정작 급한 자원이 밀립니다. LCP 요소를 실측으로 특정하고 그 경로의 자원만 올리는 순서를 정리합니다.
성능 최적화 실무
실측과 실험실이 다를 때 누구를 믿습니까
실험실 데이터는 통제된 조건의 재현 가능한 한 번이고, 실측 데이터는 실제 고객이 겪은 것의 분포입니다. 둘이 어긋날 때는 서로 다른 질문에 답하고 있는 것입니다.
성능 최적화 입문
쿼리 프로파일 읽는 법 — 느린 쿼리와 중복 쿼리
같은 화면에 나란히 나오지만 완전히 다른 문제입니다. 한쪽은 쿼리를 고쳐야 하고, 다른 한쪽은 캐시로 사라집니다. 구분이 먼저입니다.
성능 최적화 실무
첫 화면 이미지는 특별 취급해야 합니다
첫 화면의 가장 큰 요소가 그려지는 시점이 곧 체감 속도입니다. 히어로 이미지에 지연 로딩을 걸면 그 시점이 스스로 늦어집니다.
성능 최적화 실무
움직여도 되는 속성과 프레임을 갉아먹는 속성
한 프레임에 허락된 시간은 아주 짧습니다. transform 과 opacity 만이 레이아웃 계산 없이 움직이고, 나머지는 매 프레임 값을 치릅니다.
성능 최적화 입문
Lighthouse 점수는 요약이고, 일은 항목에 있습니다
점수는 여러 지표를 가중 합산한 하나의 숫자입니다. 실행할 수 있는 것은 그 아래 항목 목록이고, 개발자에게 넘길 것도 점수가 아니라 항목입니다.