텍스트렌더링 지연
웹 사이트에 진입하게 되면, 글자가 늦게 나타나거나, 폰트가 나중에 적용되는 현상이 일어나는 경우가 있습니다.
이는, 폰트 적용이 늦게 적용되서 발생하는 상황으로, 폰트 최적화를 수행하여 최소화 할 수 있습니다.
웹 폰트 최적화 방법
1) Font PreLoading ( 폰트 미리 로드하기 )
Font PreLoading이란?
웹 페이지 폰트를 외부 폰트로 설정하는 경우, 텍스트 렌더링까지 시간이 걸리는 경우가 있습니다.
Font Preloading 은 이를 우선적으로 수행하여 텍스트렌더링 지연시간을 최소화 할 수 있게 합니다.
Font Preload 적용방법
1-1. HTML
<link rel="preload" href="/fonts/fontname.woff2" as="font" type="font/woff2" crossorigin="anonymous">- HTML <head> 섹션에 코드를 추가하는 방법입니다.
- link 요소에서 rel 속성을 preload로 as 속성을 font로 지정하여 설정합니다.
1-2. CSS
<style>
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.woff2') format('woff2'),
url('path/to/font.woff') format('woff');
font-weight: normal;
font-style: normal;
}
</style>- css 에서 @font-face 를 사용하여 사용자 지정 폰트를 로드합니다.
- css 단에서 폰트 파일을 브라우저에 로드하고 웹 페이지에서 사용할 수 있게 합니다.
2) 폰트 용량 줄이기
폰트 용량에 따라 로딩 시간이 다릅니다. 따라서 로딩할 폰트의 용량을 줄이는것만으로도 최적화 할 수 있습니다.
2-1. 압축률이 좋은 포맷 사용하기
폰트 포맷에는 여러가지가 있는데, 아래의 링크와 사진을 참고하면 브라우저 별 지원하는 폰트 포맷을 알 수 있습니다.
https://www.w3schools.com/Css/css3_fonts.asp
CSS Web Fonts
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
www.w3schools.com
이 중에서 압축률이 좋은 WOFF나 WOFF2 포맷을 사용하면 폰트 로딩 시간을 줄일 수 있습니다.
이를 위해 @font-face를 통해 여러 포맷을 함께 사용하는것이 좋습니다.
2-2. 서브셋 폰트 사용하기
서브셋 폰트란, 필요하지 않은 글자를 제거한 폰트 파일을 말하는데,
수많은 한글 중, 뷁이나 걁과 같은 사용하지 않는 한글들, 안쓰는 특수문자 등을 제거하여 폰트 용량을 줄일 수 있습니다.
2-3. unicode-range 사용하기
<style>
@font-face {
/*
폰트 설정
*/
unicode-range: U+1100-U+11FF; /* 한글만 다운로드 */
}
@font-face {
/*
폰트 설정
*/
unicode-range: U+000-5FF; /* 라틴어만 다운로드 */
}
</style>- 여러 국가의 폰트를 지원한다면, 각 나라별로 필요한 웹 폰트만 로드하여 최적화 할 수 있습니다.
'웹 프론트 엔드' 카테고리의 다른 글
| 무한스크롤(infinite-scroll) (0) | 2024.06.11 |
|---|---|
| Sass(Scss) 더 알아보기 (0) | 2024.03.24 |
| SASS (0) | 2024.03.23 |
| CSS 반응형 디자인 (0) | 2024.03.22 |
| CSS Grid - 단위 (0) | 2024.03.21 |