[ 폰트 최적화 ] 로딩 속도와 폰트로 발생하는 레이이웃 변경 방지 방법
웹사이트 로딩 속도 개선을 위한 폰트 최적화 방법과 실용적인 적용 방법
폰트 최적화 방법
폰트 최적화는 페이지 로딩 속도와 레이아웃의 변경을 개선하는 데 중요한 요소입니다. 인라인 CSS로 폰트를 빠르게 로드하고, 외부 폰트 사이트를 미리 연결하며, 기본 시스템 폰트 사용, WOFF2 폰트 적용, 필요한 문자만 포함하는 방법으로 로딩 시간을 단축합니다. font-display로 폰트 로딩 방식을 조정하고, font-size-adjust로 레이아웃 변경을 최소화합니다. 이러한 최적화로 검색엔진 성능을 향상 시킬수 있습니다.
검색엔진 최적화 중에서 폰트 최적화 방법에 대한 자료입니다. 폰트가 페이지에 늦게 로드되면 텍스트를 렌더링하는 데 지연이 발생하며, 그로 인해 최대 렌더링 시간(LCP)과 누적 레이아웃 변경(CLS)에 부정적인 영향을 줄 수 있습니다.
폰트를 최적화시켜 좀 더 빠르게 로딩되게 하고, 폰트의 변경으로 발생하는 레이아웃 변경 부분을 최소화하는 방법입니다.
폰트 최적화 방법
폰트를 최적화해서 검색엔진의 최적화를 진행하는 방법입니다.
인라인 CSS로 적용
폰트를 최대한 빠르게 로딩시키는 방법으로 폰트를 설정한 외부 CSS를 인라인(HTML)에 포함시켜 로드하는 방법으로 폰트의 로딩 속도를 좀 더 빠르게 진행할 수 있습니다. 중요한 CSS를 내부 HTML 코드에 포함시켜 최적화합니다.
✔ 예시
<style>
@font-face {
font-family: 'Noto Sans KR';
font-style: normal;
src: url(폰트 경로/NotoSans-Regular.woff2) format('woff2');
unicode-range: U+AC00-D7AF, U+0030-0039, U+0041-005A, U+0061-007A, U+0020-007E;
}
html {
font-family:'Noto Sans KR', sans-serif;
}
</style>외부 폰트 사이트를 미리 연결
폰트 최적화 방법중에서 외부에서 폰트를 로딩시키는 경우 외부 사이트의 주소를 미리 연결하여 폰트의 로드속도를 최적화 해줍니다.
✔예시
<head>
<link rel="preconnect" href="https://fonts.com">
</head>자체 폰트 사용
자체 호스팅에서 제공하는 기본(시스템) 글꼴을 사용하게 되면 다른 사이트를 통해서 폰트를 다운로드할 필요가 없어 폰트의 로딩속도를 줄일 수 있습니다.
✔예시
font-family: system-uiWOFF2 폰트사용
폰트 최적화를 위해서 일반 폰트보다 압축률이 30% 향상된 WOFF2 글꼴을 사용하여 폰트의 다운로드 시간을 절약할수 있습니다.
UNICOD-RANGE로 필요한 문자만 사용
폰트에 포함된 모든 코드를 다 사용하지 않고 필요한 폰트에서 적용할 글꼴 코드만 적용해서 폰트의 로딩 시간을 줄일 수 있습니다.
✔예시
unicode-range:
U+AC00-D7AF, /* 한글 음절 */
U+0030-0039, /* 숫자 0-9 */
U+0041-005A, /* 대문자 A-Z */
U+0061-007A, /* 소문자 a-z */
U+0020-007E; /* 기본 라틴 문자와 기호 */
폰트 렌더링 설정
브라우저는 페이지에 폰트가 로드되지 않으면 보통 3초 정도 폰트가 로드될 때까지 폰트를 기다리게 됩니다. 폰트가 로드되지 않아도 기다리지 않고 다른 방식으로 대처해서 사용자가 폰트가 로딩될때까지 기다리는 시간을 줄일 수 있습니다.
✔예시
font-display: swap; /* 기본 폰트를 사용하다가 웹 폰트가 로드되면 교체 */
* auto: 브라우저 기본 설정 사용.
* block: 폰트가 로드될 때까지 내용 숨기기.
* swap: 기본 폰트 사용하다가 웹 폰트로 교체.
* fallback: 기본 폰트 사용, 폰트 로드 후 교체 안 함.
* optional: 폰트 로드되지 않으면 기본 폰트 계속 사용.DISPLAY:BLOCK은 폰트가 로드되면서 발생하는 레이아웃이 변경되는 것을 최소화 할수 있고 DISPLAY:OPTIONAL은 페이지의 로딩 속도를 높일수 있습니다. 환경에 맞게 설정하시면 됩니다.
폰트 변경시 레이아웃의 변경 방지 방법
font-size-adjust를 사용해서 폰트가 변경될 경우 레이아웃의 변경을 최소화 할수 있습니다. font-size-adjust로 폰트의 크기를 조정합니다.
✔예시
font-size-adjust: 0.5; /* x-height 비율을 0.5로 조정 */위와 같은 방법으로 검색엔진 최적화 작업중 폰트에 관련된 최적화를 진행할 수 있습니다. 폰트는 전체 글페이지에 80% 이상을 차지하는 가장 중요한 요소이기 때문에 폰트의 최적화를 진행해서 전체 페이지의 최적화에 긍정적인 효과를 줄수 있습니다.
'티스토리 검색엔진 최적화' 카테고리의 다른 글
| 블로그 꾸미기 제목에 색 넣고 글을 CSS로 개성적있게 글 꾸미기 (2) | 2024.10.24 |
|---|---|
| [ 검색엔진 최적화 ] 이미지 최적화 자동 LAZY 속성 추가 방법 (0) | 2024.10.24 |
| [ 검색엔진 평가 확인법 ] 내 글의 평가를 확인하는 3가지 방법 (0) | 2024.10.22 |
| 블로그 글 작성시 블로그 내부.외부 링크 설정하는 방법 (1) | 2024.10.22 |
| 티스토리 인용,리스트를 사용해서 블로그 글 꾸미기 [인용,리스트 CSS 코드] (0) | 2024.10.22 |
| [ 콘텐츠 최적화 작업 ] 글 작성시 글자 색상 최적화및 주의 사항 #666 (0) | 2024.10.22 |
| 자동 내부 외부 링크 설정으로 블로그 품질 향상하기 [ 백링크도 자동설정 ] (0) | 2024.10.20 |