연재의 마지막 회차입니다. 지금까지 자식 테마를 만들고, 스타일과 템플릿의 자리를 정하고, 업데이트를 안전하게 받는 순서를 세웠습니다. 마지막으로 볼 것은 이 테마가 방문자에게 실제로 무엇을 내려보내고 있는가입니다.
이것은 디자이너의 일이 맞습니다. 웹폰트 개수, 아이콘 방식, 슬라이더 사용 여부는 전부 디자인 결정이고, 그 결정이 자산 목록을 만듭니다.
1. 목록을 만듭니다 — 추측하지 않습니다
브라우저 개발자 도구의 네트워크 탭에서 캐시를 비우고 페이지를 다시 엽니다. CSS 와 JS 파일 목록이 나오는데, 여기서 볼 것은 파일 이름과 출처입니다. 테마가 부른 것인지 플러그인이 부른 것인지가 경로에 그대로 드러납니다.
같은 도구의 커버리지 기능은 내려받은 CSS 중 실제로 쓰이지 않은 비율을 알려 줍니다. 이 수치를 그대로 “낭비” 로 읽으면 안 됩니다 — 다른 페이지에서 쓰이는 규칙일 수 있기 때문입니다. 다만 어떤 파일이 어느 화면에서도 거의 안 쓰이는지 후보를 찾는 데는 좋습니다.
2. 조건부로 걷어냅니다
안 쓰는 자산은 등록을 해제할 수 있습니다. 중요한 것은 전역이 아니라 조건부로 한다는 점입니다.
add_action( 'wp_enqueue_scripts', function () {
if ( ! is_front_page() ) {
wp_dequeue_style( 'acme-slider' );
wp_dequeue_script( 'acme-slider' );
}
}, 100 );우선순위 숫자가 큰 이유는 등록된 뒤에 실행돼야 해제되기 때문입니다. 테마가 늦게 등록한다면 그보다 더 뒤로 미뤄야 합니다. 해제했는데 파일이 그대로 나온다면 대개 이 순서 문제입니다.
주의할 점이 두 가지 있습니다. 첫째, 어떤 스크립트는 다른 스크립트의 의존성입니다. 그것을 해제하면 의존하던 쪽이 조용히 동작을 멈춥니다 — 화면은 멀쩡한데 슬라이더나 메뉴만 안 움직이는 식입니다. 둘째, 관리자 화면과 편집기는 별도로 자산을 로드합니다. 프론트만 보고 판단한 해제가 편집 화면을 깨뜨릴 수 있으므로, 해제 후 글 편집 화면도 한 번 열어 봅니다.
3. 디자인 결정으로 되돌아옵니다
해제로 얻는 것에는 한계가 있습니다. 근본적인 개선은 애초에 무엇을 쓰기로 했는가에서 나옵니다.
아이콘 폰트는 특히 자주 걸립니다. 아이콘 여섯 개를 쓰려고 수백 개가 든 폰트 파일을 통째로 받는 구조라면, 필요한 여섯 개를 인라인 SVG 로 두는 편이 언제나 가볍고 색 제어도 자유롭습니다.
4. 재측정 — 그리고 정직하게 적습니다
감사의 마지막은 다시 재는 것입니다. 이때 지켜야 할 규칙이 있습니다. 같은 주소 · 같은 조건 · 같은 시간대에서 여러 번 재고 중앙값을 씁니다. 한 번 잰 수치는 그날의 네트워크 상태일 뿐이고, 그것을 개선 결과로 적으면 다음 측정에서 반박됩니다.
그리고 개선되지 않은 항목도 함께 적습니다. 못 걷어낸 자산과 그 이유(다른 기능의 의존성, 편집기에서 필요)를 남겨 두면, 다음에 같은 작업을 할 사람이 이미 확인한 것을 다시 확인하지 않아도 됩니다.
연재를 마치며
여기까지 오면 디자인 의도가 코드에서 살아남는 구조가 갖춰집니다. 부모 테마는 업데이트를 계속 받고, 우리 결정은 자식 테마 안에 모여 있고, 무엇을 덮어썼는지 목록으로 남아 있습니다. 워드프레스는 이 구조를 처음부터 지원해 왔고, 문제는 도구가 아니라 그 구조를 쓰지 않았을 때 생깁니다.
성능 관점의 후속 글은 성능 최적화 아카이브에 있습니다. 자산 감사 · 버전 업그레이드 · 보안 점검을 한 번에 맡기고 싶다면 최적화 지원 사업이 그 범위를 다루고, 실제로 어떤 순서로 작업하는지는 작업 과정에 절차 그대로 공개돼 있습니다.