9 советов, как делать меньше HTTP-запросов в WordPress

Следующая статья поможет вам: 9 советов, как делать меньше HTTP-запросов в WordPress

Вы заметили, что ваш сайт тормозит, и решили выяснить почему с помощью инструмента для тестирования скорости, например, Pingdom. Частью диагноза является «делать меньше HTTP-запросов», и он считается критическим. Как вы делаете меньше HTTP-запросов и повышаете скорость своего сайта?

В этой статье будут рассмотрены наиболее важные вопросы, связанные с сокращением количества HTTP-запросов на вашем сайте WordPress: почему появляется диагноз? Как это влияет на пользовательский опыт вашего сайта (UX) и SEO? Как определить возможности оптимизации HTTP-запросов? И главное, как вы можете решить проблему «делать меньше HTTP-запросов» в WordPress?

Что такое диагностика «Совершайте меньше HTTP-запросов»?

Чтобы распаковать этот диагноз, давайте начнем с изучения HTTP-запросов.

HTTP, аббревиатура от HyperText Transfer Protocol, — это интернет-протокол, который веб-браузеры используют для связи с веб-серверами. HTTP-запросы — это стандартные сетевые запросы к серверу для получения любых необходимых ресурсов. На веб-сайте эти ресурсы включают HTML-документы, таблицы стилей CSS, файлы JavaScript, шрифты и т. д.

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

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

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

Учитывая все обстоятельства, как слишком много HTTP-запросов влияют на SEO и пользовательский опыт веб-сайта?

Как слишком много HTTP-запросов влияет на UX и SEO?

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

Меньшее количество HTTP-запросов особенно важно, поскольку большинство HTTP-запросов по умолчанию блокируют рендеринг, за исключением асинхронных/отложенных файлов и изображений JavaScript. Страница ожидает завершения всех HTTP-запросов, прежде чем рисовать DOM, что негативно влияет на оценку Core Web Vitals веб-сайта. Хотя с расширенными возможностями браузера большинство этих запросов выполняются параллельно, тем не менее, задержка увеличивает Время интерактива (TTI) любого веб-сайта.

Однако влияние слишком большого количества HTTP-запросов на пользовательский опыт и SEO не исключают друг друга. Фактически, в 2018 году Pingdom сообщил, что показатель отказов веб-сайта может варьироваться от 9% к 38% если время загрузки страницы увеличивается с 2 секунды к 5 секунд. Хотя высокий показатель отказов напрямую не влияет на рейтинг веб-сайта в поиске Google, он свидетельствует о том, что фактор ранжирования не оптимизирован. Примером может служить время загрузки страницы (которое является фактором ранжирования).

Источник изображения

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

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

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

Как определить возможности оптимизации HTTP-запросов

Как вы определяете свой шанс сделать меньше HTTP-запросов в WordPress? Это немного сложно, потому что HTTP-запросы необходимы. В связи с этим важно отметить, что размер того, что передается, а не только количество HTTP-запросов, влияет на время загрузки страницы. Проще говоря, чем больше файлов, тем больше HTTP-запросов, а файлы большего размера представляют собой более длинные HTTP-запросы. Вот почему объединение всего вашего JavaScript в один файл не является серебряной пулей для решения проблемы времени загрузки вашей страницы. Однако, в какой-то степени это полезно, потому что мы экономим на установлении соединений, разрешении DNS и некоторых других этапах.

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

Есть несколько вопросов, которые могут оказаться полезными при определении возможностей оптимизации HTTP-запросов. Однако важно повторно установить, что HTTP-запросы используются для извлечения ресурсов. Количество и размер этих ресурсов ставят диагноз «делать меньше HTTP-запросов». Это означает, что оптимизация HTTP-запросов на веб-сайте косвенно связана с другими факторами скорости веб-сайта, которые вы, вероятно, знаете. Учитывая эти моменты, честный ответ на приведенные ниже вопросы может определить потенциальные перспективы оптимизации для минимизации количества или времени, затрачиваемого на HTTP-запросы на вашем веб-сайте.

• Нужны ли мне все ресурсы, полученные при загрузке страницы? (Оптимизация по количеству)
• Могу ли я объединить несколько стилей или скриптов в один? (Оптимизация по количеству)
• Нужен ли мне весь JavaScript при начальной загрузке страницы или я могу отложить некоторые? (Оптимизация затраченного времени)
• Нужны ли мне все изображения на начальной загрузке страницы или я могу их лениво загружать? (Оптимизация по количеству и времени)
• Сколько плагинов я использую и сколько я включил?
• Добавляют ли плагины, которые не нужны для текущей страницы, дополнительные HTTP-запросы?
• Могу ли я найти облегченные альтернативы некоторым из моих основных плагинов?

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

Как исправить проблему «Делать меньше HTTP-запросов» в WordPress

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

Как вы можете оптимизировать свой веб-сайт, чтобы делать меньше HTTP-запросов? Давайте рассмотрим первое и очевидное решение.

Исправить вручную

Если вы хотите делать меньше HTTP-запросов без какого-либо плагина, такого как W3 Total Cache, приведенные ниже советы избавят вас от необходимости настраивать плагин для оптимизации.

Удалить неиспользуемые плагины

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

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

Замените тяжелые плагины легкими альтернативами

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

Источник изображения

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

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

Обрезайте и оптимизируйте изображения

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

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

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

Для изображений на веб-страницах рекомендуется сжимать их с помощью таких инструментов, как TinyPNG, перед загрузкой в ​​WordPress. Это гарантирует, что HTTP-запрос на получение изображения будет быстрее. Другой вариант — конвертировать изображения в WebP.

10Web Booster использует эффективные методы оптимизации изображений, включая преобразование WebP, сжатие и изменение размера изображения для каждого контейнера для всех изображений.

Ленивая загрузка мультимедийного контента

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

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

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

Тем не менее, существуют разные способы реализации ленивой загрузки. WordPress (версия 5.5+) использует встроенную ленивую загрузку изображений с использованием атрибута загрузки HTML.. На самом деле этого обычно недостаточно. Благодаря 10Web вы можете перенести все свои потребности в ленивой загрузке на 10Web Booster.

10Web Booster использует встроенную в браузер технику, отложенную загрузку с помощью vanilla JS и плагин JQuery, включая отложенную загрузку фоновых изображений. Он разумно выбирает, какую технику реализовать, в зависимости от содержимого и обеспечивает бесшовную визуализацию пользовательского интерфейса и конфликты с темами и плагинами.

Хотите мгновенно ускорить свой сайт?

Получите 90+ баллов PageSpeed ​​автоматически с помощью 10Web Booster ⚡
На любом хостинге!

Получите 10Web Booster, это бесплатно
Кредитная карта не требуется

Объедините файлы CSS и JS

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

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

По этой причине существуют плагины для оптимизации WordPress, которые минимизируют и объединяют файлы CSS и JS как часть множества других функций. Например, WP Rocket. Тем не менее, мы рекомендуем плагин 10Web Booster. Узнайте, почему мы рекомендуем 10Web Booster здесь.

Комбинируйте изображения со спрайтами CSS

Есть хорошие новости и не очень хорошие новости для объединения изображений со спрайтами CSS.

Хорошая новость заключается в том, что количество HTTP-запросов к изображениям, используемым на веб-странице, значительно уменьшилось. Спрайты CSS позволяют объединять изображения в одно и получать к ним доступ на веб-странице с помощью CSS. Технически для получения комбинированных изображений потребуется только один HTTP-запрос.

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

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

Загружать скрипты и стили условно

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

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

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

Отложите или задержите JS-скрипты, блокирующие рендеринг

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

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

Чтобы сделать это эффективно:

1. Определите скрипты, блокирующие рендеринг, и измерьте их влияние на производительность. Вы можете сделать это с помощью Pagespeed Insights.
2. Расставьте приоритеты для наиболее важных сценариев и отложите/отложите менее важные сценарии.

Отделение критических JS-скриптов от некритических JS-скриптов предотвращает блокировку основного потока браузера некритическим выполнением JS.

Сторонние скрипты JavaScript могут быть легко обработаны с помощью 10Веб-бустер. Предполагая, что файлы JavaScript по умолчанию являются ресурсами, блокирующими отображение, он удаляет все ресурсы JavaScript со страницы (за некоторыми исключениями), использует API веб-воркеров для загрузки ресурсов JavaScript в фоновом режиме, а затем интегрирует их в страницу. Проще говоря, он откладывает загрузку JavaScript до тех пор, пока это не потребуется, что значительно сокращает время загрузки.

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

Загружая стили, необходимые для отображения содержимого верхней части страницы, в тег