2021년 초에 구글 글꼴과 기타 웹 페이지 글꼴을 가능한 한 빨리 불러옵니다

17525 단어 html googlefonts webfont

본고는 Roberts (2020)의 광범위하게 인용된 글을 정리하고 서버를 통해 구글 글씨체를 제공하는 가장 빠른 방법을 제시했다.또한 제 경험에 의하면 같은 기술이 다른 웹 페이지 글씨체에도 적용되어야 한다고 생각합니다.

TL;박사 01 명
Google Fonts에서 Poppins를 사용하는 경우 <head> 요소에 다음 코드 세그먼트를 추가합니다.

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  rel="preload"
  as="style"
  href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
/>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
  media="print"
  onload="this.media='all'"
/>
<noscript>
  <link
    rel="stylesheet"
    href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
  />
</noscript>

글꼴 주조 공장에서 웹폰트를 구매한 경우:

위 코드 세그먼트 첫 행의 https://fonts.gstatic.com을 font foundry

웹 글꼴 서버의 URL로 바꿉니다.

은 font foundry에서 제공하는 스타일시트 URL로 모든 href 태그의 <link> 속성 값을 대체합니다.

모티프
2018년에 제가 구글 글씨체를 어떻게 사용하는지 처음 배웠을 때 저는 <head> 요소에서 코드를 작성하기만 하면 됩니다. 다음과 같이 간단합니다.

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

그때부터 구글 글씨체(또는 다른 인터넷 글씨체)를 가속 탑재하는 기술이 많이 발전했다.Roberts (2020)은 구글 글씨체에 대한 글을 전문적으로 써서 명확한 답안을 제공했고 낡은 브라우저와 자바스크립트를 사용하지 않는 브라우저의 반환 코드를 포함하는 증거가 지원되었다.그의 글은 광범위하게 인용되었다(예를 들어 Coyier 2020과 Kurtuldu et al. 2020).
나는 구글 글씨체에 있는 팝핀스를 이용해서 그의 my little webapp 부분을 추적했다.그것은 확실히 사이트의 마운트 속도를 가속화시켰다.
나는 또 Roberts's (2020) 제안의 논리가 구글 글씨체에 특정되지 않는다는 것을 깨달았다.그것은 모든 웹 페이지 글꼴에 적용될 수 있다.그래서 저는 another little app of mine을 시도했는데 글씨체 주조 공장에서 구매한 인터넷 글씨체를 사용했습니다.이것 봐, 이것도 사이트의 마운트 속도를 가속화시켰다.
그래서 2021년 초에 웹 글꼴을 가장 빠른 속도로 제공하는 방법을 한 걸음 한 걸음 나눠보겠습니다.

1단계: 웹 글꼴 서버 미리 연결
에서

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

만약 네가 최근에 구글 글꼴을 사용한 적이 있다면, 이 줄 코드는 네가 매우 잘 알고 있을 것이다.이것은 구글 글꼴에서 오늘 글꼴을 선택한 후의 조언입니다. 표준 <link> 탭을 제외하고는 글꼴 스타일시트를 인용하십시오.
이 코드는 스타일시트에서 웹 글꼴 파일 URL을 찾은 후 연결을 시작하는 대신 웹 글꼴 서버에 초기 연결을 설정합니다.Mihajlija (2019)과 Google Developers (2020)은 모두 <link rel="preconnect">의 기능을 상세하게 설명했다.
이것은 큰일이다.웹 글꼴을 제공하려면 브라우저가 자신의 사이트 서버뿐만 아니라 웹 글꼴 스타일시트 서버와 웹 글꼴 파일 서버에도 연결해야 한다고 알려 줍니다.그러나 웹 글꼴 파일 서버의 URL은 웹 글꼴 스타일시트에서만 찾을 수 있습니다.따라서 브라우저가 웹 글꼴 파일 서버에 접근하기 전에는 상당한 시간이 걸린다.preconnect 링크 탭은 브라우저가 웹 글꼴 스타일시트를 읽기 전에 웹 글꼴 파일 서버에 접근하기 시작한다는 것을 알려 이 과정을 가속화시켰다.
이 때문에 웹 글꼴에 서비스를 제공하는 코드의 맨 위에 나타날 것입니다.
지금까지 우리는 구글 글씨체만 논의했다.그러나 원칙적으로 같은 기술은 모든 네트워크 글씨체에 적용되어야 한다.유일한 문제는 글꼴 서버 URL을 어디서 찾느냐입니다.
웹 fonts의 fontfoundry를 구매하면 <link> 태그 세션을 받았을 것입니다. 이 세션은 <head> 요소에 포함됩니다.href의 값을 보세요.브라우저의 주소 표시줄에 복사하여 붙여넣은 다음 Enter 키를 누릅니다.글꼴 스타일시트의 내용을 볼 수 있습니다. @font-face부터 시작합니다.구글 글꼴을 예로 들면 다음과 같다.

@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/poppins/v15/pxiEyp8kv8JHgFVrJJfecnFHGPc.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

src 속성을 참조하십시오.값은 웹 글꼴 파일 URL을 지정합니다.URL을 첫 번째 슬래시로 복사합니다.위의 예에서https://fonts.gstatic.com입니다.글꼴 파일 서버 URL입니다.

2단계: 웹 글꼴 스타일시트 미리 로드
다음 행 코드는 다음과 같습니다.

<link
  rel="preload"
  as="style"
  href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
/>

href 속성 값을 Google Fonts 또는 다른 font Foundry에서 제공하는 <link> 태그 세션의 값으로 바꿉니다.
이 코드는 웹 글꼴 스타일시트를 비동기적으로 불러옵니다.즉, 브라우저가 다음 HTML 코드에 지정된 다른 작업을 막지 않고 스타일시트를 다운로드하기 시작합니다.Weiss (2016)은 preload의 기능을 더욱 상세하게 설명했다.
이것도 큰일이다.<link rel="stylesheet"> 태그가 있는 글꼴 스타일시트를 로드하는 표준 방법에 따라 HTML 문서의 나머지 코드 행은 스타일시트를 완전히 다운로드하기 전에 실행되지 않습니다.이것은 분명히 웹 페이지의 그리기를 지연시킬 것이다.
마찬가지로 이런 논리는 구글 글씨체 특유의 것이 아니다.모든 웹 페이지 글꼴은 '미리 불러오기' 글꼴 스타일시트에서 이득을 볼 수 있습니다.
각주로 Djirdeh (2020)은 글꼴 파일 자체에 preload을 사용하는 것을 권장합니다.나는 이런 방법을 시도했지만, 많은 글꼴 파일에 대해 페이지의 마운트 속도가 높아지는 것은 뚜렷하지 않다.글꼴 파일 서버는 preconnect을 사용하는 것이 좋습니다.
경고: preload에서 스타일시트를 불러오지만 읽지 않습니다.다시 말하면 표준 <link rel="stylesheet"> 표기와 <link rel="preload"> 표기(Chalaris 2019)를 포함해야 합니다.
그러나 다음 단계 3의 반환 코드는 스타일시트를 읽는 역할을 합니다.

3단계: 이전 브라우저의 예비(fallback)<link rel="preload"> 레이블은 상당히 새로운 기능입니다.호환 브라우저는 2021년 1월 현재 전 세계 페이지 조회수(Can I Use 2021)의 88% 이상을 차지한다.호환되지 않는 브라우저는 <link rel="preload"> 태그(Yobo 2017)만 무시합니다.
나머지 12%의 전 세계 페이지 조회 수를 지원하기 위해 Roberts (2020)은 "인쇄 미디어 전환"방법을 사용하고, Jehl (2019)은 먼저 이런 방법을 제안(또는 홍보)합니다.

<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css2?family=Poppins&display=swap"
  media="print"
  onload="this.media='all'"
/>

이전과 마찬가지로 href 속성 값을 구글 글씨체나 다른 글씨체 주조 공장에서 제공한 <link> 표기 부분의 값으로 바꾸었다.
Jehl (2019)은 이 코드의 작용을 간결하게 설명했다.

To start, the link's media attribute is set to print. “Print” is a media type that says, “apply this stylesheet’s rules for print-based media,” or in other words, apply them when the user tries to print the page. Admittedly, we want our stylesheet to apply to all media (especially screens) and not just print, but by declaring a media type that doesn’t match the current environment, we can achieve an interesting and useful effect: the browser will load the stylesheet without delaying page rendering, asynchronously! That’s helpful, but it’s not all we want. We also want the CSS to actually apply to the screen environment once it loads. For that, we can use the onload attribute to set the link's media to all when it finishes loading.—Jehl (2019)

그래서 그것의 기능은 <link rel="preload"> 라벨과 같다.
그러나 Roberts (2020)과 같이 성능이 약간 떨어진다.나는 <link rel="preload"> 표시가 아니라 Lighthouse 감사 점수가 약간 낮다는 것을 스스로 시험해 보았다.
그러나 이것은 틀림없이 표준의 <link rel="stylesheet">보다 좋을 것이다. 예를 들어 Roberts (2020)과 같다.나는 우리가 가장 광범위한 브라우저를 지원하기 위해 모든 항목에 이 코드를 포함해야 한다고 생각한다.
오래된 브라우저를 무시하기로 결정한 경우 표준 <link rel="stylesheet">을 포함해야 합니다.2단계에서 말한 바와 같이 <link rel="preload"> 표기 자체는 스타일시트를 읽지 않고 웹 글꼴을 나타냅니다.

4단계: JavaScript를 비활성화한 사용자의 예비(fallback)
Roberts (2020)에서는 JavaScript를 사용하지 않는 사용자를 덮어쓰는 것이 좋습니다.

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

마찬가지로 href 속성 값을 구글 글씨체나 다른 글씨체 주조 공장에서 제공하는 <link> 표기 부분의 값으로 대체한다.
Roberts (2020)에 따르면 상기 3단계의 인쇄 미디어 전환 방법은 자바스크립트를 사용하지 않는 브라우저에서 작동하지 않습니다.이 사용자들에게 같은 체험을 제공하기 위해서, 우리는 이 부분을 필요로 한다.JavaScript를 지원하는 브라우저(MDN Contributors 2020)에서는 <noscript> 태그가 무시됩니다.
이게 다야!나는 몇 달이 걸려서야 비로소 이 화제를 완전히 이해하게 되었다.나는 너로 하여금 같은 말을 되풀이하게 하고 싶지 않다.이 글은 저보다 웹 글꼴 서비스 기술을 더 빨리 이해하는 데 도움을 줄 수 있기를 바랍니다.
꼭 Roberts (2020) 보세요.그는 왜 한 걸음 한 걸음이 필요한지 상세하게 설명하고 한 걸음 한 걸음 페이지의 마운트 속도에 대한 증거를 제시했다.이 글은 매우 길지만 내 글의 결론을 배운 후에 더욱 쉽게 이해할 수 있을 것이다.
당신이 구매한 웹 페이지 글씨체에 대해 같은 방법을 시도해 보세요.나에게 그것이 너에게 적합한지 아닌지를 알게 해라.글꼴 주조를 실행하면 웹 글꼴과 호환되지 않는지 알려 주십시오.

도구책
(2021)'Resource Hints: preload'을 써도 될까요?com, 2021년 2월 1일 방문.
안젤로스 찰라리스(2019)'An answer to ‘Preloading Google Fonts’', 굴뚝 넘침, 2019년 7월 2일.
코이야, 크리스.(2020)'The Fastest Google Fonts', CSS 테크닉, 2020년 5월 22일.
후세인(2020)'Prevent layout shifting and flashes of invisibile text (FOIT) by preloading optional fonts', 인터넷판.데이브, 2020년 5월 18일.
구글 개발자(2020)'Preconnect to required origins', 사이트.데프, 2020년 5월 6일.
스콧 제일(2019)'The Simplest Way to Load CSS Asynchronously', 램프 그룹, 2019년 7월 19일.
Kurtuldu, Mustafa, Thomas Steiner, Dave Crossland와 Roel Nieskens(2020)'Introduction to variable fonts on the web', 네트워크.데프, 2020년 8월 17일
MDN 기여자(2020)'<noscript>', MDN 네트워크 문서, 2020년 12월 16일.
로버츠, 해리.(2020)'The Fastest Google Fonts', CSS무술, 2020년 5월 19일.
유아프 웨이스(2016)'Preload: What Is It Good For?', 잡지 분쇄, 2016년 2월 26일.
El Yobo(2017)'A comment to an answer to ‘How exactly does link rel=“preload” work?’', 스택이 넘쳐나 2017년 2월 19일.

Reference

이 문제에 관하여(2021년 초에 구글 글꼴과 기타 웹 페이지 글꼴을 가능한 한 빨리 불러옵니다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/masakudamatsu/loading-google-fonts-and-any-other-web-fonts-as-fast-as-possible-in-early-2021-4f5o

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

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

Hannoi

PostgreSQL 소스 코드 판독 (110) - WAL \ # 6 (Insert & WAL - XLogRe...

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다