‹Link rel =« preload »в header.php, но google Pagespeedinsight по-прежнему показывает медленные запросы ключа предварительной загрузки для мобильных

Я изо всех сил пытаюсь исправить проблему скорости веб-сайта WordPress на мобильном телефоне. Скорость мобильной связи составляет 43, а скорость настольного компьютера - 93. Я вижу, что основная проблема связана с временем выполнения запросов Preload. Эта проблема возникает из-за шрифтов плагина Elementor, используемых в font awesome. Хотя я установил запросы ключа предварительной загрузки в файле header.php <link rel="preload" для используемых шрифтов, но я вижу, что это по-прежнему замедляет работу мобильных устройств, что проверено с помощью аналитики Google Pagespeed Insights. Также я вижу в консоли инструментов google dev, показывающую мне ошибку:

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

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

Я не нахожу способа исправить проблемы с мобильными шрифтами.

Может ли кто-нибудь предложить мне исправить все проблемы со скоростью шрифта как для мобильных, так и для настольных компьютеров?


css performance pagespeed-insights google-pagespeed elementor
person Tanvir    schedule 02.03.2020    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Для этого есть быстрое решение. Просто получите URL-адрес, который необходимо предварительно загрузить, из Google Page Speed ​​Insights.

Затем загрузите плагин: вставьте верхние и нижние колонтитулы.

В Скриптах в шапке - просто добавьте следующую строку:

<link rel="preload" href="https://url-to-font-location" as="font" type="font/woff2" crossorigin="anonymous">

Предполагая, что ресурс является шрифтом - если нет, отрегулируйте соответствующим образом. Это чище, чем обновление файлов темы php.

person matshidis    schedule 09.09.2020
comment
Это отлично сработало для меня, используя тот же URL-адрес, предоставленный lighthouse. Спасибо! - person user3615851; 22.10.2020

arrow_upward
0
arrow_downward

Ошибка предварительной загрузки

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

Это означает, что вы выполнили предварительную загрузку правильно, но предварительно загрузили то, что не было необходимо на странице.

Если вы видите одну и ту же ошибку на каждой странице вашего сайта, значит, вы загружаете ненужный шрифт.

Я не уверен, есть ли у elementor настройки в админке WordPress для удаления шрифтов, в противном случае вам придется копаться в коде и вручную отключать его.

Имейте в виду, что в этом случае могут возникнуть проблемы с elementor.

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

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

Может ли кто-нибудь предложить мне исправить все проблемы со скоростью шрифта как для мобильных, так и для настольных компьютеров?

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

person Graham Ritchie    schedule 02.03.2020
comment
Спасибо за ответ. но у меня есть один вопрос. Это означает, что вы выполнили предварительную загрузку правильно, но предварительно загрузили то, что не было необходимо на странице. Я предварительно загрузил шрифт, который показывает медленнее в Google Pagespeed Insights. но если это не нужно, почему это отображается в обзоре скорости страницы Google, но не нужно показывать в консоли? - person Tanvir; 02.03.2020
comment
Не видя отчета о вашем сайте, трудно сказать, но я предполагаю, что он нужен на мобильных устройствах, а не на компьютерах. Если вы хотите разместить здесь свой URL-адрес в комментарии, я поищу вас, так как на данный момент я должен сделать наилучшее предположение на основе предоставленной информации. - person Graham Ritchie; 03.03.2020
comment
Сообщение также может появиться, если вы покидаете crossorigin = anonymousor as = font или type = font / woff2, а предварительная загрузка не выполняется или отклоняется из-за политики CORS. В инструментах разработчика браузера в разделе «Сеть» вы увидите, что в этом случае шрифт загружается дважды. - person barefootliam; 23.11.2020