Будьте осторожны при использовании шрифтов google

Я люблю шрифт «Poppins» и обычно использую его в своих проектах. Для оформления своего сайта я использовал инструмент fonts.google.com, чтобы получить его, а также другой шрифт «Space Mono». Я использовал их и выбрал несколько разных весов. Я импортировал их по ссылке, которую предоставил сайт.

Когда я создал первую версию сайта, я использовал инструменты PageSpeed и Lighthouse для анализа его производительности. Оценка составила от 90 до 92%. Основная причина снижения оценки на 8-10% была связана с использованием шрифтов, которые я добавил в проект.

Сначала я попытался уменьшить количество весов шрифтов, но это не сильно изменило результаты. Я искал в Интернете лучшие способы импорта пользовательских шрифтов в проект, но не смог найти удовлетворительного ответа. Я начал забывать об этой проблеме, пока не нашел объяснение того, как использовать шрифты, в документации на сайте Astro.

На этой странице приведено несколько решений для импорта пользовательских шрифтов, одно из которых использует инструмент Fontsource. Fontsource — это проект с открытым исходным кодом, который предоставляет нам список известных шрифтов. Затем мы можем установить тот, который нам нужен, и импортировать его как self-host в наши проекты.

Например, я установил два упомянутых выше шрифта следующим образом:

npm install @fontsource/poppins
npm install @fontsource/space-mono
Войдите в полноэкранный режим Выход из полноэкранного режима

Затем я добавил эти шрифты в основной слой заголовка (внизу):

import "@fontsource/poppins"
import "@fontsource/poppins/500.css"
import "@fontsource/poppins/700.css"
import "@fontsource/space-mono"
import "@fontsource/space-mono/700.css"
Войдите в полноэкранный режим Выход из полноэкранного режима

Конечно, файл стилей уже содержал шрифты, используемые для каждого тега и класса, поэтому не было необходимости изменять его.

После повторного развертывания сайта и проверки его производительности с помощью PageSpeed и Lighthouse я обнаружил, что показатели сайта достигли 98% и 100%. Другими словами, при таком небольшом изменении в использовании пользовательских шрифтов, эти два инструмента показали, что оценка была на 8 и 10% выше.

Я создал еще один проект, чтобы проверить, окажет ли использование шрифтов с собственного хостинга значительное влияние на рейтинг сайта, вместо того чтобы использовать шрифты с fonts.google.com. Я использовал в среднем 18 шрифтов «Poppins» с разным весом и после этого проверял их производительность.

Когда я импортировал шрифты с сайта fonts.google.com, результат составил 79%.

Оценка, полученная в случае, когда я использовал шрифт self-host, составила от 94 до 97%, что минимум на 15% больше, чем в предыдущем случае.

Заключение:
Одним из преимуществ инструмента Fontsource является возможность использования шрифтов, которые находятся в диапазоне латинских букв, что значительно уменьшает размер файлов шрифтов и ускоряет загрузку сайта. Например, для шрифта «Poppins», как видно из изображения ниже, размер файла составляет около 66 КБ, когда в нем все символы, но только 11 КБ в диапазоне латинских букв.

Наверняка существуют лучшие решения для использования пользовательских шрифтов, о которых я пока не знаю, но я хотел поделиться с вами этим опытом.

Хорошего дня.

Оцените статью
devanswers.ru
Добавить комментарий