성능 최적화 입문
포맷을 바꾸면 화질을 포기하지 않고도 가벼워집니다
사진과 평면 도형은 압축이 작동하는 원리가 다릅니다. 그 차이를 알고 고르면 눈에 보이는 화질은 그대로인 채 파일만 작아집니다.
Technote
이미지가 사이트를 느리게 하지 않으려면
디자인 품질을 지키면서 이미지 무게를 줄이는 실무. 포맷 · 크기 · 반응형 · 지연 로딩을 워드프레스의 실제 동작에 맞춰 다룹니다.
글 8편
성능 최적화 입문
업로드 전에 정해 두는 최대 크기
카메라 원본을 그대로 올려도 화면은 멀쩡해 보입니다. 그래서 문제가 늦게 발견됩니다 — 워드프레스가 그 뒤에서 무엇을 하는지 알면 기준이 잡힙니다.
성능 최적화 실무
워드프레스가 만드는 이미지 크기들
한 번 업로드하면 파일이 여러 개 생깁니다. 그중 화면에 한 번도 쓰이지 않는 것이 있다면 디스크와 srcset 을 동시에 어지럽힙니다.
성능 최적화 실무
휴대폰에 데스크톱 이미지를 보내지 않는 법
srcset 은 브라우저에게 후보를 주고, sizes 는 그중 무엇을 고를지 알려 줍니다. 둘 중 하나만 맞으면 나머지 하나가 결과를 망칩니다.
성능 최적화 실무
지연 로딩의 예외 — 첫 화면 이미지
지연 로딩은 대부분의 이미지에 옳습니다. 그런데 첫 화면의 큰 이미지에 걸면, 성능 지표가 측정하는 바로 그 대상을 늦추게 됩니다.
성능 최적화 실무
동영상 임베드의 숨은 비용
재생 버튼을 누르지 않아도 플레이어는 이미 로드됩니다. 포스터 이미지를 먼저 보여 주는 방식으로 그 비용을 클릭한 사람에게만 물릴 수 있습니다.
개발 워크플로우 심화
미디어 라이브러리에서 안 쓰는 파일 찾아내기
지우는 것보다 어려운 일은 "안 쓰인다" 를 증명하는 것입니다. 참조가 숨어 있는 자리를 알면 안전한 순서가 생깁니다.