Оптимизация шрифтов. Как подключить Google Fonts локально?

Сегодня, друзья, вы узнаете - как подключить шрифты Google (Google Fonts) локально в WordPress (оптимизация загрузки шрифтов). В данном руководстве я собираюсь показать вам, как загружать шрифты Google с вашего сервера / хостинга, а не из внешних источников. Зачем? А чтобы ускорить ваш веб - ресурс и достичь максимальное количество баллов производительности сайта WP в PageSpeed Insights. Избавимся в PageSpeed Insights от строчки: Показ всего текста во время загрузки веб-шрифтов. Она переместится в зелёную зону - Успешные аудиты.

В Интернете полно инструкций как оптимизировать шрифты в WordPress путем размещения Google Fonts локально. Но если честно, они только для профи.

Все они объясняют, какие файлы загружать, как загрузить их в свой блог WordPress, как создать таблицу стилей, как добавить шрифты Google в указанную таблицу стилей, как поставить таблицу стилей в очередь в свой блог WP. Всё в ручном режиме. А мы, коллеги, давайте проделаем эту работу в автоматическом режиме, нажмём пару кнопок и всё. Оптимизация шрифтов - быстро и безопасно.

Зачем размещать шрифты локально в WordPress?

Ничто так не замедляет работу веб-сайта WordPress, как слишком много внешних HTTP-запросов. Скорее всего, ваша тема ВордПресс содержит запросы шрифтов Google, которые предварительно загружаются разработчиком. При правильных условиях размещение Google Fonts локально на вашем собственном хостинге / сервере может уменьшить HTTP-запросы и время загрузки WordPress.Чем меньше запросов, тем быстрее время загрузки сайта ВордПресс.

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

С Google Fonts у вас также есть один дополнительный HTTP - запрос (к таблице стилей шрифтов Google) для поиска fonts.googleapis.com, чтобы получить файл CSS. Затем из этой таблицы стилей делается запрос на сам шрифт из fonts.gstatic.com для загрузки файлов шрифтов. Выполнение дополнительных HTTP - запросов на ваших сайтах требует времени. 

Google Fonts API устанавливает минимальный срок действия в 1 день для кеширования шрифтов. Вы не можете изменить это, поскольку Google создает файл CSS автоматически на основе нескольких факторов.

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

Когда вы размещаете локально, все запросы поступают из одного домена (вашего) и скорее всего, вам не понадобится другой файл CSS, поскольку он будет внутри файла CSS вашей темы WordPress. Плюс, вы добавите display=swap параметр в запроса, для удовлетворения рекомендации PageSpeed, чтобы текст оставался видимым во время загрузки веб-шрифта.

В следующем разделе рассказывается, как вы можете сделать это на своем сайте WordPress. Самый простой способ оптимизировать и разместить шрифты локально на своем сайте WordPress - это бесплатный плагин OMGF WordPress и новый Local Google Fonts.

Local Google Fonts (Локальные шрифты Google)

Разместите используемые шрифты Google на своем сервере/хостинге и сделайте свой сайт WP более совместимым с GDPR. Плагин типа Установи и забудь. Это может быть хорошим вариантом для нетехнических пользователей:

Универсальный плагин Local Google Fonts, который автоматически определяет источники шрифтов Google и дает пользователям возможность загружать их и использовать локально.

Установите и активируйте плагин Локальные шрифты Google. Перейдите в Настройки - Google Fonts (Шрифты Google) и решите, какие шрифты должны загружаться локально:

На этой странице показаны все обнаруженные шрифты Google с течением времени. Нажмите кнопку Host locally. И шрифты Google загрузятся на ваш хостинг.

Мои шрифты не отображаются на странице настроек, что мне делать?

Шрифты обнаруживаются после их использования. Попробуйте сначала просмотреть свой сайт и вернуться на страницу настроек.

Следующий плагин OMGF | Host Google Fonts Locally, который имеет несколько дополнительных функций.

Оптимизация шрифтов автоматически с помощью плагина OMGF

Теперь в нашем распоряжении есть мощный плагин WordPress. И он называется OMGF | Размещение шрифтов Google локально. Расшифровка аббревиатуры OMGF - Оптимизировать мои шрифты Google.

Используйте кэш браузера и минимизируйте запросы DNS с помощью OMGF (Optimize My Google Fonts, ранее известного как CAOS for Webfonts). Поддерживайте высокий балл в Pagespeed Insights и продолжайте использовать свои шрифты Google, разместив их локально.

OMGF написан с учетом производительности и удобства использования. Он использует Google Fonts Helper API для автоматической загрузки нужных шрифтов в папку содержимого WordPress и создания для них таблицы стилей.

Таблица стилей автоматически включается в заголовок вашего сайта и на 100% совместима с плагинами оптимизации / минификации CSS и JS, такими как Autoptimize или W3 Total Cache. OMGF может эффективно удалять любые запросы к внешним шрифтам Google (загруженным с fonts.gstatic.com или fonts.googleapies.com).

Это уменьшит время загрузки вашей страницы , задействует кеш браузера , минимизирует DNS-запросы и фактически принесет вам отличную оценку в Pagespeed Insights, не сказываясь на производительности вашего веб-сервера.

Возможности OMGF:

• Автоматически определять, какие шрифты Google Fonts использует ваша тема;
• Загружать их и создавать таблицу стилей, которая автоматически добавляется в ваш заголовок с помощью функции WordPress wp_head ();
• Изменять путь кэширования (где сохраняются шрифты и таблица стилей) для повышения совместимости с мультисайтовыми средами и плагинами кэширования и безопасности, такими как WP Super Cache, Autoptimize и WordFence;
• Включать загрузчик веб-шрифтов Typekit для асинхронной загрузки шрифтов и дальнейшего повышения вашего рейтинга Pagespeed Insights;
• Управлять производительностью шрифтов, добавляя свойство font-display Swap (оптимизация загрузки шрифта);
• Предварительно загружать всю таблицу стилей или только шрифты, загруженные в верхней части страницы;
• Автоматически генерировать локальный источник для веб-шрифтов;
• Автоматически удаляйте все шрифты, загруженные с fonts.gstatic.com или fonts.googleapis.com.

Вам не нужно ничего скачивать. Вам не нужно ничего распаковывать. Вам не нужно ничего загружать. И вам не нужно ничего создавать - особенно чертову таблицу стилей. Без обид.

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

Установка OMGF

1. В админ панели WordPress перейдите в Плагины - Добавить новый;
2. Введите OMGF в строку поиска по плагинам;
3. Выберите с розовой полосой и нажмите "Установить". 
4. После установки нажмите "Активировать".

Хотя плагин WordPress работает довольно просто. Я подумал, что было бы неплохо показать вам подробную инструкцию по настройке оптимизации шрифтов.

Настройка OMGF: Оптимизация производительности Google Fonts

Пришло время для самого интересного! Размещение ваших шрифтов в WordPress локально.

Зайдите в Настройки, выберите новый пункт - Optimize My Google Fonts (оптимизировать шрифты Google). Нажмите кнопку Auto detect (Авто определение):

Инструмент определит какие шрифты использует ваша тема и плагины. Если не удаётся сразу найти используемые шрифты, то откройте любую запись в новой вкладке и попробуйте снова. Используемые подмножества и шрифты вашей темы автоматически появятся в списке. У меня получилось так. Авто определение обнаружило у меня на сайте seojournal.ru 2 шрифта в 2 разных подмножествах и 5 стилей шрифтов:

В доступные стили шрифтов отметьте нужные. Пожалуйста, проверьте результаты и продолжите загрузку шрифтов и создание таблицы стилей. Для этого, кликните кнопочку "Download Fonts" (Загрузить шрифты) и дождитесь завершения загрузки шрифтов на ваш хостинг.

В зависимости от размера вашего списка шрифтов и скорости вашего хостинга / сервера это может занять несколько минут. Как только процесс завершиться появится подсказка. Например, у меня так:

Скачано 5 шрифтов. Теперь вы можете приступить к созданию таблицы стилей. Для этого, нужно нажать "Generate stylesheet" (Создать таблицу стилей).

Через пару секунд появится надпись: Поздравляю! Ваша таблица стилей была успешно создана и добавлена ​​в заголовок вашей темы. Готово!

Видите, как это было легко? Никакой 12 - шаговой программы! Ваши шрифты были загружены и сохранены на вашем хостинге. Таблица стилей была создана и добавлена ​​в заголовок вашей темы. Всё автоматически! Круто.

Удаление внешних шрифтов Google

Теперь остается только удалить любое упоминание о внешних шрифтах Google из вашего блога / сайта. OMGF поддерживает функцию "Удалить шрифты Google". Модуль позаботится обо всех шрифтах Google, добавленных обычными методами. Откройте вкладку Advanced Settings (Расширенные настройки) и поставьте галочку напротив Auto Remove (Автоматическое удаление):

Удалите любые запросы к внешним таблицам стилей Google Fonts из вашего WordPress-блога. Нажмите "Сохраните изменения". Если это не сработает, ваша тема и / или плагины используют не традиционные методы для загрузки шрифтов Google.

Некоторые темы предлагают возможность отключить шрифты Google. Если ваша тема не работает, есть много других способов добиться этого. Например, в плагине WP-Optimize раздел Minify, вкладка Fonts можно отключить шрифты от Гугла:

В модуле Autoptimize также есть опция для удаления Google Fonts:

В заключение

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

Оптимизация ваших шрифтов Google значительно увеличивает время загрузки страницы сайта. Это также дает вам полный контроль над сроком хранения файлов, устраняя необходимость использования кэширования браузера на сайтах, предлагающих показатели производительности, таких как GTMetrix, Pagespeed Insights.

По-прежнему возникают проблемы с Google Fonts и их оптимизацией? Если у вас есть вопросы или предложения, оставьте комментарий ниже.