웹 성능을 위한 초보자 가이드: Google 글꼴 최적화

Google 글꼴을 최적화하여 웹 성능을 개선하는 방법

소개

This is a continuation of my Web Performance posts, with the . Today we will be optimizing fonts with a focus on Google Fonts. I was also planning to discuss FontAwesome, but that topic is long enough to warrant its own blog post later.

글꼴 표시 사용: 스왑

The first and easiest step to optimize fonts is to use font-display: swap on any fonts that need to be loaded - in combination with a web safe fallback font. This applies to all externally loaded fonts, not just Google Fonts. If you are embedding the link from the external site to your <head> , the font provider needs to have this feature. This was available on Adobe Typekit 최종적으로 2020년 9월 기준.

Note: font-display: swap does not work with font icons!

Google Fonts에서 내장 코드를 복사하는 경우 다음과 같이 편리하게 추가했습니다(미리 연결이 있는 다른 링크 태그와 함께 잠시 후에 설명하겠습니다).

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

그래서 font-display: swap는 무엇을합니까? 외부 글꼴이나 글꼴 파일을 로드하는 데에는 항상 약간의 지연이 있으므로 글꼴이 로드될 때까지 사용자에게 빈 화면이 표시되는 것을 원하지 않습니다. 이렇게 하면 대체 글꼴이 로드되어 다른 글꼴 로드가 완료될 때까지 사용자가 사이트를 읽을 수 있으며, 그런 다음 교체되고 대체 글꼴이 실제 글꼴로 바뀝니다. 이것은 물론 웹에 안전한 대체 글꼴을 원한다는 것을 의미합니다.

font-family: 'Roboto', sans-serif;

페이지가 로드되면 브라우저는 Google Fonts에서 Roboto를 가져와서 Roboto 로드가 완료될 때까지 사용자에게 sans-serif를 표시합니다. 이것은 사용자가 페이지를 볼 때 글꼴 패밀리가 변경되는 것을 볼 수 있는 경우를 방해할 수 있는 FOUT 또는 "스타일이 지정되지 않은 텍스트의 플래시"로 알려진 것으로 이어집니다. 개인 취향에 따라 사용할 수 있는 다른 값font-display이 있지만 swap 페이지가 로드될 때 표시되는 텍스트를 차단하지 않는 유일한 값입니다. 다른 방법에 대해 자세히 읽을 수 있습니다here.

사전 연결

You'll notice that Google Fonts also gives you some other link tags:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

The "preconnect" asks the browser to connect to another domain in advance before the browser discovers that domain on its own. Because text is so crucial to a web site, here Google is saying, "Hey browser, I'm going to need to load fonts from these external servers and you won't discover it until later, so I'm letting you know ahead of time to connect now."

Super Tip: Make sure that you are only calling the font weights and styles that will actually be used. I've seen many sites that call extra fonts that are never used in the CSS and this leads to unnecessary downloads.

로컬에서 글꼴 제공

Even with the updated performance code from Google Fonts and with using preconnect, the browser still has to make a connection to another server in order to download your fonts. The new strategy is to load fonts locally instead because you'll probably see better performance staying on the same server.

Years ago the advantage of linking to Google Fonts was that if other sites also used the same fonts as your site, you could take advantage of browser caching. If users visited another site using the same Google Fonts as yours, when they visited your site afterwards they wouldn't need to download the font files again. This benefit went away with Chrome cache partitioning .

글꼴이 CSS를 통해 로컬로 호출되는 방식은 항상 나에게 약간 성가신 일이었습니다. 브라우저 호환성을 최대화하기 위해 얼마나 많은 다른 글꼴 파일이 필요한지에 대한 질문이 항상 있었습니다. Internet Explorer가 더 많이 지원되었을 때 500kB의 순수 글꼴 파일이 생성될 수 있습니다. 고맙게도 요즘에는 woff와 woff2만 제공하면 안전합니다. 불행히도 Google 글꼴은 ttf만 제공하므로 변환해야 합니다.

Google 웹폰트 도우미 사용

The most convenient way to set up Google Fonts locally is using Google Webfonts Helper CSS를 생성하지만 font-display: swap 추가하는 것을 잊지 마십시오. 또한 글꼴이 올바르게 로드되는지 확인하십시오. Github 저장소에서 알려진 문제인 "Inter"글꼴에 문제가 있습니다.

수동으로 Google 글꼴 변환

You can download all the font files in a zip file directly from Google Fonts. But now you must convert the ttf files to both woff and woff2. There are many free online converters and here's one 구글 폰트와 일치하는지 테스트했습니다.

파일을 다운로드했으면 디렉토리에 폴더를 만들어 woff/woff2 파일을 저장한 다음 CSS에서 다음과 같이 호출합니다(글꼴 스타일, URL 및 파일 이름이 특정 설정과 일치하는지 확인).

@font-face {
   font-family: 'Roboto';
   font-style: normal;
   font-weight: 400;
   font-display: swap;
   src: local(''),
        url('../fonts/Roboto-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
        url('../fonts/Roboto-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
}

body {
   font-family: 'Roboto', sans-serif;
}

결론

이것은 전체 성능에 약간의 개선이 될 것이지만 변경 사항은 다른 웹 성능 전략에 비해 비교적 간단합니다. 텍스트 콘텐츠는 매우 중요하므로 이러한 업데이트를 수행할 가치가 있으며 사이트를 개선할 수 있기를 바랍니다.

Reference

이 문제에 관하여(웹 성능을 위한 초보자 가이드: Google 글꼴 최적화), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/dianale_dev/beginners-guide-to-web-performance-optimizing-google-fonts-1lif

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)