PageSpeed 점수를 깎던 화면 흔들림(CLS 0.294)을 0으로, 픽셀 웹폰트 271KB를 97KB로 줄인 실제 작업 기록입니다. 원인을 찾은 방법과 바꾼 설정, 우리 홈페이지에서 바로 해 볼 수 있는 속도 셀프 점검까지 정리했습니다.
핵심 요약
- 화면 흔들림의 원인은 웹폰트가 늦게 바뀌면서 큰 제목 크기가 달라진 것
- 자주 쓰는 한글 2,350자만 담은 글꼴 파일로 용량을 64% 줄임
- 첫 화면을 막는 CSS를 줄이고, 글꼴이 준비된 뒤 제목을 보여 주도록 변경
무엇이 문제였나
픽셀노트 메인 페이지를 PageSpeed Insights로 측정하자 "레이아웃 변경(CLS) 0.294"라는 경고가 나왔습니다.
페이지가 열리는 순간 큰 제목이 기본 글꼴로 먼저 그려졌다가 픽셀 글꼴로 바뀌면서 크기가 달라지고, 그 바람에 화면 전체가 한 번 밀렸던 것입니다.
방문자 입장에서는 화면이 덜컹거리는 느낌이고, 구글은 이 값을 검색 품질 지표(코어 웹 바이탈) 중 하나로 봅니다.
개선 전후 비교
작업 순서
1. 한글 웹폰트 서브셋
한글 웹폰트는 1만 자가 넘는 글자를 담고 있어 파일이 큽니다.
실제로 홈페이지에 쓰는 글자는 대부분 자주 쓰는 한글 2,350자와 영문 · 숫자 · 기호 안에 들어갑니다.
그래서 이 글자만 담은 가벼운 파일(97KB)을 먼저 쓰고, 드문 글자가 나올 때만 원래 파일을 받도록 나눴습니다.
메인과 주요 서브 페이지를 확인해 보니 가벼운 파일만으로 충분했습니다.
2. 화면을 막는 CSS 줄이기
본문 글꼴 CSS가 첫 화면을 그리기 전에 다 받아져야 해서 화면 표시가 늦어졌습니다.
첫 화면에 꼭 필요한 CSS만 먼저 받고, 본문 글꼴 CSS는 화면을 그린 뒤 받아 오도록 바꿨습니다.
글꼴 서버에는 미리 연결해 두는 설정도 추가했습니다.
3. 글꼴이 준비된 뒤 제목 보여 주기
메인 제목은 원래 위에서 떨어지는 모션으로 등장합니다.
그래서 픽셀 글꼴이 준비될 때까지 제목 영역을 잠시 숨겼다가 한 번에 보여 주도록 바꿨습니다.
보이는 연출은 그대로이고, 글꼴이 바뀌며 화면이 밀리는 일은 사라졌습니다.
혹시 스크립트가 실패해도 일정 시간이 지나면 무조건 보이도록 안전장치를 넣었습니다.
우리 홈페이지 속도 셀프 점검
PageSpeed Insights에 홈페이지 주소를 넣으면 모바일과 PC 점수, 그리고 무엇을 고치면 좋은지 알려 줍니다.
이미지 크기, 웹폰트, 쓰지 않는 스크립트는 대부분의 홈페이지에서 가장 먼저 효과를 볼 수 있는 부분입니다.
이미지 최적화도 함께 확인하세요
이번 작업은 글꼴과 CSS가 중심이었지만, 대부분의 홈페이지에서 가장 큰 용량을 차지하는 것은 이미지입니다.
화면에 400px로 보이는 사진을 4,000px 원본 그대로 올리면 필요 없는 용량을 열 배 넘게 받게 됩니다.
실제 표시 크기에 맞춰 줄이고, JPG를 WebP 같은 가벼운 형식으로 바꾸고, 첫 화면 아래 이미지는 필요할 때 불러오도록(지연 로딩) 하는 것만으로도 속도가 크게 좋아집니다.
속도를 측정할 때 주의할 점
PageSpeed 점수는 측정할 때마다 조금씩 달라지므로 두세 번 측정해 평균을 보는 것이 좋습니다.
모바일과 PC 점수도 따로 확인해야 합니다.
같은 홈페이지라도 모바일은 네트워크와 기기 성능을 낮게 가정하고 측정하기 때문에 점수가 더 낮게 나오는 경우가 많습니다.
또 점수 자체보다 "어떤 항목 때문에 느린가"를 보고, 효과가 큰 항목부터 하나씩 고치는 것이 효율적입니다.
자주 묻는 질문
Q. CLS(레이아웃 변경)는 왜 중요한가요?
페이지가 열리면서 화면이 밀리면 버튼을 잘못 누르기 쉽고 읽기도 불편합니다.
구글은 CLS를 페이지 경험 지표 중 하나로 사용합니다.
Q. 웹폰트를 줄이면 글자가 깨지지 않나요?
자주 쓰는 글자만 먼저 담고, 없는 글자는 원래 글꼴 파일에서 받도록 나누면 깨지지 않습니다.
Q. 그누보드 홈페이지도 속도 개선이 가능한가요?
네, 이 글의 작업도 그누보드 기반 홈페이지에서 진행했습니다.
이미지 최적화, 웹폰트, 스크립트 정리부터 순서대로 개선할 수 있습니다.
운영 중인 홈페이지가 느리다면 유지보수 · SEO에서 속도 점검을 함께 진행합니다.
주소를 견적 문의로 보내 주시면 개선할 부분부터 알려 드립니다.
