Lighthouse was unable to automatically check the font-display value for the following URL: /wp-content/plugins/elementor/assets/lib/font-awesome/fonts/fontawesome-webfont.woff2.

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

Отключаем стили которые вызывают проблемные шрифты

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

И для начала нам нужно определиться со стилями которые вызывают “проблемные” шрифты. Для этого возвращаемся на страницу PageSpeed Insights и переходим к разделу…

Настройте показ всего текста во время загрузки веб-шрифтов

Здесь мы видим то количество шрифтов с которым нам и придется позаморачиваться. Что ж начнем.

После того как имя шрифта нам известно нужно найти тот css файл который отвечает за его подключение. Для этого Вам в помощь поиск по файлам в NotePad программе ++.

Далее найдите место в котором происходит подключение данного стиля и отключите его. В данной статье я подробно объяснил как это сделать.

Отключение и переподключение стилей вызывающих шрифты

Отключение

Благодаря коду ниже я произвел отключение стилей плагина Elementor и темы Astra, которые вызывали шрифты указанные в рекомендациях PageSpeed Insights . Данный код нужно добавить в function.php или в файл Вашего плагина.


// Отключаем любые CSS стили плагинов
function custom_dequeue()
{
    /**
    * Отключаем подключение темы Astra к Google Fonts
    */
    wp_dequeue_style('astra-google-fonts');

    /**
    * Elementor - Отключаем Font Awesome
    */  
    wp_dequeue_style('font-awesome');
    wp_deregister_style( 'font-awesome' );
    wp_dequeue_style('elementor-icons');
    wp_deregister_style( 'elementor-icons' );
}
add_action( 'wp_enqueue_scripts', 'custom_dequeue', 9999 );
add_action( 'wp_head', 'custom_dequeue', 9999 );
add_action( 'wp_print_styles', 'custom_dequeue' );

Подключение Теперь когда стили были отключены создайте копии стилей где нибудь в удобной для Вас папке. В теле стилей Вам необходимо будет отключить подключение шрифта. Для этого просто закомментируйте код подключения. Для примера возьмем файл font-awesome.css плагина Elementor, который у него находится здесь:


/ Elementor/lib/font-awesome/css/font-awesome.css

Я его перенес в папку


/wp-content/themes/SDStudio/_SDStudio_Plugins_Dequeue_JS_CSS/Elementor/lib/font-awesome/css/font-awesome.css

И в данном CSS файле закомментировал код отвечающий за подключение шрифта:

Но как же теперь подключить шрифт? Спросите Вы, и будете очень правы… А подключать мы его будем в файле header.php. Да, этот метод добавит немного “хард кора” в тело страницы, но для получения нужного результата (а именно, сразу появляющийся текст при загрузке страницы) на сайте под управлением WordPress я другого пути не нашел.

Подключение шрифтов

И так мы отключили стили, сделали их переподключение, закомментировали код подключения файлов шрифта. Также скопировали данные шрифты в папку /fonts нашего сайта. Верно?

Тогда едем дальше.

Открываем header.php и под добавляем код ниже:


<style>
@font-face {
 font-family: 'FontAwesome';
 font-display: swap;
 font-style : normal;
 src : url("/fonts/fontawesome-webfont.eot");
 src : url("/fonts/fontawesome-webfont.eot"),
 url("/fonts/fontawesome-webfont.woff2") format("woff2"),
 url("/fonts/fontawesome-webfont.woff") format("woff"),
 url("/fonts/fontawesome-webfont.ttf") format("truetype"),
 url("/fonts/fontawesome-webfont.svg") format("svg");
}
@font-face {
 font-family: 'eicons';
 font-display: swap;
 src: url("/fonts/eicons.eot");
 src: url("/fonts/eicons.eot"), 
 url("/fonts/eicons.woff2") format("woff2"), 
 url("/fonts/eicons.woff") format("woff"), 
 url("/fonts/eicons.ttf") format("truetype"), 
 url("/fonts/eicons.svg") format("svg");
 font-weight: normal;
 font-style: normal;
}
</style>
<link rel="preload" href="/fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="/fonts/eicons.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Готово, шрифты иконок успешно были подключены.

Как оптимизировать шрифты подключенные через Пользовательские шрифты в Elementor’е

Во первых переходим к нужному шрифту и изменяем путь к шрифту:

Во вторых, необходимо пересобрать все css стили и произвести обновление библиотеки:

Далее добавляем стили и link в header.php как указано коде ниже:


<style>
 /* SDStudio FONT */
 @font-face {
 font-family: 'FuturaBookC';
 font-display: auto;
 src: url('/fonts/FuturaBookC.eot');
 src: url('/fonts/FuturaBookC.eot'),
 url('/fonts/FuturaBookC.woff2') format('woff2'),
 url('/fonts/FuturaBookC.woff') format('woff'),
 url('/fonts/FuturaBookC.ttf') format('truetype'),
 url('/fonts/FuturaBookC.svg') format('svg');
 font-weight: normal;
 font-style: normal;
 }
</style>
<!–- FuturaBookC –->
<link rel="preload" href="/fonts/FuturaBookC.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Важные заметки при подключении и стилей

Дополнения в окончании ссылок

При переносе стилей, в ссылке на шрифт не должно быть дополнительных окончаний. например:


@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/open-sans-v15-greek_latin-ext_latin_vietnamese_cyrillic_cyrillic-ext_greek-ext-300.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'), local('OpenSans-Light'),
       url('/fonts/open-sans-v15-greek_latin-ext_latin_vietnamese_cyrillic_cyrillic-ext_greek-ext-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('/fonts/open-sans-v15-greek_latin-ext_latin_vietnamese_cyrillic_cyrillic-ext_greek-ext-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('/fonts/open-sans-v15-greek_latin-ext_latin_vietnamese_cyrillic_cyrillic-ext_greek-ext-300.woff') format('woff'), /* Modern Browsers */
       url('/fonts/open-sans-v15-greek_latin-ext_latin_vietnamese_cyrillic_cyrillic-ext_greek-ext-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('/fonts/open-sans-v15-greek_latin-ext_latin_vietnamese_cyrillic_cyrillic-ext_greek-ext-300.svg#OpenSans') format('svg'); /* Legacy iOS */
}

Обратите внимание на окончание ссылки в данной строке:


url('/fonts/open-sans-v15-greek_latin-ext_latin_vietnamese_cyrillic_cyrillic-ext_greek-ext-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

А именно на ?#iefix

Дак вот, данного окончания не должно быть, то есть четко только ссылка на файл шрифта и после формата (в данном примере .eot) не должно быть не каких добавлений.

Структура стилей

Итог моей работы показал что самый хорошо определяемый (сервисом PageSpeed Insights) формат стилей для шрифтов имеет такой вид:


@font-face {
  font-family: 'Open Sans';
  font-display: swap;
  font-style: normal;
  font-weight: 300;
  src: url('/fonts/шрифт.eot'); /* IE9 Compat Modes */
  src: local('Open Sans Light'),        и дальше ссылки на файлы шрифтов
}

Итоги

В данной статье мы рассмотрели каким образом можно переподключить шрифты сайта для ускоренного его отображения при загрузке страницы. Так же мы рассмотрели как можно работать с подключением, отключением и пере подключением как шрифтов так и стилей плагинов, для того чтобы достичь максимальное количество баллов производительности на сайте PageSpeed Insights. С Вами был Сергей Дудченко, спасибо за внимание.

Источник записи: