SEO

[ 폰트 최적화 ] 검색엔진 최적화(SEO)에서 폰트 최적화하는 법

발행일: 2024. 10. 22.

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

폰트 최적화로 검색엔진 성능 향상시키는 7가지 방법

폰트 최적화는 페이지 로딩 속도와 레이아웃의 변경을 개선하는 데 중요한 요소입니다. 인라인 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은 페이지의 로딩 속도를 높일수 있습니다. 환경에 맞게 설정하시면 됩니다.

구글 최적화 필수점검 사항 [ 라이트 하우스와 코어 웹 바이탈 ]

검색 노출을 위한 라이트하우스와 코어 웹 바이탈 점검 방법라이트하우스와 코어 웹 바이탈라이트하우스와 코어 웹 바이탈은 [ 구글 최적화 점검 ]을 하기위해 웹 성능을 측정하는 측정 항목과

everydayhub.tistory.com

폰트 변경시 레이아웃의 변경 방지 방법

font-size-adjust를 사용해서 폰트가 변경될 경우 레이아웃의 변경을 최소화 할수 있습니다. font-size-adjust로 폰트의 크기를 조정합니다.

✔예시

font-size-adjust: 0.5; /* x-height 비율을 0.5로 조정 */

위와 같은 방법으로 검색엔진 최적화 작업중 폰트에 관련된 최적화를 진행할 수 있습니다. 폰트는 전체 글페이지에 80% 이상을 차지하는 가장 중요한 요소이기 때문에 폰트의 최적화를 진행해서 전체 페이지의 최적화에 긍정적인 효과를 줄수 있습니다.

'SEO' 카테고리의 다른 글

[ 블로그 제목 꾸미기 ] CSS로 매력적인 글 제목과 소제목 디자인하기 (2)	2024.10.24
[ 검색엔진 최적화 ] 이미지 최적화 자동 LAZY 속성 추가 방법 (0)	2024.10.24
[ 검색엔진 평가 확인법 ] 내 글의 평가를 확인하는 3가지 방법 (0)	2024.10.22
[ 내부 및 외부 링크] SEO를 위한 블로그 글의 내부와 외부 링크 설정 방법 (1)	2024.10.22
인용과 리스트 꾸미기 활용법, 블로그 글을 돋보이게- (0)	2024.10.22
[ 블로그 글자 색상 최적화 ] 흐린 색상으로 인한 접근성 문제 해결하기 (0)	2024.10.22
구글 애드센스 승인 신청후 반려시 대응 방법과 요령 (1)	2024.10.21