Как оптимизировать веб-шрифты в WordPress

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

Дизайнеры любят веб-шрифты за лицензии, под которыми они предоставляются, а также за улучшенный опыт взаимодействия.

Веб-шрифты зачастую обрабатываются гораздо быстрее, нежели web safe шрифты (шрифты, которые часто применяются для оформления документов в сети) на широком спектре устройств разных размеров и разрешений.

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

Что представляют собой веб-шрифты?

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

• Web Safe шрифты (веб-безопасные шрифты). Это такие шрифты, которые уже предустановлены на устройствах. Сюда относятся базовые шрифты, такие как Arial, Times New Roman, Courier New, а также некоторые универсальные семейства шрифтов, как serif, sans-serif и monospace.
• Веб-шрифты – это такие шрифты, которые не предустановлены на устройствах и должны быть сначала загружены пользовательским браузером, и только потом они уже могут быть выведены на экран.

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

Размещение и доставка веб-шрифтов

Если вы решили использовать веб-шрифты, вы должны определиться с тем, как вы будете хранить ресурсы шрифтов. Есть два варианта размещения веб-шрифтов:

• Размещение на своем сайте. Ресурсы шрифта размещаются на вашем собственном сервере вместе с остальными файлами сайта.
• Размещение на сторонних серверах. Ресурсы шрифтов размещаются на сторонних сервисах, таких как Google Fonts или Typekit.

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

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

Оптимизация веб-шрифтов, добавляемых через сервисы

Начнем мы с этого варианта, поскольку он является самым простым и популярным. В то время как Typekit популярен среди профессиональных разработчиков, Google Fonts является самым распространенным источником сторонних шрифтов. Сервис является бесплатным, свободным в использовании; пользователям не нужно скачивать многочисленные ресурсы шрифтов Google Fonts, поскольку шрифты уже хранятся в кэше браузера.

Добавление Google Fonts к WordPress-сайту является простым действием. Самая быстрая реализация – это добавление шрифтов непосредственно к файлу header.php темы с помощью HTML-элемента link или к файлу functions.php с помощью wp_enqueue_script().

Как только шрифты будут добавлены к header.php или functions.php, вы сможете применить их на сайте через произвольные CSS-правила.

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

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

Мой любимый плагин для добавления Google Fonts к WordPress-сайту – это Easy Google Fonts. Он позволяет легко настраивать стили шрифтов для каждого текстового элемента и создавать произвольные селекторы для специальных элементов. Стили шрифтов присваиваются к каждому элементу и произвольному селектору через кастомайзер. Как результат, вы получаете лайв-превью всех изменений.

Еще один популярный вариант для добавления Google Fonts к WordPress – это плагин WP Google Fonts. Этот плагин, к сожалению, не предлагает лайв-превью изменений, но зато он дает гораздо больше возможностей по настройке стилей шрифтов и наборов символов. По этой причине, если вы не слишком довольны той нагрузкой, которую оказывает Easy Google Fonts на ваш сайт, вы можете перейти на WP Google Fonts и выбрать более узкое подмножество стилей шрифтов и наборов символов.

Оптимизация Google Fonts

Все шрифты Google Fonts являются сжатыми и поставляются через сеть CDN от Google, которая позволит добиться максимально быстрой доставки. Даже учитывая тот факт, что Google Fonts уже включает встроенную оптимизацию, все равно есть возможность ускорить доставку шрифтов.

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

На многих сайтах используется уникальный шрифт для стилизации заголовка сайта. Однако реализация этого означает, что вам нужно будет добавить дополнительный файл шрифта, который будет загружаться. Минимизируйте воздействие этого дополнительного стиля шрифта путем загрузки только определенных символов, используемых в вашем заголовке. Вы можете сделать это, добавив &text= с необходимыми буквами в конец Google Fonts URL.

К примеру, если вы хотите вывести слово Kinsta, используя Bungee Shade, вы можете сделать это при помощи следующей ссылки:

<link href='//fonts.googleapis.com/css?family=Bungee+Shade&text=Kinsta' rel='stylesheet'>

Обратите внимание, что здесь мы добавили &text=Kinsta к элементу link. В итоге Google Fonts CDN будет доставлять только прописную букву K, а также строчные буквы i, n, s, t и a.

Использование шрифтов, размещенных на своем сервере

Шрифты, размещенные на своем сервере – это лучший вариант, если вы используете шрифты, которые недоступны в сервисах; если вы можете доставить шрифты быстрее, чем сервисы; или если вы хотите избежать зависимости от сторонних ресурсов.

Добавить шрифт к WordPress вручную не так сложно:

• Загружаем файлы шрифта на свой сайт
• Добавляем правило @font-face к style.css вашей темы для каждого загруженного шрифта
• Применяем шрифты, используя произвольные CSS-стили

Однако, если вы хотите несколько упростить этот процесс, вы можете воспользоваться плагином Use Any Font, который позволяет загружать шрифты и привязывать их к HTML-элементам прямо из консоли WordPress. Вы можете использоваться бесплатную версию плагина для загрузки одного файла шрифта. За $10 и больше вы можете открыть возможность загрузки неограниченного количества шрифтов.

Оптимизация самостоятельно загруженных шрифтов

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

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

Во-вторых, поставляйте шрифты в четырех форматах: woff2, woff, ttf и eot. При добавлении этих шрифтов к вашему CSS-файлу с помощью правила @font-face обязательно придерживайтесь данного порядка. Это позволит гарантировать, что браузеры выберут самый быстрый формат, который они могут обработать.

В-третьих, рассмотрите возможность использования подмножества unicode-range, чтобы ограничиться только теми наборами символов, которые вы планируете использовать.

Оптимизируйте веб-шрифты с помощью CSS-инлайнинга (встраивания)

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

Основная идея этого подхода заключается в том, чтобы использовать кодирование base64 для встраивания шрифтов в стилевую таблицу CSS. Соответственно, браузер пользователя сможет избежать загрузки и обработки ресурсов шрифта.

Способен ли инлайнинг шрифтов ускорить загрузку сайта? По этому вопросу мнения разделились. Причина, по которой многие выбирают этот путь – преимущества браузерного кэширования. Как только ресурс шрифта будет загружен, все последующие просмотры, основанные на том же самом ресурсе, будут обрабатываться гораздо быстрее. Как результат, такая стратегия достойна рассмотрения, если ваш сайт имеет массу возвращающихся посетителей и многочисленные просмотры страниц в пределах одной сессии.

Кодирование ваших файлов шрифта в CSS-таблице – достаточно простая задача. localFont – простой в использовании веб-интерфейс, который вы можете применить для конвертации файлов woff, woff2 и ttf в инлайн CSS. Инструмент предлагает даже JS-скрипт, который будет проверять кэш браузера каждого пользователя на наличие необходимого шрифта перед тем, как загружать этот шрифт повторно.

Еще одна дополнительная оптимизационная методика для легких сайтов

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

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

Источник: kinsta.com