Technote

워드프레스 실무 노하우 골라 읽는 기술 노트

글 15편· 성능 최적화 · 디자이너

성능 최적화 실무

첫 화면 이미지는 특별 취급해야 합니다

첫 화면의 가장 큰 요소가 그려지는 시점이 곧 체감 속도입니다. 히어로 이미지에 지연 로딩을 걸면 그 시점이 스스로 늦어집니다.

디자이너 4분 읽기

성능 최적화 심화

테마 감사 — 로드하는 자산과 실제 쓰는 자산

테마는 쓰지 않는 기능의 자산도 함께 내려받는 경우가 많습니다. 무엇이 실려 오는지 목록으로 만들면, 걷어낼 수 있는 것과 아닌 것이 나뉩니다.

디자이너 4분 읽기

성능 최적화 실무

동영상 임베드의 숨은 비용

재생 버튼을 누르지 않아도 플레이어는 이미 로드됩니다. 포스터 이미지를 먼저 보여 주는 방식으로 그 비용을 클릭한 사람에게만 물릴 수 있습니다.

디자이너 3분 읽기

성능 최적화 심화

폴백 폰트 메트릭 보정으로 흔들림 없애기

웹폰트가 도착할 때 화면이 흔들리는 이유는 폰트가 늦어서가 아니라 폴백 폰트와 글자 폭·높이가 다르기 때문입니다. 그 둘을 맞춰 두면 교체가 일어나도 레이아웃이 그대로입니다.

디자이너 5분 읽기

성능 최적화 실무

SVG 를 쓸 자리와 쓰지 않을 자리

아이콘과 도표는 이미지 파일이 아니어도 됩니다. 벡터로 두면 크기별 사본이 필요 없고, 색을 CSS 로 바꿀 수 있습니다.

디자이너 3분 읽기

성능 최적화 실무

font-display — 안 보이는 글자와 바뀌는 글자 사이

웹폰트가 도착하기 전의 몇백 밀리초를 어떻게 쓸지 정하는 속성입니다. 선택지는 다섯 개지만 실제 판단은 "빈 화면"과 "바뀌는 화면" 중 무엇을 받아들이느냐 하나입니다.

디자이너 4분 읽기

성능 최적화 실무

지연 로딩의 예외 — 첫 화면 이미지

지연 로딩은 대부분의 이미지에 옳습니다. 그런데 첫 화면의 큰 이미지에 걸면, 성능 지표가 측정하는 바로 그 대상을 늦추게 됩니다.

디자이너 3분 읽기

성능 최적화 실무

한글 서브셋 분할 — 11,172자를 다 내려받지 않는 법

한글 폰트가 무거운 이유는 분명합니다. 현대 한글 음절 조합만 11,172개이기 때문입니다. unicode-range로 나누면 브라우저가 그 페이지에 실제로 쓰인 조각만 가져갑니다.

디자이너 5분 읽기

성능 최적화 실무

휴대폰에 데스크톱 이미지를 보내지 않는 법

srcset 은 브라우저에게 후보를 주고, sizes 는 그중 무엇을 고를지 알려 줍니다. 둘 중 하나만 맞으면 나머지 하나가 결과를 망칩니다.

디자이너 3분 읽기

성능 최적화 실무

웹폰트 자체 호스팅 — CDN을 쓰지 않을 때 얻는 것

공용 폰트 CDN의 가장 큰 장점이었던 "다른 사이트에서 이미 받아 둔 캐시"는 브라우저 캐시 분리 이후 사라졌습니다. 남은 것은 왕복 비용과 통제권의 문제입니다.

디자이너 4분 읽기

Cited

함께 보면 좋은 기술 노트

워드프레스 밖의 주제는 같은 팀이 운영하는 동지커뮤니케이션 기술 인사이트에 정리돼 있습니다. 아래 요약은 원문 그대로 인용했으며, 제목을 누르면 원문으로 이동합니다.

기술 인사이트 전체 보기

₩270,000 · 신청하기