Как уменьшить количество запросов HTTP / S в WordPress

Вот история, которая вам понравится, если вы хотите ускорить работу своего сайта WordPress.

На днях я создал прекрасный сайт. Я выложился на полную и добавил WooCommerce, Google Tag Manager, OneSignal, службу поддержки, Yoast, прямое радио (да, да, я сделал), Cookie Notice, социальные сети и множество других плагинов.

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

К своему ужасу, я увидел это:

Я был впечатлен? Ад на NAW! Я хотел получить отличную оценку и сократить время загрузки страницы до двух секунд.

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

Вы знаете, что я сделал дальше? Я тестировал сайт на Pingdom, потому что GTMetrix его отстой. Но вот еще раз печальные результаты:

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

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

Но отличный визуальный дизайн и низкие скорости не идут рука об руку. Мне нужно было решение и быстро.

Как я могу уменьшить количество HTTP-запросов на моем сайте WordPress?

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

Если ваш сайт WordPress требует загрузки большого количества элементов, у вас будет больше HTTP-запросов и наоборот. Больше HTTP-запросов означает медленный веб-сайт, плохой пользовательский опыт (UX), плохие результаты SEO и низкие коэффициенты конверсии.

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

И в сегодняшнем посте вы узнаете, как именно!

Отчеты от GTMetrix и Pingdom обычно показывают, в чем проблема. Таким образом, протестируйте свой сайт, используя оба инструмента, чтобы определить области, которые необходимо улучшить. Когда ваши отчеты готовы, вот как уменьшить количество HTTP / S-запросов и ускорить работу вашего сайта WordPress.

Шаг 1. Разберите мусор

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

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

Если у вас много плагинов, у вас наверняка будет больше HTTP-запросов. Чем меньше плагинов, тем меньше запросов. Все просто.

Что делать?

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

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

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

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

Было бы здорово, согласны? И чтобы подумать, вам нужен только плагин Asset CleanUp WordPress.

Информация и СкачатьПосмотреть демо

Плагин прост в использовании и достаточно эффективен. Или как выразился разработчик:

«Asset CleanUp» сканирует вашу страницу и обнаруживает все загруженные активы. Все, что вам нужно сделать при редактировании страницы / публикации, – это просто выбрать CSS / JS, которые не нужно загружать, таким образом уменьшая раздувание.

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

Вернемся к сокращению HTTP-запросов.

Шаг 2. Оптимизация изображений

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

Тем не менее, мы не можем игнорировать тот факт, что большинство тем WordPress (сайты чтения) полагаются на изображения, и многие изображения в этом отношении. Итак, в свете этого, как можно уменьшить количество HTTP-запросов за счет оптимизации изображений?

Для начала избавьтесь от всех изображений, которые вы не используете. Будьте безжалостны; избавьтесь от всего этого вздора – оно вам не нужно. После этого сожмите и оптимизируйте изображения, чтобы удалить ненужные данные файла.

Информация и СкачатьПосмотреть демо

Хотя есть несколько плагинов на выбор, нам действительно нравится WP Compress. Несмотря на то, что это услуга премиум-класса, мощная автоматическая оптимизация изображений, сжатие без потерь, облачная обработка для снижения нагрузки на сервер, поддержка изображений WebP, автоматическое изменение размера и многое другое делают вложения того, что окупаются (ознакомьтесь с нашим обзором, чтобы узнать больше). Кроме того, вы можете получить 100 изображений бесплатно – так что вы можете хотя бы попробовать.

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

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

Затем, используя приемы CSS, вы можете выбрать, какую часть изображения показывать. Но как это уменьшить количество HTTP-запросов? Вот аналогия.

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

Вы понимаете, к чему я клоню? Чем меньше поездок, тем меньше HTTP-запросов. Самое приятное, что вам не нужно беспокоиться о создании и реализации спрайтов изображений CSS. Вы можете использовать такой инструмент, как CSS Sprite Generator. Реализовать спрайты изображений CSS несложно, если вы разбираетесь в CSS.

Совет: вы можете забыть о спрайтах изображений CSS, если ваш сайт использует HTTP / 2, который поддерживает асинхронную загрузку изображений и скриптов. GTMetrix не принимает во внимание HTTP / 2 при оценке производительности, поэтому не беспокойтесь, если кажется, что ваши изображения создают массу HTTP-запросов.

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

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

Шаг 3. Объедините и минимизируйте HTML, CSS и JavaScript

Основной причиной многих HTTP-запросов на моем веб-сайте WordPress были внешние файлы CSS и JavaScript. Да, я имел дело с 43 сценариями JS и 22 файлами CSS. Это колоссальные 66 HTTP-запросов.

Примерно из 130 HTTP-запросов внешние запросы CSS и JavaScript составляли около 51% проблемы! Это просто смешно. Спасибо, GTMetrix, ударь меня кулаком.

Если я объединю и минимизирую эти 44 JS и 22 файла CSS, я могу значительно уменьшить свои HTTP-запросы, размер веб-сайта и время, необходимое для загрузки. Но что это за «объединение» и «уменьшение» бизнеса?

По словам Рэлин Мори из Words by Birds (я большой поклонник ?), минификация – это процесс «… удаления любых ненужных символов, таких как комментарии, форматирование, пробелы и новые строки из файлов HTML, CSS и JavaScript, которые не являются» t необходимо для выполнения кода ».

Минификация уменьшает размер файла, удаляя все остальные символы, оставляя только код. Но если у вас 66+ внешних скриптов, минификация не сильно поможет минимизировать HTTP-запросы. Для этого вам нужно объединить файлы CSS и JavaScript.

И снова Рэлен говорит:

Между тем, объединение файлов происходит так, как кажется. Например, если ваша веб-страница загружает 5 внешних файлов CSS и 5 внешних файлов JavaScript, объединение ваших CSS и JavaScript в один отдельный файл приведет к выполнению всего 2 запросов вместо 10.

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

Есть плагины? Да, конечно!

Информация и СкачатьПосмотреть демо

Существует множество плагинов WordPress для объединения и минимизации файлов. Хорошим примером является плагин WP Rocket. По сути, это один из лучших плагинов для кеширования, предлагающий функции для объединения и минимизации файлов за несколько кликов.

Другой популярный (и бесплатный) вариант – плагин Autoptimize.

Кстати, а при этом уменьшить количество внешних файлов CSS и JS скриптов? Например, и мы не упоминаем здесь имена, вам действительно нужна сторонняя платформа для комментариев? Вам нужен плагин для прямого эфира?

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

Шаг 4. Настройте файлы CSS и JavaScript, блокирующие отрисовку

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

Если по какой-то причине у вас не происходит асинхронная загрузка (возможно, вы не используете HTTP / 2 или скрипты не асинхронны), эти файлы могут значительно замедлить работу вашего сайта.

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

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

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

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

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

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

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

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

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

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

Есть ли бесплатные варианты? Конечно! Мы работаем с WordPress, помнишь? Вы можете использовать Async JavaScript среди других плагинов.

Шаг 5. Используйте кеширование и CDN

Знаете ли вы, что кеширование и CDN могут уменьшить количество HTTP-запросов? Сначала это не кажется фактом, но если учесть, что происходит за кулисами, вы можете использовать кеширование и CDN в своих интересах.

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

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

CDN (или С ontent D elivery N etwork) представляет собой сеть серверов, расположенных по всему миру. CDN также использует кеширование, но для еще большей скорости провайдер CDN обслуживает ваш кэшированный контент с сервера, ближайшего к посетителю.

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

Информация и СкачатьПосмотреть демо

И, что лучше всего, есть несколько бесплатных вариантов CDN (или, по крайней мере, бесплатных пробных версий, чтобы вы могли буквально увидеть разницу). В WPExplorer мы используем и настоятельно рекомендуем CLoudflare, но выбирайте тот CDN, который, по вашему мнению, лучше всего подходит для вас.

Бонус: убедитесь, что HTTP / 2 поддерживается

Возможно, вы делаете все, чтобы уменьшить количество HTTP-запросов, но ваш веб-хост может быть причиной ваших бед. Не удивляйтесь; спрашивая и думая, кто – в это время и в возрасте – использует что-нибудь, кроме HTTP / 2?

Вы, вероятно, даже не знаете, что такое HTTP / 2. Ну, для начала, HTTP / 2 поддерживает, помимо прочего, асинхронную загрузку файлов. У него есть и другие преимущества по сравнению с HTTP 1.0, но это урок на другой день.

Если вы используете HTTP 1.0 или ниже, вы заметите значительное количество HTTP-запросов.

Не спешите судить; Я встречал провайдеров веб-хостинга, которые все еще используют HTTP 1.0 и более старые версии PHP. Да, даже с очевидными преимуществами HTTP / 2 и PHP 7. Я даже не блефую; некоторые из их клиентов обращаются ко мне, когда некоторые из их плагинов не работают, и это раздражает!

Но на самом деле почему? Тот факт, что некоторых провайдеров веб-хостинга не беспокоит тот факт, что PHP 5.6 устарел и имеет уязвимости в системе безопасности, – это совсем другое. И если они не поддерживают HTTP / 2, это действительно препятствие для вас.

Свяжитесь с вашим хостом или используйте инструмент KeyCDN, чтобы проверить, поддерживает ли ваш сервер HTTP / 2. Лучший веб-хостинг поддерживает HTTP / 2 и последнюю версию PHP. Если ваш хост отстает в обоих случаях, попросите его обновить или выбрать лучший хостинг.

Заключительные слова

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

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

Если у вас есть вопросы, сообщите нам об этом в разделе комментариев ниже. Приветствуем более быстрые веб-сайты и впереди отличное будущее!

Источник записи: https://www.wpexplorer.com