#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 может узнать, что такое имя семейства шрифтов, и использовать его в другом месте в таблице стилей?