PageSpeed에서 "웹 글꼴 로드 중에 텍스트가 계속 표시되는지 확인" 오류를 수정하는 방법

Google의 페이지 속도 통계를 확인하는 동안 " 웹 글꼴 로드 중 텍스트가 계속 표시되는지 확인" 오류가 발생하고 이 문제를 해결하는 방법을 모르십니까? 일반적으로 사용자 정의 PHP 또는 HTML 기반 웹 사이트에서 이 문제를 해결하는 방법을 알고 있지만 WordPress의 경우에도 어려움을 겪었습니다.

따라서 이 가이드에서는 WordPress에서 이 문제를 해결하고(맞춤 PHP 및 HTML 기반 사이트에서 이 문제를 수정하는 단계도 공유할 예정임) 이 오류를 제거하여 페이지 속도 점수를 높이는 방법에 대해 설명합니다.

PageSpeed에서 "Webfont 로드 중에 텍스트가 계속 표시되는지 확인" 오류가 표시되는 이유

Google의 PageSpeed ​​Insight에서 웹사이트를 테스트할 때 "Webfont 로드 중에 텍스트가 계속 표시되는지 확인" 오류 문제를 보았을 수 있으며 오류를 클릭하면 글꼴 파일의 전체 URL이 표시됩니다.

위 이미지에서 볼 수 있듯이 이 웹사이트에서 "웹폰트 로드 중 텍스트가 계속 표시되는지 확인" 오류가 발생하며 이를 클릭하면 Google 글꼴 파일의 전체 URL이 표시됩니다.

오류가 표시되는 이유는 무엇입니까?

웹 사이트가 브라우저에 로드되고 텍스트에 적용된 사용자 정의 글꼴 파일을 감지하면 글꼴이 다운로드될 때까지 기다렸다가 그 때까지 텍스트가 보이지 않습니다. 사용자 정의 글꼴 파일을 다운로드하면 즉시 웹 사이트에 적용되며 이를 보이지 않는 텍스트의 플래시라고 합니다.

보이지 않는 텍스트의 플래시를 수정하는 방법?

보이지 않는 텍스트의 플래시를 수정하면 웹 사이트에서 "웹 글꼴 로드 중에 텍스트가 계속 표시되는지 확인" 오류도 수정할 수 있으며 이 문제를 수정하는 것은 매우 쉽습니다.

다음을 추가하여 이 문제를 쉽게 해결할 수 있습니다.

 글꼴 표시: 스왑;

현재 코드

 @글꼴 얼굴 {

}

CSS 속성.

그러나 @font-face는 무엇입니까?

@font-face는 사용자 정의 글꼴을 텍스트에 적용할 수 있는 간단한 CSS 규칙입니다. woff2, woff, ttf 등과 같은 확장자가 있습니다. 예를 들어 @font-face 코드는 다음과 같습니다.

 @글꼴 얼굴 {

글꼴 패밀리: Roboto, sans-serif;

글꼴 표시: 스왑; // ---> 이 문제를 해결합니다.

글꼴 스타일: 일반;

글꼴 두께: 400;

src: url(Roboto.woff2);

}

이제 다음을 사용하여 단락에 이 글꼴을 적용합니다.

 피 {

글꼴 패밀리: Roboto, sans-serif;

글꼴 크기: 18px;

}

웹 사이트가 로드되면 단락 태그에 " Roboto " 글꼴이 적용되었음을 나타내며 단락 태그에 사용된 글꼴을 즉시 다운로드하기 시작합니다. 글꼴을 다운로드할 때까지 텍스트는 보이지 않습니다.

이것이 페이지 속도에서 "웹폰트 로드 중에 텍스트가 계속 표시되도록 보장 " 오류를 표시하고 font-display: swap; 을 추가하는 이유입니다. 현재 @font-face CSS에서 이 문제를 해결할 수 있습니다.

WordPress에서 이 문제를 해결하는 방법

WordPress를 사용 중이고 페이지 속도 통계에 이 오류가 표시되면 간단한 단계를 사용하여 이 문제를 쉽게 해결할 수 있습니다. 로컬 글꼴과 Google 글꼴 모두에서 이 오류를 해결하는 단계를 공유했습니다.

Google 글꼴을 위한 솔루션

처음에 Google Fonts는 font-display: swap을 추가하지 않습니다. 글꼴에 규칙을 적용했지만 이제 글꼴 표시를 적용하는 새 쿼리 매개변수를 지원합니다. swap; Google 글꼴 파일 끝에 &display=swap 매개변수를 추가합니다.

여기 어떻게 보이는지;

테마 개발자이거나 WordPress에서 테마 파일을 편집하는 방법을 알고 있다면 Google 글꼴 파일에 &display=swap 매개변수를 쉽게 추가할 수 있습니다.

그러나 WordPress 테마 파일을 편집하는 데 익숙하지 않은 경우 Asset CleanUp 과 같은 다양한 플러그인을 사용하여 이 매개변수를 추가하고 "Webfont 로드 중에 텍스트가 계속 표시되는지 확인" 문제를 해결할 수 있습니다.

"자산 정리" 플러그인을 사용하여 이 문제를 해결하는 방법

Google 글꼴 파일에 display=swap 매개변수를 적용하려면 무료로 제공되는 WordPress 라이브러리에서 Asset CleanUp 플러그인을 다운로드하여 설치해야 합니다.

플러그인을 다운로드하고 활성화한 후 WordPress 관리자 패널에서 " 자산 정리 " 옵션을 클릭한 다음 " 자산 정리 " 아래에 있는 " 설정 "을 클릭하여 최적화 페이지를 엽니다.

설정 페이지에서 " Google 글꼴 " 옵션을 클릭합니다. Google 글꼴 옵션을 클릭하면 Google 글꼴 파일을 최적화하기 위해 다양한 설정을 쉽게 관리할 수 있는 설정이 추가로 열립니다.

이러한 설정 중 일부는 다음을 포함할 수 있습니다.

Google 글꼴 파일 설정에서 " 글꼴 표시: CSS 속성 값 적용 " 설정에서 " 적용하지 않음(기본값) "에서 " 스왑(가장 많이 사용됨) "으로 변경하면 &display=가 추가됩니다. 매개변수를 모든 Google 글꼴 파일로 바꿉니다.

테마 및 플러그인 글꼴 솔루션

대부분의 경우 WordPress 테마 또는 플러그인은 멋진 글꼴 또는 아이콘 글꼴과 같은 다른 글꼴을 로드하며 Google PageSpeed ​​Insight에서도 동일한 문제를 표시합니다.

이것은 또한 쉬운 수정이지만 약간의 WordPress 편집 지식이 필요합니다. 코드 편집에 익숙하지 않다면 " Asset CleanUp Pro " 플러그인의 프리미엄 버전을 사용하여 자동으로 font-display: swap 을 추가할 수도 있습니다. WordPress 테마 또는 플러그인 스타일시트의 CSS 속성.

Asset CleanUp Pro를 사용하여 이 문제를 해결하려면 WordPress 관리자 패널에서 " Asset CleanUp " 옵션을 클릭한 다음 "Asset Cleanup" 아래의 " settings "를 클릭하여 최적화 페이지를 엽니다.

" 자산 정리 " > " 설정 " 페이지에서 " 로컬 글꼴 " 옵션을 클릭하여 로컬 글꼴에 대한 사용자 정의 설정을 엽니다.

브라우저에서 " 로컬 글꼴 " 사용자 정의 설정이 열리면 " 글꼴 표시: CSS 속성 값 적용 " 아래의 주어진 선택 옵션에서 " 교환(가장 많이 사용됨) "을 선택하여 자동으로 글꼴 표시: 교환을 추가합니다. 모든 스타일시트에서.

마무리

이 가이드에서는 페이지 속도 인사이트에서 "웹폰트 로드 중에 텍스트가 계속 표시되는지 확인" 또는 "보이지 않는 텍스트 깜박임" 문제를 해결할 수 있는 방법을 설명하기 위해 최선을 다했습니다.

페이지 로딩 시간과 페이지 속도는 좋은 사용자 경험을 제공하는 중요한 요소이며 이 문제를 해결하면 훨씬 더 나은 사용자 경험을 제공할 수 있습니다. 그리고 페이지 위에 모든 것을 표시하지 않는 한 페이지는 로드된 것으로 간주되지 않습니다.

따라서 페이지가 타임아웃되지 않고 사용자가 원하는 균형, 속도, 안정성을 얻을 수 있도록 페이지의 콘텐츠 로딩 시간을 줄여야 합니다. 느린 웹사이트 속도가 문제인 경우 웹사이트 속도 최적화에 대한 게시물을 확인하여 올바르게 최적화할 수 있습니다.