5 советов, как сделать Google Fonts быстрее

Google Fonts — это фантастический инструмент для веб-дизайнеров и разработчиков, но иногда это один из самых медленных ресурсов на вашем сайте. Обидно и иронично, что собственная служба шрифтов Google является «длинным шестом» во многих отчетах о производительности веб-сайтов, но это не обязательно так! Вот 5 способов увеличить скорость установки Google Fonts, чтобы они меньше загружались, быстрее загружались и уменьшали смещение макета вашего сайта.

Совет 1. Используйте меньше шрифтов

Старая пословица о производительности «делайте меньше вещей» всегда применима. Если вы используете меньше шрифтов, то, очевидно, они будут загружаться быстрее, да! На большинстве сайтов достаточно использовать один или два шрифта: основной шрифт и шрифт для заголовка или акцента.

Старайтесь, чтобы ваш дизайн был как можно проще. Если вы считаете, что вам нужно 3 или более шрифтов, подумайте, стоит ли это того, чтобы сайт загружался за 4 секунды вместо 2.

Загружайте шрифты по мере необходимости

Вам не всегда нужны все шрифты на каждой странице вашего сайта. Например, мы используем базовый шрифт и шрифт заголовка на большинстве наших страниц, а затем отдельный «шрифт содержания» для длинных текстов, таких как этот. На каждой странице загружается наш базовый шрифт и шрифт заголовка, но только на страницах содержания загружается шрифт содержания. Это экономит около 30 кБ и 50 мс от времени загрузки нашей базы на большинстве страниц.

Мы делаем это в Jekyll, используя 2 тега Google Font и условно загружая шрифты контента с помощью переменной frontmatter.


---
layout: web-performance-post
title: "5 Ways To Make Google Fonts Faster"
content_fonts: true
---

Вход в полноэкранный режим Выход из полноэкранного режима

Разместить frontmatter, использующий шрифты содержимого


<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@700&Muli:wght@400;700&display=swap" rel="stylesheet">
{% if page.content_fonts %}
<link href="https://fonts.googleapis.com/css2?family=Lora:wght@400;400i;700&display=swap" rel="stylesheet">
{% endif %}

Войти в полноэкранный режим Выход из полноэкранного режима

Глобальный заголовок, который условно загружает шрифты содержимого

Ограничение веса шрифтов

Даже если вы используете всего несколько шрифтов, они могут быть очень большими и медленными, если вы загружаете все возможные вариации и веса шрифта. Например, если на вашем сайте используется популярный шрифт Roboto, то для каждой используемой вариации шрифта потребуется дополнительно 30 мс и 11 кБ. Если вы выбираете их все вслепую, это может быстро увеличиться.

Вес каждого варианта увеличивается еще в два раза, если вам нужен курсив.

Совет 2. Укажите текст шрифта

Как правило, Google Font’s не знает, что вы собираетесь показать в своем фантастическом шрифте. Поэтому ему приходится отправлять все. Буквально каждый символ из каждого алфавита, просто на случай, если вы захотите его использовать. Какая трата байтов!

Для большинства сайтов нам нужен шрифт только для символов одного алфавита. А иногда нам нужно показать только несколько слов заголовка. Google Fonts CSS2 API поддерживает параметр text, в котором мы можем указать список символов, которые мы собираемся использовать, и он сократит ответ для нас.

Например, весь вес шрифта Roboto составляет около 11 кБ. Но если мы ограничимся только основным латинским алфавитом, цифрами и обычной пунктуацией, он сократится почти вдвое — до 6 кБ.


<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap
&text=1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz%20%21%22%23%24%25%26%27"
rel="stylesheet">

Вход в полноэкранный режим Выход из полноэкранного режима

Ограничение шрифта Roboto базовыми символами

Если вы используете шрифт только для заголовка сообщения-героя, вы можете добиться еще меньшего размера! Установка text=5 Ways To Make Google Fonts Faster приводит к тому, что шрифт занимает всего 2 кБ!

Совет 3. Обходите загрузчик шрифтов Google

Google Fonts работает как двухэтапный процесс запроса. Первый запрос — это тег ссылки https://fonts.googleapis.com/css2, который вы размещаете на своей странице с нужными шрифтами. Это загрузчик шрифтов, файл CSS со всеми определениями шрифтов, которые вы запросили. После выполнения этого запроса выполняется вторая серия запросов для каждого используемого шрифта.

Это два, последовательных и блокирующих запроса, которые могут замедлить отрисовку вашего контента.

Вы можете ускорить этот процесс, включив определения шрифтов CSS непосредственно в свой собственный CSS. Вот как:

  1. Разместите на своей странице тег <link> для Google Fonts, указав нужные вам шрифты, вес и текст.

  2. Откройте Chrome DevTools и посмотрите на результаты этого css-запроса. Это будет файл CSS, который выглядит примерно так:


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4GZNCzcPbOHTt6tqXl2TMWgtUADtbNE0FwjR60ub0BtuliV9nzY5opeRF6O-FnZsaJLetvV-9mXgaxv7xBV8jmt2chWZ7OuZw6siU4A&skey=a0a0114a1dcab3ac&v=v30') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmWUlvBh0_IsHA06hvWViQJH84UwXqadI5GH6rkU6c1RhjmSh-mjE8oYqOCqC7EXNvZZ3Tj85H82LlaBb0yRZ5iW51bwqE7-6exqgvXI1IEVo&skey=c06e7213f788649e&v=v30') format('woff2');
}

Вход в полноэкранный режим Выход из полноэкранного режима

Ответ загрузчика шрифтов Google

  1. Скопируйте этот текст в CSS вашего сайта. Мы используем SASS и имеем файл _fonts.scss, который мы включаем только для этой цели. Примечание: Если вы не ограничили символы текста в запросе шрифта, вы увидите много определений @font-face. Вам нужно скопировать только те наборы символов, которые вам понадобятся. Для нас это только латинские символы.

  2. Удалите тег Google Fonts <link> из шага 1. Теперь вы будете ссылаться на файлы шрифтов непосредственно из вашего CSS и полностью пропустите запрос на загрузку.

Видимость текста во время загрузки шрифта

Обязательно сохраните свойство font-display! Эта директива указывает браузеру, показывать или скрывать текст в ожидании загрузки шрифтов. Если вы покажете текст слишком рано, это может привести к неприятному смещению макета, когда все шрифты будут заменены.

Проверка наличия локальных шрифтов

Возможно, вы используете шрифт, который уже установлен на компьютере конечного пользователя. Разве не было бы здорово, если бы вы могли просто использовать этот локальный шрифт и полностью пропустить запрос? Вы можете!

Директива src позволяет указать несколько значений, что позволяет нам попытаться использовать локальный шрифт до того, как мы нажмем URL.


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), url('https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4GZNCzcPbOHTt6tqXl2TMWgtUADtbNE0FwjR60ub0BtuliV9nzY5opeRF6O-FnZsaJLetvV-9mXgaxv7xBV8jmt2chWZ7OuZw6siU4A&skey=a0a0114a1dcab3ac&v=v30') format('woff2');
}

Вход в полноэкранный режим Выход из полноэкранного режима

Директива шрифта с локальной попыткой

Совет 4. Предварительная загрузка шрифтов

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

Вы можете указать браузеру начать загрузку шрифтов до того, как он узнает, как их использовать, добавив специальный тег <link> в <head> вашей страницы, по одному для каждого загружаемого шрифта:


<link rel="preload" href="https://fonts.gstatic.com/l/font?kit=KFOmCnqEu92Fr1Me4GZNCzcPbOHTt6tqXl2TMWgtUADtbNE0FwjR60ub0BtuliV9nzY5opeRF6O-FnZsaJLetvV-9mXgaxv7xBV8jmt2chWZ7OuZw6siU4A&skey=a0a0114a1dcab3ac&v=v30"
    as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/l/font?kit=KFOlCnqEu92Fr1MmWUlvBh0_IsHA06hvWViQJH84UwXqadI5GH6rkU6c1RhjmSh-mjE8oYqOCqC7EXNvZZ3Tj85H82LlaBb0yRZ5iW51bwqE7-6exqgvXI1IEVo&skey=c06e7213f788649e&v=v30"
  as="font" type="font/woff2" crossorigin>

Войти в полноэкранный режим Выход из полноэкранного режима

Предварительная загрузка шрифтов Roboto

Каждый из тегов предварительной загрузки содержит URL-адрес конкретного шрифта, который мы скопировали ранее, информацию о том, что браузер должен загрузить его как шрифт, и что тип файла шрифта — woff2. В зависимости от того, какие шрифты вы используете, типы могут меняться, поэтому обязательно проверьте, что указано в части format определения CSS.

Совет 5. Хостинг собственных шрифтов

Подключение к Google Fonts может замедлять работу вашего сайта. Не то чтобы службы Google были медленными, но это еще одно соединение, еще один поиск DNS и еще одно рукопожатие SSL, которое должно произойти, чтобы загрузить вашу страницу.

Если хостинг вашего сайта и без того быстрый, то размещение файлов шрифтов напрямую может еще больше ускорить работу, пропустив все шаги по настройке соединения с Google Fonts. Просто загрузите файлы шрифтов с URL-адресов и сохраните их на своем сайте. Затем обновите URL-адреса, чтобы они соответствовали вашим локальным путям.


@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Roboto'), url('https://yoursite.com/fonts/roboto-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local('Roboto'), url('https://yoursite.com/fonts/roboto-700.woff2') format('woff2');
}

Вход в полноэкранный режим Выход из полноэкранного режима

Директивы шрифтов от хостера вашего сайта

Не забудьте также изменить URL-адреса предварительной загрузки!


<link rel="preload" href="https://yoursite.com/fonts/roboto-400.woff2" as="font" type="font/woff2">
<link rel="preload" href="https://yoursite.com/fonts/roboto-700.woff2" as="font" type="font/woff2">

Вход в полноэкранный режим Выход из полноэкранного режима

Предварительная загрузка шрифтов Roboto с вашего хоста

Примечание: Если ваш хост не очень быстрый и не поддерживает HTTP/2, это может привести к замедлению работы. В старых версиях HTTP каждый запрос требовал отдельной настройки, и ваш сервер, вероятно, не такой быстрый, как сервер Google.

Насколько это быстро?

Мы внесли эти изменения в RequestMetrics.com несколько недель назад, и преимущества в производительности оказались реальными и значительными. Во-первых, посмотрите на этот показатель Lighthouse Score.


Google улучшает шрифт для показателей Lighthouse

Это здорово и все такое, но, как мы уже говорили ранее, Lighthouse может вам лгать. Мы — компания по мониторингу производительности реальных пользователей. В чем реальная польза для пользователей?


Улучшения шрифтов Google для реальной загрузки страниц

Применение этих изменений к шрифтам снизило время загрузки нашей средней страницы с 2,2 секунды до 1,9 секунды. 95-й процентиль снизился с 8 секунд до 5 секунд.


Улучшения шрифтов Google для реальной первой загрузки страниц в Контентфуле

Мы видим те же улучшения в наших показателях Core Web Vital, при этом значительно снизился показатель First Contentful Paint.


Если внимательно отнестись к выбору шрифтов и внести простые изменения в способ установки Google Fonts на сайт, можно значительно улучшить производительность загрузки для пользователей. Впрочем, не верьте нам на слово, проверьте данные о производительности реальных пользователей с помощью Request Metrics и посмотрите, насколько быстрее они работают.

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