폰트 최적화로 웹사이트 성능 개선하기 LCP와 CLS 문제 해결

폰트 최적화는 페이지 로딩 속도와 레이아웃의 변경을 개선하는 데 중요한 요소입니다. 인라인 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-ui

WOFF2 폰트사용

폰트 최적화를 위해서 일반 폰트보다 압축률이 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% 이상을 차지하는 가장 중요한 요소이기 때문에 폰트의 최적화를 진행해서 전체 페이지의 최적화에 긍정적인 효과를 줄수 있습니다.

'SEO > seo-tips' 카테고리의 다른 글

[ 애드센스 오류 해결법 ] 에드센스 404 에러 발생 원인과 해결 방법 (0)	2024.10.24
[ 이미지 자동 속성 적용법 ] 이미지 최적화 자동 LAZY 속성 추가 방법 (0)	2024.10.24
[ 검색엔진 평가 확인법 ] 내 글의 평가를 확인하는 3가지 방법 (0)	2024.10.22
[ 블로그 글자 색상 최적화 ] 기본 스킨 글자 색상, 이렇게 바꿔야 SEO에 좋습니다 (0)	2024.10.22
구글 애드센스 승인 반려 이유와 해결 방법 총정리 (0)	2024.10.21
IndexNow 인덱스 나우 사용 Bing 웹마스터에서 URL을 신속하게 제출하는 방법 (0)	2024.10.20
페이지 주소 선택 시 문자와 숫자, 어떤 것이 더 효과적인가? (0)	2024.10.20