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

Использование веб-шрифтов, CSS и JavaScript может сделать ваш сайт более уникальным и интерактивным. Но ожидание загрузки этих типов файлов может разочаровать посетителей вашего сайта.

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

В сегодняшнем руководстве мы обсудим, что означает предварительная загрузка ключевых запросов, а также потенциальные преимущества производительности для вашего веб-сайта. Затем мы объясним, как это сделать на вашем сайте WordPress с помощью Google Fonts, Font Awesome, CSS и JavaScript.

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

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

Затем браузер начнет загружать контент (PHP, JavaScript и CSS) из файлов вашего сайта и отображать его для отображения видимых страниц (HTML) на внешнем интерфейсе. После завершения этого процесса посетитель может увидеть вашу полностью загруженную веб-страницу.

Браузер будет использовать «цепочку запросов», чтобы запрашивать и отображать контент в последовательности. Это означает, что в более крупных запросах есть несколько шагов меньшего размера, в результате чего посетитель может просматривать контент на вашем сайте.

По сути, «предварительная загрузка» означает указание браузеру пользователя сначала загрузить необходимые файлы, а не ждать окончания процесса загрузки. Обычно это шрифты (особенно веб-шрифты), CSS, JavaScript и иногда изображения.

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

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

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

Кроме того, предварительная загрузка запросов необходима для оценки Core Web Vitals. Эти показатели Google измеряют производительность загрузки, интерактивность и визуальную стабильность вашего сайта, давая вам оценку, которая означает общее удобство вашего сайта для пользователей.

Вот три основных веб-витала:

• Самая большая отрисовка содержимого (LCP): сколько времени требуется для загрузки самого большого элемента на вашей странице.
• Задержка первого ввода (FID): сколько времени требуется браузеру, чтобы отреагировать на взаимодействие пользователя с вашим контентом.
• Кумулятивное смещение макета (CLS) : насколько элементы перемещаются во время загрузки страницы.

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

Кроме того, предварительная загрузка может повлиять на ваш показатель First Contentful Paint (FCP). Этот показатель измеряет, сколько времени требуется для отображения первого HTML-элемента на вашей странице. Если вы можете предварительно загрузить этот элемент, браузер сможет быстрее отображать начальные части вашего контента.

Более того, поисковые системы, такие как Google, предпочитают быстро загружаемый и интерактивный контент. Таким образом, помимо улучшения взаимодействия с пользователем, улучшение этих показателей производительности может повысить поисковую оптимизацию вашего веб-сайта (SEO).

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

Есть ли недостатки у предварительной загрузки ключевых запросов?

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

Браузер может обрабатывать только определенное количество запросов одновременно. Таким образом, если вы скажете ему предварительно загружать несколько элементов, это может создать «узкое место», которое работает против времени загрузки страницы вашего сайта.

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

Как проверить, загружает ли ваш сайт ключевые запросы

Несколько разных инструментов могут определить, выполняет ли ваш сайт предварительную загрузку запросов, и предложить элементы, которые могут извлечь выгоду из этого метода оптимизации. Например, PageSpeed ​​Insights — один из самых популярных способов выявления проблем с производительностью вашего веб-сайта.

Чтобы использовать этот бесплатный инструмент, просто введите URL-адрес своего сайта и нажмите «Анализ» . Это создаст подробный отчет о производительности.

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

Если вы предпочитаете не перемещаться между своим сайтом и PageSpeed ​​Insights, рассмотрите возможность установки расширения Google Lighthouse для Chrome. Он позволяет создавать отчеты в браузере и просматривать показатели производительности страницы.

Точно так же GTMetrix может генерировать подробные отчеты о производительности для любого сайта. Он позволяет анализировать страницы из разных мест и отслеживать их эффективность с течением времени.

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

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

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

Вот где пригодится Jetpack VaultPress Backup. Этот удобный плагин автоматически создает полные резервные копии всех ваших данных, включая файлы, таблицы базы данных и информацию о продуктах WooCommerce. Эти резервные копии сохраняются в режиме реального времени и надежно хранятся в облаке. Вы можете восстановить их всего за несколько кликов — даже если вы находитесь в пути или вообще не можете получить доступ к своему сайту.

1. Шрифты

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

Чтобы предварительно загрузить запросы со шрифтами в WordPress, скопируйте и вставьте этот код в раздел <head> вашей страницы:

 <head> <!-- ... --> <link rel="preload" href="/assets/Font-Name.woff2" as="font" type="font/woff2" crossorigin> </head>

Не забудьте заменить «Имя шрифта» на имя вашего шрифта. Кроме того, включение «перекрестного происхождения» важно, если ваш шрифт получен из стороннего источника, потому что он сообщает браузеру, что ему необходимо загрузить файл с внешнего сервера.

2. Шрифты Google

Google Fonts включает в себя библиотеку с открытым исходным кодом, содержащую около 1500 семейств шрифтов. Если вы ищете пользовательские веб-шрифты для использования на своем сайте, вы, скорее всего, найдете их там.

Использование Google Fonts может помочь придать вашему сайту уникальный дизайн, но браузер также должен загружать файлы шрифтов при отображении контента. В зависимости от вашего шрифта это может увеличить время загрузки страницы.

При предварительной загрузке Google Fonts рекомендуется сначала «подключить» их. Этот шаг заранее сообщает браузеру, что для получения ресурса ему потребуется подключиться к стороннему сайту (например, Google Fonts).

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

Просто добавьте следующий код в раздел <head> вашей страницы:

 <link rel=”preconnect” href=”https://fonts.gstatic.com” crossorigin /> <link rel=”preload” as=”style” href=”$fontURL&display=swap” /> <link rel=”stylesheet” href=”$fontURL&display=swap” media=”print” onload=”this.media='all'” /> <noscript> <link rel=”stylesheet” href=”$fontURL&display=swap” /> </noscript>

В вашем коде вам нужно будет заменить «$fontURL» на ссылку на ваш шрифт Google. Например, это может выглядеть так:

https://fonts.googleapis.com/css2?family=Tangerine:ital,wght@0,400;0,700;1,400;1,700

Затем просто не забудьте сохранить изменения!

3. Потрясающий шрифт

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

Как и Google Fonts, предварительная загрузка значков Font Awesome может быть хорошей идеей для ускорения воспринимаемого времени загрузки страницы. Просто добавьте этот код в раздел <head> страницы:

 <link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="preload" as="font" type="font/woff2" crossorigin href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0"/>

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

4. CSS

Каскадные таблицы стилей (CSS) — это язык дизайна, который работает вместе с HTML для определения стиля и представления веб-страницы. С помощью пользовательского CSS вы можете быстро изменить внешний вид различных элементов.

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

К счастью, есть простой способ предварительно загрузить CSS. Просто добавьте этот код в раздел <head> вашей страницы:

 <head>  <link rel="preload" href="styles.css" as="style" /> </head>

Не забудьте заменить «styles.css» на имя таблицы стилей. Кроме того, имейте в виду, что хотя этот код будет работать в Google Chrome, он поддерживается не всеми браузерами.

5. JavaScript

JavaScript — еще один из распространенных языков сценариев, используемых в WordPress. Он позволяет создавать динамический контент, такой как анимация, движущиеся карусели изображений и автоматически обновляемые каналы.

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

Как и в случае с CSS, вам просто нужно добавить эту простую строку кода в раздел <head> страницы:

 <head>  <link rel="preload" href="ui.js" as="script" /> </head>

Как и раньше, замените «ui.js» на имя файла JavaScript и сохраните изменения.

Бонус: установите бесплатный плагин для улучшения Core Web Vitals.

Предварительная загрузка запросов — это всего лишь один из методов, который вы можете использовать для улучшения показателей Core Web Vitals вашего сайта WordPress.

Если вы ищете более комплексное (и бесплатное!) решение, рассмотрите возможность установки Jetpack Boost. Этот инструмент разработан Automattic, той же компанией, что и WordPress.com.

Этот удобный плагин сканирует весь ваш веб-сайт и дает вам оценку на настольных и мобильных устройствах. Кроме того, Jetpack Boost полезен не только для трех основных веб-жизненных показателей. Его методы оптимизации могут улучшить другие показатели, включая время до взаимодействия (TTI) и общее время блокировки (TBT).

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

Кроме того, Jetpack Complete может вывести ваш сайт WordPress на совершенно новый уровень. Этот план содержит несколько инструментов для повышения производительности, в том числе доступ к сети доставки содержимого изображений (CDN) Jetpack, которая может сэкономить полосу пропускания и сократить время загрузки вашей страницы. Кроме того, вы получите расширенные инструменты безопасности и расширения WordPress.

Часто задаваемые вопросы о предварительной загрузке ключевых запросов

На этом этапе у вас должно быть хорошее представление о том, как предварительно загружать ключевые запросы в WordPress. Тем не менее, мы рассмотрим некоторые часто задаваемые вопросы, чтобы быть уверенными!

Улучшает ли предварительная загрузка запросов пользовательский опыт?

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

Улучшает ли предварительная загрузка запросов Core Web Vitals?

Предварительная загрузка ключевых запросов в WordPress может улучшить ваши показатели Core Web Vitals, особенно когда речь идет о самой крупной отрисовке контента (LCP). На самом деле, когда вы решаете, какие элементы предварительно загрузить, было бы разумно включить ваш «самый большой» или «основной» контент, так как это, вероятно, принесет наибольшую пользу от него.

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

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

Предварительная загрузка, предварительное подключение или предварительная выборка

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

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

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

Наконец, предварительное подключение используется, когда вы хотите указать браузеру подключиться к определенному домену. Если ваш сайт использует ресурс с определенного стороннего сайта (например, Google Fonts), предварительное подключение сообщает браузеру, что ему потребуется подключиться к этому домену в какой-то момент в процессе загрузки.

Что еще я могу сделать, чтобы улучшить производительность моего сайта?

Различные задачи могут помочь улучшить производительность вашего сайта WordPress, в том числе:

• Использование CDN для доставки вашего контента посетителям по всему миру
• Откладывание (или удаление) неиспользуемого CSS
• Устранение ресурсов, блокирующих рендеринг
• Минимизация CSS и других ресурсов
• Делать меньше HTTP-запросов

Также стоит выбрать высококачественный хост WordPress, который предоставит вам функции оптимизации производительности, такие как выделенное кэширование, гарантию безотказной работы и обширную сеть центров обработки данных по всему миру.

Улучшите производительность вашего сайта WordPress, предварительно загрузив ключевые запросы

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

Когда вы предварительно загружаете ключевые запросы на свои страницы, браузер посетителя будет иметь готовые ресурсы (такие как шрифты, CSS и JavaScript). Тогда не будет задержки при загрузке вашего контента и его доступности для пользователей.

Предварительная загрузка ключевых запросов — это всего лишь один шаг к повышению производительности вашего сайта. Используя Jetpack Boost, вы можете легко настроить свой веб-сайт для отложенной загрузки изображений, отложить несущественный JavaScript и многое другое. Более того, плагин можно использовать бесплатно. Попробуйте Jetpack Boost уже сегодня!