Google 글꼴 성능 최적화
게시 됨: 2020-03-28멋진 웹사이트 디자인은 멋진 이미지와 글꼴로 장식됩니다. 불행히도, 이 두 가지 웹 요소는 많은 웹사이트가 성가신 대기 시간을 나타내는 이유에 크게 기여합니다. 물론 웹 글꼴만이 신선하고 예상치 못한 새로운 것을 전달할 수 있습니다.
그러나 이 무서운 현상을 억제하는 방법이 있습니다. SVG는 개발자가 이미지 렌더링의 몇 가지 문제를 관리하는 데 도움이 됩니다. 그리고 가장 널리 사용되는 웹 글꼴인 Google 글꼴의 경우 페이지의 렌더링 시간을 개선하는 것은 Google 글꼴 성능을 최적화하기 위해 사용 가능한 몇 가지 트릭을 배포하는 것입니다.
Google 글꼴이란 무엇입니까?
Google 글꼴은 웹사이트에서 사용할 글꼴을 구성하는 특별히 조정된 글리프 모음입니다. 그들은 인터넷을 통해 사용하도록 특별히 설계되었으므로 이름이 웹 글꼴입니다.
웹 글꼴의 구조는 쓰기를 위한 기호나 문자를 형성하도록 특별히 배열된 벡터 모양(글리프) 모음으로 가장 잘 설명됩니다.
2010년 약 30개의 글꼴로 Google 웹 글꼴로 출시된 Google 글꼴은 현재 약 170억 개의 글꼴을 보유하고 있으며 현재 모든 웹사이트의 약 57%를 지원합니다. 완전 무료인 구글 폰트는 이 글을 쓰는 시점을 기준으로 초당 약 50만 뷰를 기록하고 있으며 2010년부터 37조 이상의 뷰를 축적하고 있다.
웹사이트에서 Google 글꼴을 사용하면 대부분 모든 운영 체제에 사전 설치되는 Arial 및 Georgia와 같은 시스템 글꼴 또는 '웹 안전 글꼴'에 국한되지 않습니다.
Google 글꼴을 구현하는 방법
웹사이트에서 Google 글꼴 구현은 사용자가 선택한 글꼴을 참조하는 API(응용 프로그래밍 인터페이스)를 사용하여 수행됩니다. Google에서 제공하는 이 API는 표준 CSS 링크 태그 또는 가져오기 구문을 사용하여 HTML 문서에 포함할 수 있습니다. 다음은 Baloo Chettan 2를 구현하기 위한 API의 예입니다.
표준 CSS 링크 태그 사용
가져오기 구문 사용
<style>
@import url('https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap');
</style>
HTML 문서에서 위의 API 중 하나를 사용하면 아래 예에서 볼 수 있는 것처럼 CSS 문서에서 글꼴 패밀리를 참조하여 사용할 수 있습니다.
font-family : 'Baloo Chettan 2', 필기체;
Google 글꼴 성능 최적화의 중요성
다른 웹 글꼴과 마찬가지로 Google 글꼴을 구현하고 사용하는 것은 큰 문제가 아니지만 웹사이트 방문자에게 글꼴을 제공하는 것입니다. 사용자의 장치에는 이러한 글꼴이 없습니다. 즉, 브라우저에서 웹사이트 콘텐츠를 보기 전에 다운로드해야 합니다.
글꼴 두께
각 글꼴에는 웹사이트의 대기 시간에 부정적인 영향을 줄 수 있는 가중치가 있습니다. 예를 들어 Google의 Baloo Chettan 2 글꼴의 총 크기는 720KB입니다. 즉, 웹 사이트에서 사용 가능한 모든 언어 및 변형과 함께 전체 Baloo 글꼴 모음(19)을 사용해야 하는 경우 웹 사이트 로드에 약 9MB를 고려해야 합니다. 물론 그것은 이상적이지 않으며 웹 글꼴 최적화에 가깝지 않습니다. 그러나 이를 잘못 이해한다는 것은 웹사이트 방문자가 웹사이트에서 텍스트를 볼 수 있기 전에 몇 초 동안 기다리게 하는 것을 의미합니다.
글꼴 형식
지금까지 웹에서 사용 중인 기본 웹 글꼴 형식은 4가지입니다. TTF(TrueType Font), EOT(Embedded Open Type), WOFF(Web Open Font Format) 및 WOFF2(Web Open Font Format 2.0)입니다.
불행히도 이러한 형식 중 어느 것도 모든 브라우저에서 작동하는 범용 형식으로 간주되지 않습니다.
EOT는 IE에서만 지원됩니다. Chrome과 Opera는 대부분의 형식을 가장 많이 지원하는 반면 모든 브라우저의 약 86%가 WOFF 형식을 지원합니다. 사용하려는 각 글꼴에 대한 모든 글꼴 형식을 포함해야 할 수 있습니다. 아이디어는 모든 브라우저에서 모든 글꼴을 표시할 수 있도록 하여 일관된 경험을 제공하는 것입니다.
이러한 문제는 Google 글꼴 성능을 최적화해야 하는 중요한 이유 중 일부입니다.
Google 글꼴 성능 최적화
Google 글꼴 최적화는 글꼴 API 배치 및 요청 형식에서 시작하여 렌더링까지 이어집니다. 다음은 Google 글꼴을 최적화하는 방법에 대한 간단한 트릭입니다.
Google 글꼴 리소스 미리 로드
웹 글꼴을 미리 로드할 수 있는 새로운 웹 플랫폼 기능인 <link rel="preload"> 를 사용하는 것이 좋습니다. 이 기능을 사용하면 리소스 링크에 액세스하기 전에 필요한 글꼴 리소스를 알기 위해 먼저 렌더링 트리를 구성하여 일반적으로 텍스트 렌더링을 지연시키는 기본 브라우저 동작을 우회할 수 있습니다.
<link rel="preload"> 는 일반적으로 HTML의 <head> 태그에 포함되어 CSSOM 생성을 기다리지 않고 충분히 일찍 글꼴 요청을 트리거합니다. 이 기능은 웹 글꼴이 사용되는 방식에 대한 정보는 제공하지 않고 웹 글꼴이 곧 필요할 것이라는 사전 정보만 브라우저에 제공합니다.
또한 리소스 URL을 사용하는 방법을 브라우저에 알리기 위해 사전 로드 기능과 함께 적절한 CSS @font-face 정의를 사용하는 것이 좋습니다. 다음 항목의 예를 참조하십시오.
참고: 모든 브라우저가 <link rel=”preload”>를 지원하는 것은 아닙니다. 지원하지 않는 브라우저는 코드를 무시합니다. 그러나 이 기능은 선호하는 글꼴의 원격 복사본이 있을 때 때때로 낭비적인 요청을 만듭니다.
여러 글꼴에 대해 하나의 요청 사용
Google 글꼴 최적화를 위한 또 다른 좋은 방법은 여러 글꼴 요청을 하나의 태그로 결합하는 것입니다. 각 글꼴에 대해 별도의 <link> 태그를 포함하지 않음으로써 여러 요청을 다른 배치로 보냅니다. 글꼴 요청을 결합하려면 API에서 글꼴을 | 캐릭터. 그러나 Google 글꼴 페이지에서 필요한 모든 글꼴을 한 번에 선택하기만 하면 이 작업을 수행할 수도 있습니다.
잘못된 글꼴 요청 형식:
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2&display=swap"
rel="stylesheet">
권장 글꼴 요청 형식:
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan+2|Roboto&display=swap"
rel="stylesheet">
여러 글꼴 요청을 단일 태그로 결합하여 서버로 여러 번 이동하는 브라우저를 저장하고 도메인당 한 번에 최대 2개의 연결이 가능한 구형 브라우저를 지원합니다.
모든 브라우저에 최적화된 글꼴 형식
특정 글꼴 형식을 지원하지 않는 브라우저는 단순히 무시하고 렌더링 트리의 다음 단계로 건너뜁니다. 그리고 일관된 경험을 제공하기 위해 CSS @font-face 선언에 모든 글꼴 형식을 포함해야 합니다.
그러나 무게는 줄일 수 있습니다. 글꼴을 설명하는 개별 그래프는 GZIP과 같은 호환 가능한 압축기를 사용하여 압축할 수 있는 유사한 정보로 구성됩니다. TTF 및 EOT 형식은 기본적으로 압축되지만 두 글꼴 형식을 모두 전달할 때 서버가 압축을 적용하도록 구성되어 있는지 확인해야 합니다.
압축 기능이 내장된 WOFF에 최적의 압축 설정을 사용하고 ~30% 파일 크기 감소로 WOFF2를 제공하기 위해 사용자 지정 사전 처리 및 압축 알고리즘에 의존합니다.
CSS @font-face 선언 예제
@font-face {
font-family: 'Baloo Chettan 2';
font-style: normal;
font-weight: 600;
src: local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'), /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Android, Safari */
url('/fonts/awesome.svg') format('svg'); /* Super modern web browsers */
참고: src:는 여러 리소스 변형을 가리키는 반면 url()을 사용하면 외부 글꼴을 로드할 수 있고 local()을 사용하면 로컬에서 글꼴을 가져올 수 있습니다. format()은 특정 URL의 글꼴 형식을 나타냅니다.
src 목록에서 local()을 우선시하십시오.
이 Google 글꼴 최적화 아이디어는 기본 시스템 글꼴을 참조하지 않는 한 휴대전화 사용자에게 실제로 적용되지 않을 수 있지만 웹 글꼴 최적화를 위한 효과적인 트릭으로 남아 있습니다.
위의 CSS @font-face 선언 예제를 보면 local()이 src: 설명자에서 쉼표로 구분된 리소스 변형 목록의 맨 위에 있음을 알 수 있습니다. 이 우선 순위는 의도된 것이며 로컬에서 사용할 수 없는 경우 다운로드하기로 선택하기 전에 로컬에서 글꼴의 첫 번째 소스로 사용자 브라우저를 보내는 것입니다.
이렇게 하면 브라우저가 사용자의 컴퓨터에 이미 로컬로 설치된 글꼴을 다운로드하지 않고 더 나은 웹사이트 성능을 보장합니다.
글꼴 렌더링 사용자 정의: CSS 글꼴 표시
@font-face용 글꼴 표시 설명자로 글꼴 성능을 제어하면 다운로드하는 데 걸리는 시간에 따라 Google 글꼴을 렌더링하는 방법을 결정할 수 있습니다. 원래 웹 브라우저에는 글꼴을 로드하는 데 너무 오래 걸릴 때 수행할 작업에 대한 기본 설정이 있습니다. 대부분은 폴백 글꼴을 사용한 후 시간 초과를 설정했지만 불행히도 시간 초과 기간은 다릅니다.
Chrome과 Firefox는 웹 글꼴이 준비되지 않은 경우 3초 후에 대체 글꼴에 의존하고 다운로드하는 즉시 텍스트를 원하는 글꼴로 교체합니다. Internet Explorer는 0초 안에 동일한 작업을 수행하지만 Safari에는 글꼴 렌더링에 대한 시간 초과 동작이 없습니다.
새로 도입된 font-display 속성은 현재 5가지 값 범위를 지원합니다. auto | 블록 | 스왑 | 대체 | 선택 과목
특정 서체의 텍스트를 렌더링하는 것이 매우 중요한 경우 속성을 블록 값으로 설정해야 합니다. 브라우저가 준비되지 않은 글꼴 대신 무적 의 텍스트를 사용하고 다운로드가 완료되는 즉시 교체할 수 있기 때문입니다. 대부분의 브라우저는 이 값을 기본( auto ) 값으로 사용합니다.
스왑 은 선호하는 글꼴이 준비될 때까지 임시 글꼴을 렌더링할 여유가 있는 경우에 사용할 수 있습니다. Swap은 블록과 유사하지만 페이지가 로드되기 시작하는 즉시 대체 글꼴을 렌더링하고 준비되는 즉시 기본 글꼴로 대체합니다. 이 값에는 무한 스왑 기간과 0초 블록 기간이 있습니다.
스왑 값은 텍스트를 이리저리 이동하여 독자 경험을 중간에 방해하지 않도록 본문 텍스트에 이상적이지 않습니다. 폴백을 사용하여 회사 이름이나 슬로건을 빠르게 표시해야 하지만 결국에는 브랜딩 목적으로 공식 서체가 필요한 로고 텍스트에 사용할 수 있습니다.
예: 스왑으로 설정된 font-display 속성
@font-face {
font-family : 'Baloo Chettan 2';
font-style : normal;
font-weight : 600;
font- display : swap
src : local('Baloo Chettan 2'),
url('/fonts/awesome.eot') format('embedded-opentype'); /* IE6-IE8 */
url('/fonts/awesome.woff2') format('woff2'), /* Super modern web browsers */
url('/fonts/awesome.woff') format('woff'), /* Modern web browsers */
url('/fonts/awesome.ttf') format('truetype'), /* Safari, Android */
url('/fonts/awesome.svg') format('svg'); /* modern web browsers */
스왑 값은 HTML 문서에서 Google 글꼴을 연결하는 방법을 시연하는 데 사용되는 코드(Google 글꼴 API)의 맨 처음 줄에서 구현된 것을 볼 수 있습니다.
대체 는 스왑 과 유사하지만 스왑 기간이 제한되어 있습니다. 기본 글꼴이 설정된 기간(일반적으로 0초) 내에 로드되지 않으면 텍스트는 페이지의 나머지 수명 동안 대체 글꼴을 유지합니다. 이것은 본문 텍스트에 대한 좋은 후보입니다. 가능한 한 빨리 텍스트를 렌더링하고 누군가가 읽기 시작할 때까지 텍스트를 이동하지 않습니다.
선택적 값은 fallback 의 복제본이지만 브라우저가 사용자의 네트워크 속도를 고려하여 웹 글꼴 다운로드를 시작할지 여부를 결정할 수 있도록 합니다. 연결이 너무 약한 상황에서 브라우저는 웹 글꼴 다운로드 요청을 보내지 않음으로써 요청을 제한하고 가장 필요한 리소스의 우선 순위를 지정해야 합니다.
글꼴 모음 및 변형 제한
각 글꼴군과 변형은 페이지 무게에 영향을 미치므로 Google 글꼴 최적화 프로세스의 일부에는 이 두 요소를 제한하는 것이 포함되어야 합니다.
대부분의 전문가는 최대 두 개의 글꼴 모음을 사용할 것을 권장합니다. 제목 및 콘텐츠용. 이것은 논리적이며 향상된 디자인을 위해 웹 글꼴을 활용하면서 안전하게 플레이할 수 있습니다.
italic , regular, bold 등과 같은 여러 변형을 사용할 수 있다고 해서 반드시 다운로드에 포함할 '선택'이 있는 것은 아닙니다. 필요한 정확한 변형으로 다운로드를 줄이고 너무 많이 포함하지 마십시오. 한 단어만 사용하고 싶기 때문에 완전한 변형을 다운로드하는 것은 낭비입니다. 여기에서 Google Fonts에 대한 다음 최적화 트릭이 유용합니다.
텍스트 매개변수 사용
text 매개변수는 알아야 할 최고의 Google 글꼴 최적화 트릭 중 하나이며 놀랍게도 대부분의 개발자는 이를 사용하지 않습니다. 매개변수를 사용하면 필요한 문자만 로드할 수 있습니다.
아래 예와 같이 회사 이름에 글꼴의 두 글자만 사용하려는 경우를 가정합니다. 문자 C와 N에 다른 글꼴을 사용했습니다.
회사 이름
전체 글꼴 대신 해당 두 글자만 로드하도록 요청할 수 있습니다. 글꼴 URL에는 다음과 같은 추가 매개변수가 포함됩니다.
https://fonts.googleapis.com/css?family=Baloo+Chettan+2=CN
Google 글꼴 성능을 최적화하는 이 방법은 매우 효과적이며 글꼴 두께의 90%까지 차단할 수 있습니다.
결론적으로
Google 글꼴 최적화는 웹사이트의 전반적인 성능을 개선하기 위한 중요한 전략입니다.
접근성과 가독성은 타이포그래피의 좋은 디자인을 제외하고 항상 집중해야 하는 주요 요소입니다. 위에서 언급한 글꼴 성능 향상 방법은 모두 글꼴 두께를 줄이고 가능한 한 빨리 웹 글꼴에 액세스하며 사용자 네트워크가 불안정할 때 유효한 형식/대안을 렌더링하는 데 중점을 둡니다.
이러한 방법 중 하나를 시도한 경우 및 이 기사에서 언급되지 않은 웹 글꼴 최적화 프로세스에 대해 알려주십시오.