웹 폰트 최적화 - 렌더링 변경 없이

이 사이트의 웹 폰트 로딩을 더 빠르게 만들되, 외관은 전혀 바꾸지 마십시오. 폰트 바이트를 가능한 한 줄이고, 렌더링은 동일하게 유지하며, 전후 픽셀 차이(diff)로 이를 증명하십시오. 시각적 변화는 제가 승인하지 않는 한 회귀(regression)로 간주합니다. 최적화로 인해 렌더링이 바뀌는 경우, 무엇을 절약하고 무엇이 바뀌는지 알려주고, 기본적으로 사이트가 동일하게 보이도록 유지하십시오. 현재 로딩 동작을 유지하십시오: `font-display`나 폴백(fallback) 폰트는 건드리지 마십시오. 빌드에 폰트 처리를 추가하지 말고, 제가 수동으로 실행하는 스크립트를 작성하고, 그 출력을 커밋하며, 언제 다시 실행해야 하는지 명시하십시오. 먼저 현재 상태를 측정하십시오: 각 폰트 파일의 크기, 글리프 수, 가변 축(variable axes), OpenType 기능, 힌팅(hinting), 그리고 페이지당 폰트 바이트와 각 페이지가 사전 로드(preload)하는 항목. 그런 다음 사이트가 실제로 사용하는 것을 파악하십시오. 인라인 컴포넌트 스타일과 스타일시트를 모두 확인하십시오: 콘텐츠에 나타나는 문자, 각 폰트가 필요로 하는 축 값과 가중치(일회성 오버라이드와 이탤릭 내 볼드 포함), 켜져 있는 OpenType 기능, 그리고 `hyphens: auto`가 U+2010 하이픈을 사용하는 것과 같은 CSS 부작용. 각 폰트를 그에 맞게 잘라내십시오. 사용된 문자에 Latin-1과 Latin Extended-A를 더하고, 오늘 그렇게 렌더링된다면 CJK는 시스템 폰트에 맡기십시오. 가변 축은 사용 중인 범위로 제한하고, 어떤 축도 오버라이드되지 않으면 하나의 값으로 고정하십시오. 사용되지 않는 OpenType 기능과 힌팅은 제거하십시오. 각 폰트를 두 개의 파일로 분할하십시오. 대부분의 페이지가 사용하는 ASCII와 구두점(컬리 따옴표, 대시, 줄임표)을 포함한 작은 코어(core) 파일은 사전 로드됩니다. `unicode-range` 뒤에 있는 확장(extended) 파일은 페이지가 해당 문자 중 하나를 필요로 할 때만 다운로드됩니다. 각 파일의 `unicode-range`는 실제로 포함된 문자만 나열해야 합니다. 몇 가지 주의할 점이 있습니다. 코어 파일과 확장 파일 사이에 생성된 폴백(fallback) 페이스는 실제 폰트가 도착하기 전에 확장 문자를 그릴 것입니다. OFL(Open Font License) 아래에서 Reserved Font Name을 가진 폰트는 서브셋(subset) 처리 후 내부적으로 이름을 바꿔야 합니다. 생성된 파일을 확인하십시오. 폰트 도구에는 특이한 동작이 있기 때문입니다. 완료라고 부르기 전에, 동일한 콘텐츠에서 기준(baseline)을 만들고 코드, 이탤릭, 악센트 문자, 자체 폰트 설정이 있는 컴포넌트, CJK가 포함된 페이지에서 전후 픽셀 차이를 비교하십시오. 모든 보이는 차이를 설명하십시오: 콘텐츠 변경, 수정할 회귀, 또는 무해한 서브픽셀 반올림. 페이지당 바이트를 다시 측정하고 확장 파일이 필요한 곳에서만 로드되는지 확인하십시오. 작업이 끝나면, 폰트별 및 페이지별 전후 바이트, 픽셀 차이 결과, 제가 요청한 것에서 벗어난 부분과 그 비용, 그리고 스크립트를 다시 실행하는 방법을 알려주십시오. 나중에는 코어 폰트를 전역 스타일시트에 포함하고 유휴(idle) 상태 후 확장 파일을 사전 캐시(precache)하는 것이 좋을 수 있습니다.