TechBlogSD - Все для WordPress и WEB разработки
WEB и WordPress инструкции, новости, обзоры тем и плагинов

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

4

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

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

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

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

<link rel="preload" href="font.woff" as="style">

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

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

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

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

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

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

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

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

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

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

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

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

Использование WP Rocket для исправления запроса ключа предварительной загрузки в Google PSI

Сначала мы расскажем о плагине WP Rocket, поскольку это просто, и вам не нужно изменять файлы PHP.

Включите предварительную загрузку шрифтов с WP Rocket

WP Rocket – это плагин кеширования премиум-класса, который позволяет вам включать предварительную загрузку шрифтов. Если вы используете WP Rocket, перейдите в раздел «Настройки> WP Rocket> Предварительная загрузка». Вставьте относительные URL-адреса ресурсов шрифтов в текстовое поле «Предварительная загрузка шрифтов» и сохраните изменения. Это поможет вам избавиться от проблемы с запросами предварительной загрузки. в инструменте Google PageSpeed ​​Insights. Помните, что относительный URL-адрес должен иметь формат «/ wp-content / themes / your-theme-name / font-file-name» для шрифтов темы и «/ wp-content / plugins / plugin-name» / font-file-name »для шрифтов, загружаемых плагинами.

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

Предварительная загрузка шрифтов в плагине WP Rocket

WP Rocket оптимизирует многие другие функции, такие как критическое создание CSS, предварительная выборка DNS и локальное размещение сторонних скриптов, таких как Google Analytics. Следовательно, рекомендуется использовать плагины, такие как WP Rocket, для повышения общей скорости вашего сайта WordPress. Последний плагин WP Rocket будет автоматически игнорировать предварительную загрузку шрифтов, если вы включили опцию «Оптимизировать доставку CSS» на вкладке «Оптимизация файлов». Поэтому обязательно отключите оптимизацию CSS, если хотите использовать предварительную загрузку шрифтов.

Добавление мета-тегов предварительной загрузки вручную

Выполните следующие шаги, чтобы вручную вставить метатеги в файл header.php вашей темы. Мы рекомендуем использовать дочернюю тему, чтобы изменения остались неизменными при обновлении родительской темы.

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

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

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

<link rel="preload" href="Font URL Showing in PageSpeed" as="font" crossorigin="anonymous">

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

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

  • Войдите в свою учетную запись хостинга с помощью FTP- клиента, такого как FileZilla, или найдите приложение File Manager в своей учетной записи хостинга.
  • Перейдите в папку «/ wp-content / themes / yourtheme» и найдите файл header.php.

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

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

  • Отредактируйте файл и вставьте код предварительной загрузки в раздел заголовка.
  • Это будет выглядеть примерно так, как показано ниже, и не забудьте вставить все запросы, которые вы видите в инструменте Google PageSpeed ​​Insights.

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

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

Кроме того, вы также можете перейти в «Внешний вид> Редактор тем» на панели администратора и отредактировать файл. Мы рекомендуем использовать дочернюю тему и модифицировать файл header.php. Если вы изменяете файл родительской темы, вам нужно вставлять этот код вручную каждый раз при обновлении темы.

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

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

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

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

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

Заключение

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

Источник записи: webnots.com
Leave A Reply

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