웹 폰트 로딩 최적화

zzzzzang_gu·2023년 3월 11일
frontendhtml5개발공부웹브라우저웹표준제로베이스프론트엔드프론트엔드개발자프론트엔드공부프론트엔드스쿨
0

웹(Web)

목록 보기
3/9
post-thumbnail

웹 폰트 포맷

웹에서 기본 폰트가 적용되어 있지만 다른 폰트를 적용하려 할 때 사용하는 4가지의 폰트 포맷을 먼저 확인해 보자

포맷특징
TrueType Fonts (TTF)가장 일반적 대부분 브라우저
Open Type Fonts (OTF)TTF기반 TTF에서 지원하지 않는 기능 사용
The Web Open Font Format (WOFF)OTF와 TTF로 이루어져 있는 압축된 폰트 경량
The Web Open Font Format (WOFF 2.0)향상된 WOFF

WOFF 2.0은 현재 기준 가장 작고 효율적인 웹 폰트 파일 형태다. css 에서 @font-face룰을 사용할때, woff2글꼴이 TTF 같은 효율이 떨어지는 폰트보다 더 앞서서 선언되게끔 한다. 브라우저는 더 큰 파일이라도, 먼저 선언되어 있는 글꼴을 인식하여 사용하게 된다.

  • IE11을 배제한다면, WOFF 2.0만 사용하면 된다.

font-display 지시자

  • FOIT (Flash of Invisible Text)

    브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 보이지 않는 현상

  • FOUT (Flash of Unstyled Text)

    브라우저가 웹 글꼴을 다운로드하기 전에 텍스트가 대체 글꼴로 렌더링되는 현상

둘 모두 이상적인 상황은 아니지만, 사용자가 처음 웹사이트를 방문할 때 둘 중 하나의 현상이 발생하게 된다.
font-face를 이용해 FOIT,FOUT 중 어떤 것을 선택할지 알려줄 수 있다.

@font-face {
  font-family: 'Typefesse';
  src: url('typefesse.woff2') format('woff2'),
    url('typefesse.woff') format('woff');
  font-display: swap;
}

font-display 속성

속성설명
swap웹폰트가 로딩되기 전까지 fallback 폰트를 글자로 보여주는 것, fallback 폰트와 웹폰트가 비슷하지 않다면 화면전환이 크게 일어난다.
block웹폰트카 로딩되기 전까지 브라우저에 텍스트를 숨기기 위해(FOIT) 사용되는 방식, 보통 3초 내에 로딩되지 않으면 브라우저는 fallback 폰트를 사용한다
fallbackswap과 비슷하지만 0.1초 정도 텍스트가 보이지 않는 블록이 발생하며,이후에는 fallback 폰트가 보여진다. 또 3초 이내로 다운로드 되지 않는다면, 웹폰트 다운로드와 상관없이 앞으로 계속 fallback 폰트를 보여준다.
Optionalfallback과 비슷하지만 3초 룰이 제거된 버전

font preload 글꼴 파일 미리 로드하기

HTML에서 preload 마크업을 해준다. 웹사이트를 방문하면, 필요한 리소스 자원을 서버에 요청할 때 여러 자원을 동시에 요청하고 서버에서는 요청 순서에 상관없이 준비되는대로 응답을 하게 된다.
preload란 특정 리소스를 빠르게 로딩하도록 우선순위를 부여하는 것이다.
<link rel="preload"> 를 html <head> 에 추가하면 된다. 가능한 head의 가장 앞자리에 설정하는 것이 좋다.

<head>
  <link rel="preload" href="/assets/fonts/Gothic.woff2" as="font" type="font/woff2" crossorigin>
</head>
profile
zzzzzang_gu
프론트엔드 개발자가 되겠습니다🔥
이전 포스트

크로스 브라우징(Cross browsing)이란?

다음 포스트

CSS animation 최적화

1개의 댓글

comment-user-thumbnail
제로베이스
2023년 3월 24일

안녕하세요, 제로베이스 프론트엔드스쿨 멘토입니다. 작성해주신 글 잘 읽었고, 앞으로의 더 나은 블로깅을 응원하는 마음에서 작은 의견을 남기고 갑니다 :)

  • 전체적으로 글을 일목요연하게 잘 정리해주시고, 잘 읽히게끔 작성해주셔서 좋았습니다. 술술 잘 읽히고 이해하기 편했습니다. 그래서인지 잘 이해하고 계신다는 느낌이 들었습니다.
  • 다만, 조금씩 글을 좀 더 풍성하게 만들 수 있을 법한 포인트들이 보입니다. 꼭 해야한다는 것은 아니지만, 이렇게 하면 좀 더 내가 진짜 경험한 이슈를 학습하다가 글을 작성한 느낌이 들 것 같아, 글을 읽는 사람이나 면접관의 입장에서 더욱 흥미로운 글이 될 수 있을 것 같습니다.
  • 예를 들어, 글의 도입부에 왜 웹 폰트의 로딩을 최적화해야하는지?에 대한 문제 제기나, 최적화를 하면 뭐가 좋은지 등을 짚어주고 글을 시작하면 좋을 것 같습니다. 직접 필요성을 느끼게된 경험(프로젝트 개발을 하다가 특정 폰트를 사용했더니 로딩이 느려졌다 등) 등 필요성을 정말 이해하다는 것을 드러내면서 글을 시작하는 등 각자 성향에 맞게 / 글의 주제에 맞게 작성해주시면 되겠습니다.
  • '웹 폰트 로딩 최적화'를 주제로 최적화 할 수 있는 방법을 3가지 정도로 크게 나눠서 설명해주신 것으로 이해했는데요, 이 3개의 소제목 각각에 설명이 조금 더 추가되면 좋을 것 같습니다. 예를 들면, 첫번째로 '웹 폰트 포맷' 부분에서 작성해주신 '웹에서 기본 폰트가 적용되어있지만 다른 폰트를 적용하려 할 때 사용하는 4가지 폰트 포맷을 먼저 확인해보자' 처럼요..! 예를 들어, font-display는 웹 폰트 로딩을 직접적으로 빠르게 하는 방법은 아니지만, 폰트가 로딩되기 전후에 어떻게 동작할지를 개발자가 직접 지정해줘서, 폰트가 로딩되지 않은 순간 -> 로딩된 순간에 좀 더 부드럽게 전환하여 최대한 자연스러운 사용자 경험을 안겨주도록 하는 일종의 우회 방법이라고 생각합니다. 이건 제 생각을 대략적으로만 예를 들어서 정리한 것이고, 이처럼 작성자분의 의견을 각각 다음 토픽으로 넘어갈 때 초반에 설명을 좀 추가해주시면 좋을 것 같습니다.
  • minor) 'font-display 속성'은 'font-display지시자'의 하위 내용으로 들어가면 좋을 것 같습니다. 현재 동일 레벨로 작성된 것으로 보여서요..!
  • 참고하신 링크가 있다면, 하단에 참고 링크를 적어서, 외부의 자료에서 가져온 내용과 내가 주도적으로 정리한 내용이 드러날 수 있도록 하면 좋을 것 같습니다.

감사합니다!

답글 달기