Web Guide웹폰트폰트 로딩속도 개선
웹폰트 로딩 최적화
글자가 늦게 나타나거나 갑자기 모양이 바뀝니다.
한글 폰트는 특히 무겁습니다. 처리 방식에 따라 체감 속도가 달라집니다.
01한글 폰트가 무거운 이유
영문은 글자 수가 적지만 한글은 조합 가능한 글자가 수천 자입니다.
그만큼 파일이 커지고 내려받는 데 시간이 걸립니다.
01
글자 수
한글 폰트는 영문보다 파일이 훨씬 큽니다.
02
굵기별 파일
굵기마다 별도 파일이 필요합니다.
03
여러 폰트 사용
제목과 본문을 다르게 쓰면 파일이 배로 늘어납니다.
04
외부 로딩
외부에서 받아오면 연결 시간이 추가됩니다.
05
렌더링 지연
폰트를 기다리느라 글자가 늦게 보입니다.
02두 가지 문제 현상
폰트를 기다리는 동안 글자가 아예 안 보이거나, 기본 폰트로 보이다가 바뀝니다.
글자가 안 보임
폰트를 다 받을 때까지 빈 화면 · 내용 확인이 늦어짐 · 이탈로 이어질 수 있음
모양이 바뀜
기본 폰트로 먼저 보이고 나중에 교체 · 화면이 흔들려 보임 · 대체로 이쪽이 낫습니다
03줄이는 방법
필요한 만큼만 쓰는 것이 가장 효과적입니다.
굵기 제한
실제로 쓰는 굵기만 불러옵니다. 두세 종이면 충분합니다.
폰트 종류 제한
한 가지 폰트로 통일하는 것이 가장 가볍습니다.
사용 글자만 추출
고정된 문구는 필요한 글자만 담을 수 있습니다.
자체 호스팅
우리 서버에서 제공하면 연결 단계가 줄어듭니다.
미리 불러오기
중요한 폰트를 우선 요청하게 설정합니다.
대체 폰트 지정
비슷한 크기의 기본 폰트를 지정해 흔들림을 줄입니다.
04판단 기준
브랜드 폰트가 꼭 필요한지 따져볼 필요도 있습니다.
브랜드 가치폰트가 브랜드 정체성에 중요한지 판단합니다.
제목만 적용제목만 브랜드 폰트를 쓰고 본문은 기본 폰트로.
기기 기본 폰트기기에 내장된 폰트를 쓰면 로딩이 없습니다.
라이선스 확인웹 사용이 허용된 폰트인지 반드시 확인합니다.
실제 측정적용 전후 속도를 측정해 비교합니다.
CHECK POINT
□ 사용하는 폰트 종류를 최소화했는가
□ 실제 쓰는 굵기만 불러오는가
□ 폰트 로딩 중 글자가 보이는 방식인가
□ 대체 폰트를 지정했는가
□ 중요한 폰트를 우선 불러오는가
□ 웹 사용 라이선스를 확인했는가
□ 적용 전후 속도를 측정했는가
#웹폰트#폰트 로딩#속도 개선#한글 폰트#폰트 라이선스#체감 속도#성능 최적화#홈페이지 개발#웹비스타#홈페이지 제작