Я получил предупреждение о «предварительной загрузке ключевых запросов» из page Speed insights и не могу решить проблему

#javascript #wordpress #frontend #pagespeed #lighthouse

#javascript #wordpress #интерфейс #скорость страницы #маяк

Вопрос:

Я работаю над оптимизацией веб-страницы с помощью Google Page speed insights.

https://developers.google.com/speed/pagespeed/insights/?hl=enamp;url=https://thaniya-japan.com/

Мой веб-сайт https://thaniya-japan.com /


Google говорит «Предварительная загрузка ключевых запросов» даже после того, как я предварительно загрузил указанный файл шрифта .woff.

google говорит «Предварительная загрузка ключевых запросов»


Я уже добавил rel=»предварительная загрузка» в файл .woff, чтобы исправить это, как показано ниже.

 <link rel="preload" as="font" type="font/woff" crossorigin="anonymous" id="preload_dpicons_woff-css" href="https://thaniya-japan.com/wp-content/themes/dp-fresco/css/fonts/dpicons.woff" media="all">
 

файлы .woff изначально были загружены в некоторые файлы .css, как показано ниже

 @font-face{
font-family:"dpicons";
src:url('fonts/dpicons.woff') format('woff'),url('fonts/dpicons.ttf') format('truetype')
}
 

На самом деле я также прокомментировал часть @font-face в этих файлах .css, чтобы исключить предупреждение о предварительной загрузке из page speed insights.

Но page speed insights по-прежнему говорит «Предварительная загрузка ключевых запросов».


Кто-нибудь знает, что происходит и как я могу устранить предупреждение о «предварительной загрузке ключевых запросов» из page speed insights?


Кстати, ниже приведен способ, которым я добавил файл .woff, чтобы сделать его предварительно загруженным.

 function custom_enqueue_scripts_early() {
    wp_enqueue_style('preload_dpicons_woff', get_template_directory_uri() . '/css/fonts/dpicons.woff', array("dashicons"), null);
    wp_enqueue_style('preload_dpicons_ttf', get_template_directory_uri() . '/css/fonts/dpicons.ttf', array("dashicons"), null);
}

add_action( 'wp_enqueue_scripts', 'custom_enqueue_scripts_early' ,5);


add_filter('style_loader_tag', 'my_style_loader_tag_filter', 10, 2);

function my_style_loader_tag_filter($html, $handle) {

    $font = "";
    if($handle === 'preload_dpicons_woff'){
        $font = " type='font/woff' ";
    }elseif($handle === 'preload_dpicons_ttf'){
        $font = " type='font/ttf' ";
    }

    $replaced = "rel='preload' as='font' ".$font." crossorigin='anonymous'";

    if(strpos($handle,'preload_dpicons') !== false){
        return str_replace("rel='stylesheet'",$replaced , $html);
    }
  
  return $html;

}
 

Комментарии:

1. Это очень широкая тема… Google insights также не очень хороший инструмент для диагностики производительности. Если вы хотите получить что-то более точное, попробуйте: gtmetrix.com

2. Но Google использует свои собственные алгоритмы для ранжирования результатов поиска. Я пытаюсь выяснить, как «предварительно загружать» шрифты, вызываемые с помощью font-face, как предложено Google. Достаточно ли добавить ссылку предварительной загрузки в <head>? Нужно ли редактировать css @fontface? Если оно закомментировано, как css может узнать, что такое имя семейства шрифтов, и использовать его в другом месте в таблице стилей?