목차
💡 웹 폰트 로딩은 페이지 성능에 어떤 영향을 미칠까요?
💡 웹 폰트 로드 중 텍스트가 항상 보이도록 하는 방법은 무엇입니까?
웹폰트는 웹 페이지의 디자인과 가독성을 향상시키는 역할을 합니다. 그러나 웹폰트를 로드하는 동안 텍스트가 지연 없이 표시되는지 확인하는 것은 중요한 페이지 성능 측정 요소입니다. 웹 폰트가 로드되는 동안 텍스트가 보이도록 설정하여 더 나은 페이지 경험을 제공하는 것이 중요합니다.
이를 위해 시스템 글꼴을 사용하거나 font-display CSS 속성을 설정할 수 있습니다. 이렇게 하면 사용자가 페이지를 열었을 때 글꼴 로딩 지연으로 인해 텍스트가 숨겨지거나 보이지 않는 상황을 피할 수 있으며, 사용자 경험을 개선할 수 있습니다. 웹 개발자들은 웹 글꼴을 사용할 때 이러한 사항을 고려해야 합니다. 이는 페이지의 성능과 사용자 만족도를 높이는 데 도움이 됩니다.
💡 웹 폰트 로딩은 페이지 성능에 어떤 영향을 미칠까요?
웹 글꼴을 로드하는 동안 텍스트가 표시되지 않으면 사용자는 글꼴이 로드될 때까지 기다려야 합니다. 이로 인해 사용자 경험에 지연이 발생할 수 있으며, 페이지의 로드 속도와 성능에도 영향을 미칠 수 있습니다.
웹 폰트를 사용하는 페이지의 경우, 브라우저는 웹 폰트가 준비되기 전까지 해당 텍스트를 렌더링할 수 없습니다. 대부분의 경우, 웹 폰트가 로드되기 전에 텍스트는 이미 준비되어 있습니다. 브라우저는 웹 폰트를 사용할 수 없는 상태에서도 텍스트를 위한 공간을 미리 생성하여, the Flash of Invisible Text issue가 발생합니다.
웹 폰트를 사전로드하고 font-display를 사용하면
브라우저가 요청한 웹 폰트로 콘텐츠를 렌더링할 수 있을 때까지 시스템 또는 대체 폰트로 텍스트를 표시하여 이 문제를 극복할 수 있습니다.
이는 Google에 따르면 빠르고 '환상적인' 페이지 경험을 위해 불필요한 레이아웃 이동을 방지하는 데 도움이 됩니다.
웹 폰트 로딩은 웹 페이지의 성능에 영향을 미칠 수 있는 중요한 측면 중 하나입니다.
웹 폰트를 사용하면 웹 디자인에서 더 다양한 글꼴을 사용할 수 있지만, 이로 인해 몇 가지 성능 문제가 발생할 수 있습니다.
● 로딩 시간 지연
웹 폰트는 일반적으로 글꼴 파일의 크기가 크기 때문에 다운로드 및 로딩에 시간이 걸릴 수 있습니다. 이로 인해 웹 페이지의 전체 로딩 시간이 늘어날 수 있습니다. 예를 들어, 사용자가 웹 페이지를 열 때 글꼴 파일이 크고 인터넷 연결이 느릴 경우, 페이지가 더 오래 걸릴 수 있습니다.
● 페이지 렌더링 지연
웹 폰트 파일이 로드될 때까지 텍스트가 기본 시스템 글꼴로 표시됩니다. 이로 인해 사용자가 웹 페이지를 열었을 때 텍스트가 플래시(기본 글꼴에서 웹 폰트로 변경)와 같이 깜박이거나 변경될 수 있습니다. 이것은 사용자에게 불편한 경험을 제공할 수 있습니다.
● 요청 수 증가
웹 폰트를 사용하면 웹 페이지에서 추가 HTTP 요청을 생성할 수 있습니다. 각 글꼴 파일은 별도의 HTTP 요청을 필요로 하며, 많은 웹 폰트를 사용하면 페이지의 요청 수가 증가하여 페이지 로딩 시간이 더 길어질 수 있습니다.
💡 웹 폰트 로드 중 텍스트가 항상 보이도록 하는 방법은 무엇입니까?
웹 글꼴을 로드하는 동안 텍스트를 계속 표시하는 방법은 다양합니다. 이를 위해 텍스트 폴백 및 웹폰트 최적화 기법을 사용할 수 있습니다. 텍스트 폴백은 기본 시스템 글꼴을 사용하여 텍스트를 표시하는 것이고, 웹폰트 최적화 기법은 글꼴 파일의 크기를 최소화하고 캐싱을 효과적으로 활용하여 로드 속도를 개선하는 것입니다.
웹 폰트를 로드하는 동안에도 페이지에서 텍스트가 가시적으로 유지되도록하는 몇 가지 전략이 있습니다.
이러한 전략은 다음과 같습니다.
1. 웹 폰트 사전 로드(Preloading web fonts)
<link> 요소를 사용한 사전 로딩 : 웹 폰트를 사전 로딩하려면 HTML의 <head> 섹션에 다음과 같은 <link> 요소를 추가합니다.
<link rel="preload" href="my-web-font.woff2" as="font" type="font/woff2" crossorigin>
rel="preload" : 이것은 브라우저에게 리소스를 사전로드(preload)할 것임을 알려주는 속성입니다.
href="my-web-font.woff2" : 실제 웹 폰트 파일의 경로를 지정합니다.
as="font" : 리소스 유형을 명시합니다. 여기서는 글꼴(font)로 설정합니다.
type="font/woff2" : 리소스의 MIME 유형을 지정합니다. 웹 폰트의 경우, 일반적으로 font/woff2를 사용합니다.
crossorigin : 만약 웹 폰트 서버와 도메인이 다를 경우, 이 옵션을 사용하여 크로스 오리진 요청을 허용합니다.
2. font-display CSS 속성 사용 예시
font-display 속성을 사용하여 웹 폰트 로딩 중에 텍스트가 항상 보이도록 설정할 수 있습니다. 다음은 font-display를 활용한 예시입니다.
font-display: swap ; 속성을 사용하면 웹 폰트 로딩 중에도 텍스트가 보이며, 폰트가 로드되면 해당 글꼴로 변경됩니다.
대부분의 최신 브라우저에서 font-display: swap을 사용하면 FOIT 문제가 해결됩니다.
3. 시스템 폰트 사용 예시
웹 폰트를 로드하는 동안에도 텍스트를 보이게 하는 간단한 방법은 시스템 글꼴을 사용하는 것입니다. 다음은 CSS를 사용하여 이를 구현하는 예시입니다.
이렇게 하면 웹 폰트가 로드되는 동안에도 시스템 글꼴로 텍스트가 표시되며, 폰트가 로드되면 해당 글꼴로 업데이트됩니다
4. Google 웹 폰트를 사용하는 경우
페이지에서 구글 웹 폰트를 사용 중이라면, CSS 파일의 구글 웹 폰트 URL 끝에 &display=swap 파라미터를 추가하여 font-display 기능을 추가할 수 있습니다.
예를 들어,
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="<https://fonts.gstatic.com>"> : 구글 폰트 서버와 미리 연결(preconnect)하여 로딩 속도를 높이는 코드입니다.
<link href="<https://fonts.googleapis.com/css2?family=Noto+Sans:wght@400;700&display=swap>" rel="stylesheet"> : 구글 웹 폰트 서비스에서 선택한 글꼴을 가져오도록 하는 코드입니다.
CSS에서 글꼴 적용 및 "font-display" 설정 : 이제 글꼴을 사용할 요소에 CSS에서 해당 글꼴을 적용하고 "font-display" 속성을 사용하여 로딩 중에 텍스트가 항상 보이도록 설정합니다. 예를 들어, <h1> 요소에 "Noto Sans" 글꼴을 적용하고 "font-display"를 설정하는 코드는 다음과 같습니다.
5. 워드프레스(또는 기타 CMS) 사용자의 경우
WordPress 사용자는 FOIT 문제를 해결하기 위해 특정 플러그인을 사용할 수 있습니다. 예를 들어, WP Rocket 은 웹 폰트에 font-display: swap 속성을 자동으로 적용합니다.
또한 Preload 설정에서 옵션을 활성화하여 글꼴을 쉽게 사전로드할 수 있습니다.
'E-커머스 쇼핑몰 운영' 카테고리의 다른 글
| [온라인 쇼핑몰 속도 최적화] Facades를 사용하여 외부(Third-party) 리소스를 지연 로드 (2) | 2024.10.22 |
|---|---|
| [온라인 쇼핑몰 속도 최적화] 지금 프로덕션에 ES2015+ 코드 배포 (2) | 2024.10.21 |
| [온라인 쇼핑몰 속도 최적화] document.write()를 피하세요. (2) | 2024.10.19 |
| [온라인 쇼핑몰 속도 최적화] Keep-Alive 활성화 (1) | 2024.10.19 |
| [온라인 쇼핑몰 속도 최적화] 중요한 요청을 연결하지 마십시오 (1) | 2024.10.18 |