[css/웹 성능 개선] font-display:swap

요즘 웹 성능 개선 관련된 책을 읽기 시작했는데

책 초반에 google PageSpeed 사이트에서 웹 성능을 검출해 주는 서비스를 제공하고 있다는 사실을 알게 되었다.

 

---

https://pagespeed.web.dev/

PageSpeed Insights

 

 

궁금한 마음에 이전에 퍼블리싱했던 사이트 주소를 넣어보니

모바일에서 성능이 좋지 않게 나와ㅠㅠ 신경 쓰여 아래 추천 개선 사항들을 살펴보았다.

생각보다 모바일에서 성능 점수가 낮게 나와서 충격적

 

 

 

꽤나 진단 결과 및 추천 개선사항이 상세히 나와서 놀랐고 살펴보다가 알게 된 새로운 CSS 속성 font-display:swap!

 

구글 pageSpeed에서 제공하고 있는 설명을 가져와 보았다.

---

1. 보이지 않는 글꼴을 표시하는 방법

 글꼴은 로드하는 데 시간이 많이 걸리는 대용량 파일인 경우가 많습니다. 일부 브라우저는 글꼴이 로드될 때까지 텍스트를 숨기면서 보이지 않는 텍스트의 플래시(FOIT)를 일으킵니다. (...)

 사용자 정의 글꼴이 로드되는 동안 보이지 않는 텍스트가 표시되지 않도록 하는 가장 쉬운 방법은 시스템 글꼴을 일시적으로 표시하는 것입니다. @font-face 스타일에 font-display: swap을 포함하면 대부분의 최신 브라우저에서 FOIT를 피할 수 있습니다

@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), 
  url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}

 

글꼴 표시 API는 글꼴이 표시되는 방식을 지정합니다. swap은 글꼴을 사용하는 텍스트가 시스템 글꼴을 사용하여 즉시 표시되어야 함을 브라우저에 알립니다. 사용자 정의 글꼴이 준비되면 시스템 글꼴을 대체합니다. (자세한 내용은 로드 중 보이지 않는 텍스트의 표시 방지 게시물을 참조하세요.)

 

2. 웹 글꼴 미리 로드

글꼴 파일을 더 일찍 가져오려면 <link rel="preload" as="font">를 사용하세요. 자세한 정보:

• 로딩 속도 향상을 위해 웹 글꼴 미리 로드(codelab)
• 선택적 글꼴을 미리 로드하여 레이아웃 이동 및 보이지 않는 텍스트의 플래시(FOIT) 방지

 

3.Google 글꼴

Google 글꼴 URL 끝에 &display=swap 매개변수를 추가합니다.

<link href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" rel="stylesheet">

출처:https://developer.chrome.com/ko/docs/lighthouse/performance/font-display/

---

 

can I use에서 찾아보니 모든 브라우저에서 지원하는 것은 아니나 IE는 이제 상관없어서

사용하면 웹 성능 최적화에 도움이 될 듯하다!