Как исправить предварительную загрузку ключевых запросов со шрифтами в WordPress?

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

Предварительная загрузка – это одна из таких функций кеширования, которая помогает улучшить скорость загрузки страниц сайта WordPress. Однако это может вызвать ошибку в отчетах Google Lighthouse, которые используются в инструменте Google PageSpeed ​​Insights. В этой статье мы объясним, как исправить проблему с запросами ключей предварительной загрузки в PageSpeed ​​Insights из-за шрифтов.

Как использовать предварительную загрузку?

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

По сути, предварительная загрузка – это значение свойства rel в теге ссылки HTML.

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

Проблема Google PageSpeed ​​с предварительной загрузкой

Хотя предварительный натяг ускоряет время загрузки, его следует использовать правильно. Проверьте свой сайт с помощью инструмента PageSpeed ​​Insights, чтобы узнать, доступны ли какие-либо возможности из-за запроса предварительной загрузки. Ниже приведен пример случая, который показывает, что вы можете сэкономить 7,05 секунды за счет запросов предварительной загрузки ключа.

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

Ошибка предварительной загрузки ключевых запросов в PageSpeed ​​Insights

Ошибка предварительной загрузки ключевых запросов в PageSpeed ​​Insights

Плагины WordPress и предварительная загрузка

Теперь вы можете запутаться, как предварительная загрузка отображается в отчете Google PageSpeed ​​для вашего сайта WordPress. Есть много причин, по которым вы получите эту ошибку:

  • Темы и плагин загружают шрифты путем импорта в CSS.
  • Вы используете плагин кеширования, такой как WP Rocket, для предварительной загрузки страниц.
  • Вы используете рекламу, такую ​​как Google AdSense, на своей странице с помощью плагина.

Плагины кеширования добавляют ключи запроса предварительной загрузки ко всем ресурсам. Однако шрифты, импортированные в CSS с использованием @ font-face, не будут использовать запросы ключа предварительной загрузки. Это ошибка PageSpeed ​​показывает, что ключ предварительной загрузки не используется шрифтами, загруженными с сайта.

Как исправить предварительную загрузку ключевых запросов со шрифтами?

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

Подготовка мета-тегов ссылок

Первый шаг – получить все URL-адреса ресурсов, отображаемых в Google PageSpeed. Обычно вы видите конечную часть URL-адресов, наведите указатель мыши на ссылки, чтобы просмотреть полный URL-адрес блокирующего ресурса. Теперь вы можете скопировать URL-адрес и вставить его в текстовом редакторе.

<iframe id=”id2795″ tabindex=”-1″ src=”https://yastatic.net/safeframe-bundles/0.80/1-1-0/render.html” frameborder=”no” marginwidth=”0″ marginheight=”0″ scrolling=”no” data-mce-fragment=”1″>

Вам необходимо использовать URL-адреса в следующем формате, чтобы включить их в тег ссылки:

<link rel="preload" href="https://www.webnots.com/how-to-fix-preload-key-requests-with-fonts-in-wordpress/Font URL Showing in PageSpeed" as="font" crossorigin="anonymous">

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

Вставка тегов ссылок в заголовок

Следующим шагом является копирование всех ваших тегов ссылок с запросами предварительной загрузки и вставка в раздел заголовка сайта. На вашем сайте WordPress вам необходимо вставить теги ссылок в файл header.php.

  • Вы можете использовать любой плагин, который позволяет вставлять содержимое заголовка и вставлять код с помощью плагина.
  • Кроме того, вы можете использовать FTP или диспетчер файлов и найти файл header.php, чтобы вставить код. Однако вам необходимо обновлять этот код вручную каждый раз при обновлении темы.

Редактировать файл заголовка

Редактировать файл заголовка

Проверьте PageSpeed ​​еще раз

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

Нет проблем с предварительной загрузкой

Нет проблем с предварительной загрузкой

Обновление WP Rocket для включения предварительной загрузки шрифтов

WP Rocket недавно обновил плагин, включив в него предварительную загрузку шрифтов. Если вы используете WP Rocket, перейдите в раздел «Настройки> WP Rocket> Предварительная загрузка».

Вставьте относительные URL-адреса ресурсов шрифтов в текстовое поле «Предварительная загрузка шрифтов» и сохраните изменения. Это поможет вам избавиться от проблемы с запросами предварительной загрузки в инструменте Google PageSpeed ​​Insights.

Вывод

Хотя ошибка предварительной загрузки будет показывать задержку загрузки в несколько секунд, удаление ошибки не окажет большого влияния. Однако вы можете выполнить описанные выше действия, чтобы удалить ошибку из Google PageSpeed.

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован.