웹사이트 속도 테스트 시 PageSpeed Insights에서 "웹폰트 로드 중에도 텍스트가 계속 표시되도록 하세요"라는 경고 메시지를 보셨을 수 있습니다 . 웹폰트가 완전히 다운로드되기 전에도 브라우저에서 웹사이트 화면을 표시할 준비가 되어 있을 수 있습니다. 따라서 웹폰트 다운로드가 완료될 때까지 사용자는 콘텐츠를 볼 수 없거나 접근할 수 없습니다. 이 시간 동안 텍스트는 화면에서 가려지게 됩니다. 이를 ' 보이지 않는 텍스트 순간 노출(Flash of Invisible Text, FOIT) ' 현상이라고 합니다.
웹 폰트 로딩 과정 중에도 텍스트가 계속 보이도록 하면 사용자 경험을 개선할 수 있습니다. 이렇게 하면 빈 페이지가 나타나거나 레이아웃이 원치 않게 변경되는 것을 방지할 수 있습니다.
웹 글꼴 로드는 페이지 성능에 어떤 영향을 미칠까요?
다음과 같은 방식으로 영향을 미칩니다
- PageSpeed Insights 점수에 미치는 영향
- 누적 레이아웃 시프트 등급에 영향을 미칩니다
- 첫 번째 콘텐츠 페인트 및 가장 큰 콘텐츠 페인트 등급(핵심 웹 필수 요소)
- 사용자 경험과 전환율
텍스트가 없는 것은 웹폰트 로딩 중에도 사용자 경험에 영향을 미칩니다. 누구도 빈 페이지로 웹사이트에 접속하는 것을 좋아하지 않습니다. 사용자는 몇 초 안에 웹사이트의 제목과 본문을 읽고 원하는 정보가 있는지 여부를 파악할 수 있습니다.
웹 폰트로 인한 갑작스러운 레이아웃 변경을 방지하는 것은 누적 레이아웃 변경(Cumulative Layout Shift) 점수를 최적화하고 개선하는 데 필수적입니다. 로딩 중에도 텍스트가 계속 보이도록 하면 사용자 상호 작용 없이 예기치 않은 콘텐츠 이동을 방지할 수 있습니다. 웹 폰트는 다운로드 및 렌더링 시 보이지 않는 텍스트가 순간적으로 깜빡이는 경우 레이아웃 변경을 유발할 수 있습니다.
웹 글꼴을 로드하는 동안 텍스트가 계속 표시되도록 하는 방법
이 특정 현상을 '보이지 않는 텍스트 순간 노출(Flash of Invisible Text, FOIT)'이라고 합니다. "웹폰트 로드 중 텍스트가 계속 표시되도록 하세요"라는 오류 메시지는 바로 이 FOIT 현상 때문에 나타나는 것입니다.
글꼴 표시: 스왑
`font-display` 속성은 모든 최신 웹 브라우저에서 사용할 수 있는 CSS 디스크립터입니다. `font-display` 디스크립터는 글꼴이 다운로드되었는지 여부와 다운로드된 날짜를 확인하여 글꼴을 어떻게 표시할지 결정합니다. 예를 들어, `@font-face`를 사용하는 규칙은 `font-display` 속성을 활용합니다.
글꼴 표시 방식에는 블록, 스왑, 폴백, 선택 사항 등 다양한 변수가 있습니다. 스왑 값을 사용하면 글꼴 오류(FOIT)를 방지할 수 있으며, 텍스트가 화면에 최대한 빠르게 나타나도록 하려면 스왑 값을 사용하십시오.
WordPress에서는 Google 글꼴 표시 전환 플러그인을 사용하여 이 작업을 자동화할 수 있습니다. Elementor에는 Google 글꼴 전환 기능이 내장되어 있으며, WP Rocket, Flyingpress, Perfmatters와 같은 다른 최적화 플러그인에서도 이 기능을 기본적으로 제공합니다.
글꼴 로딩 속도를 높이려면 사전 연결 및 사전 로드를 사용하세요
<link rel='preload' href='/font.woff2' as='font' crossorigin>
이렇게 하면 CLS도 감소할 것입니다.
마무리
이 가이드에서는 웹폰트 로딩 중 텍스트가 계속 표시되도록 하여 페이지 속도 분석에서 발생하는 "보이지 않는 텍스트가 잠깐 나타나는" 문제를 해결하는 방법을 설명합니다.
페이지 로딩 시간과 페이지 속도는 좋은 사용자 경험을 제공하는 데 중요한 요소이며, 이 문제를 해결하면 사용자 경험을 크게 향상시킬 수 있습니다. 페이지에 모든 내용이 표시되지 않으면 페이지가 제대로 로드되지 않은 것으로 간주됩니다. 따라서 타임아웃을 방지하고 사용자가 원하는 균형, 속도 및 안정성을 제공하려면 페이지 콘텐츠 로딩 시간을 단축해야 합니다.
저희 워드프레스 사이트 최적화 서비스 로 워드프레스 성능을 향상시키세요 !
