Настройка предварительной загрузки ключевых запросов для Font Awesome

В процессе оптимизации сайта по скорости вы можете столкнуться в PageSpeed Insights с неприятной проблемой. Сервис будет писать, что ускорить страницу можно «Настроив предварительную загрузку ключевых запросов», отображая в качестве ресурсов, которые нужно загружать в первую очередь, иконочный шрифт Font Awesome. Кратко расскажу, как эту проблему можно решить.

Первым делом нужно в стилях конкретной темы закомментировать кусок кода, который отвечает за вывод шрифтов Font Awesome. Находим нужный стиль в теме. В данном случае пример рассматриваю на WordPress, поэтому, скорее всего, нужный мне файл со стилями находится в папке:

/wp-content/themes/Название-темы/css/style.css

Обратите внимание: У вас может быть другой путь к файлу с нужным стилем.

Открываем файл стиля и ищем в нем подключение шрифтов Font Awesome, вот этот кусок кода в рассматриваемом случае:

@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome/fontawesome-webfont.eot");
  src: url("../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7") format("embedded-opentype"), url("../fonts/fontawesome/fontawesome-webfont.woff2") format("woff2"), url("../fonts/fontawesome/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome/fontawesome-webfont.ttf") format("truetype"), url("../fonts/fontawesome/fontawesome-webfont.svg#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

Закомментируем код:

/*
@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome/fontawesome-webfont.eot");
  src: url("../fonts/fontawesome/fontawesome-webfont.eot?#iefix&v=4.7") format("embedded-opentype"), url("../fonts/fontawesome/fontawesome-webfont.woff2") format("woff2"), url("../fonts/fontawesome/fontawesome-webfont.woff") format("woff"), url("../fonts/fontawesome/fontawesome-webfont.ttf") format("truetype"), url("../fonts/fontawesome/fontawesome-webfont.svg#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
*/

Теперь нам нужно вставить ссылки на этот шрифт напрямую в head. Идем в файл header.php (там, обычно, располагается head).

Обратите внимание: В большинстве тем WordPress добавить код в head можно прямо через настройки темы.

И напрямую вставляем ссылки на шрифт и стили:

@font-face {
 font-family: 'FontAwesome';
 font-display: swap;
 font-style : normal;
 src : url("/wp-content/themes/Название-темы/fonts/fontawesome/fontawesome-webfont.eot");
 src : url("/wp-content/themes/Название-темы/fonts/fontawesome/fontawesome-webfont.eot"),
 url("/wp-content/themes/Название-темы/fonts/fontawesome/fontawesome-webfont.woff2") format("woff2"),
 url("/wp-content/themes/Название-темы/fonts/fontawesome/fontawesome-webfont.woff") format("woff"),
 url("/wp-content/themes/Название-темы/fonts/fontawesome/fontawesome-webfont.ttf") format("truetype"),
 url("/wp-content/themes/Название-темы/fonts/fontawesome/fontawesome-webfont.svg") format("svg");
}

Все, проблема будет решена.