Определение поднабора для шрифта
По статистике HTTP Archive на 81.5% сайтов из топ-миллиона используют как минимум один веб-шрифт. Веб-шрифт — это который подключается как внешний ресурс, не локальный шрифт пользователя. При этом шрифты сильно влияют на загрузку страницы.
Пол Кальвано собрал полезный инструмент Web Font Analyzer, который смотрит на реальную загрузку страницы, какие шрифты на ней используются и как сильно они влияют на метрики Core Web Vitals. Для этого нужно сначала проанализировать страничку на webpagetest.org, а потом результат анализа скормить в сам Web Font Analyzer.
Посмотрел на свой блог, взял специально статью с примерами кода. И получилось, что всего страница до FCP грузит 43 КБ, из них 36 КБ (84%!) — Fira Code для сниппетов кода. При этом глифов на странице используется 87, а внутри шрифта их 536.
Я не призываю садиться и для каждой страницы собирать отдельную версию шрифта только с нужными глифами. В блоге это было бы делать глупо, к тому же у меня сервис-воркеры неплохо справляются с кэшированием. Но для всяких лендингов, где есть два красивых заголовка очень дорогим шрифтом, посмотреть, сколько на самом деле нужно глифов для рендеринга этих заголовков и выделить из шрифта значимый поднабор, а остальное вырезать — очень хочу такую автоматику на всевозможных тильдах и прочих конструкторах лендингов.
https://paulcalvano.com/2024-02-16-identifying-font-subsetting-opportunities/
По статистике HTTP Archive на 81.5% сайтов из топ-миллиона используют как минимум один веб-шрифт. Веб-шрифт — это который подключается как внешний ресурс, не локальный шрифт пользователя. При этом шрифты сильно влияют на загрузку страницы.
Пол Кальвано собрал полезный инструмент Web Font Analyzer, который смотрит на реальную загрузку страницы, какие шрифты на ней используются и как сильно они влияют на метрики Core Web Vitals. Для этого нужно сначала проанализировать страничку на webpagetest.org, а потом результат анализа скормить в сам Web Font Analyzer.
Посмотрел на свой блог, взял специально статью с примерами кода. И получилось, что всего страница до FCP грузит 43 КБ, из них 36 КБ (84%!) — Fira Code для сниппетов кода. При этом глифов на странице используется 87, а внутри шрифта их 536.
Я не призываю садиться и для каждой страницы собирать отдельную версию шрифта только с нужными глифами. В блоге это было бы делать глупо, к тому же у меня сервис-воркеры неплохо справляются с кэшированием. Но для всяких лендингов, где есть два красивых заголовка очень дорогим шрифтом, посмотреть, сколько на самом деле нужно глифов для рендеринга этих заголовков и выделить из шрифта значимый поднабор, а остальное вырезать — очень хочу такую автоматику на всевозможных тильдах и прочих конструкторах лендингов.
https://paulcalvano.com/2024-02-16-identifying-font-subsetting-opportunities/