성능 최적화 실무
서버를 올려야 하는 신호는 느림이 아닙니다
증설로 해결되는 문제와 안 되는 문제는 처음부터 갈려 있습니다. 구분하지 않고 요금제를 올리면 돈은 쓰고 문제는 그대로 남습니다.
Technote
성능 최적화
캐시 · Redis · Core Web Vitals · 이미지 최적화 · 쿼리 튜닝. 워드프레스를 빠르게 만드는 모든 실측 기반 노하우를 다룹니다.
글 43편· 성능 최적화
성능 최적화 실무
font-display — 안 보이는 글자와 바뀌는 글자 사이
웹폰트가 도착하기 전의 몇백 밀리초를 어떻게 쓸지 정하는 속성입니다. 선택지는 다섯 개지만 실제 판단은 "빈 화면"과 "바뀌는 화면" 중 무엇을 받아들이느냐 하나입니다.
성능 최적화 실무
사진 올리기 전 30초가 속도를 바꿉니다
카메라와 휴대폰이 만드는 원본은 화면에 필요한 것보다 훨씬 큽니다. 올리기 전에 세 가지만 손보면 첫 화면이 눈에 띄게 빨라집니다.
성능 최적화 입문
우리 방문자의 실제 환경, 통계 대신 우리 데이터로
"요즘은 모바일이 대부분" 이라는 말은 우리 사이트의 답이 아닙니다. 답은 이미 우리 분석 화면에 있고, 확인하는 데 10분이면 됩니다.
성능 최적화 실무
지연 로딩의 예외 — 첫 화면 이미지
지연 로딩은 대부분의 이미지에 옳습니다. 그런데 첫 화면의 큰 이미지에 걸면, 성능 지표가 측정하는 바로 그 대상을 늦추게 됩니다.
성능 최적화 실무
한글 서브셋 분할 — 11,172자를 다 내려받지 않는 법
한글 폰트가 무거운 이유는 분명합니다. 현대 한글 음절 조합만 11,172개이기 때문입니다. unicode-range로 나누면 브라우저가 그 페이지에 실제로 쓰인 조각만 가져갑니다.
성능 최적화 입문
첫 화면이 뜨는 몇 초 동안 무슨 일이 일어나나
방문자는 속도를 초로 기억하지 않고 인상으로 기억합니다. 그 인상을 만드는 것은 대기 시간이 아니라 대기 중에 보이는 화면입니다.
성능 최적화 실무
DB가 커지면 생기는 일 — 리비전 · 트랜지언트 · 로그
데이터베이스는 콘텐츠보다 훨씬 빨리 자랍니다. 자라는 것의 대부분은 우리가 만든 글이 아니라 자동으로 쌓인 부산물입니다.
성능 최적화 실무
데스크톱에서만 확인하면 놓치는 것들
만드는 사람은 큰 화면으로 보고, 방문자는 작은 화면으로 봅니다. 이 차이에서 생기는 문제는 대부분 눈에 띄지 않고 조용히 이탈을 만듭니다.
성능 최적화 실무
휴대폰에 데스크톱 이미지를 보내지 않는 법
srcset 은 브라우저에게 후보를 주고, sizes 는 그중 무엇을 고를지 알려 줍니다. 둘 중 하나만 맞으면 나머지 하나가 결과를 망칩니다.
성능 최적화 실무
웹폰트 자체 호스팅 — CDN을 쓰지 않을 때 얻는 것
공용 폰트 CDN의 가장 큰 장점이었던 "다른 사이트에서 이미 받아 둔 캐시"는 브라우저 캐시 분리 이후 사라졌습니다. 남은 것은 왕복 비용과 통제권의 문제입니다.