성능 최적화 실무
지연 로딩의 예외 — 첫 화면 이미지
지연 로딩은 대부분의 이미지에 옳습니다. 그런데 첫 화면의 큰 이미지에 걸면, 성능 지표가 측정하는 바로 그 대상을 늦추게 됩니다.
Technote
성능 최적화
캐시 · Redis · Core Web Vitals · 이미지 최적화 · 쿼리 튜닝. 워드프레스를 빠르게 만드는 모든 실측 기반 노하우를 다룹니다.
글 38편· 성능 최적화
성능 최적화 실무
한글 서브셋 분할 — 11,172자를 다 내려받지 않는 법
한글 폰트가 무거운 이유는 분명합니다. 현대 한글 음절 조합만 11,172개이기 때문입니다. unicode-range로 나누면 브라우저가 그 페이지에 실제로 쓰인 조각만 가져갑니다.
성능 최적화 입문
첫 화면이 뜨는 몇 초 동안 무슨 일이 일어나나
방문자는 속도를 초로 기억하지 않고 인상으로 기억합니다. 그 인상을 만드는 것은 대기 시간이 아니라 대기 중에 보이는 화면입니다.
성능 최적화 실무
DB가 커지면 생기는 일 — 리비전 · 트랜지언트 · 로그
데이터베이스는 콘텐츠보다 훨씬 빨리 자랍니다. 자라는 것의 대부분은 우리가 만든 글이 아니라 자동으로 쌓인 부산물입니다.
성능 최적화 실무
데스크톱에서만 확인하면 놓치는 것들
만드는 사람은 큰 화면으로 보고, 방문자는 작은 화면으로 봅니다. 이 차이에서 생기는 문제는 대부분 눈에 띄지 않고 조용히 이탈을 만듭니다.
성능 최적화 실무
휴대폰에 데스크톱 이미지를 보내지 않는 법
srcset 은 브라우저에게 후보를 주고, sizes 는 그중 무엇을 고를지 알려 줍니다. 둘 중 하나만 맞으면 나머지 하나가 결과를 망칩니다.
성능 최적화 실무
웹폰트 자체 호스팅 — CDN을 쓰지 않을 때 얻는 것
공용 폰트 CDN의 가장 큰 장점이었던 "다른 사이트에서 이미 받아 둔 캐시"는 브라우저 캐시 분리 이후 사라졌습니다. 남은 것은 왕복 비용과 통제권의 문제입니다.
성능 최적화 실무
적은 돈으로 속도를 가장 많이 얻는 자리
이미지는 대체로 페이지에서 가장 무거운 부분이고, 그것을 줄이는 방법은 순서대로 하면 거의 돈이 들지 않습니다. CDN 은 마지막 칸입니다.
성능 최적화 실무
워드프레스가 만드는 이미지 크기들
한 번 업로드하면 파일이 여러 개 생깁니다. 그중 화면에 한 번도 쓰이지 않는 것이 있다면 디스크와 srcset 을 동시에 어지럽힙니다.
성능 최적화 실무
갑자기 유입이 몰릴 때 사이트가 버티게 하는 준비
기회는 예고 없이 옵니다. 소개 글 하나로 몰린 방문자를 흰 화면으로 맞이하지 않으려면, 평소에 해 둘 준비가 몇 가지 있습니다.
성능 최적화 입문
업로드 전에 정해 두는 최대 크기
카메라 원본을 그대로 올려도 화면은 멀쩡해 보입니다. 그래서 문제가 늦게 발견됩니다 — 워드프레스가 그 뒤에서 무엇을 하는지 알면 기준이 잡힙니다.
성능 최적화 입문
캐시란 무엇인가 — 계층이 다르면 하는 일도 다릅니다
캐시는 하나의 스위치가 아닙니다. 하는 일이 다른 계층 여럿이고, 그 차이를 모른 채 겹쳐 켜면 "나에게만 안 바뀌는 화면" 이 만들어집니다.