Совет недели: Как удалось ускорить сайт WordPress на 256% (кейс)

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

Кейс — это реальный случай (case — «обстоятельства», англ.) , на основе которого можно попробовать сделать нечто похожее.

В моем описанном случае — сайт list25.com, автор которого, когда начинал, даже предположить не мог, что посещаемость сайта подскочит до реальных 1,5 млн. посетителей в месяц и число подписчиков на канал Youtube составит четверть миллиарда.

Как владельцу удалось справится с таким объемом трафика и ускорить работу сайта на CMS WordPress на 256%?

Читайте внимательно. Возможно, описанные советы помогут вам в работе с вашим сайтом.

List25 — развлекательный сайт. Автор и владелец — Сайед Балхи. Был признан ООН одним из ТОП-100 молодых предпринимателей (до 30 лет). Живет в США, родился в Пакистане.

Если вы слышали что-то о системе email-рассылки Optin Monster, сайте для новичков WordPress WPBeginner, плагинах Envira Gallery (у меня есть обзор этого плагина — https://bestplugins.ru/wordpress-plugins/envira-gallery-lite-plagin-galerey-s-adaptivnyim-dizaynom.html) и SoliloquyWP, интернет-магазине платных премиум-тем WordPress ThemeLab — то это все Сайед Балхи.

Сайт List25 содержит в основном картинки и видео, которые занимают террабайты каналов интернет, так что вопросы оптимизации для сайта были не на последнем месте.

list25

Изначально, сайт загружался в браузер за 2,21 секунды (по данным ресурса Pingdom). После того, как сайт был оптимизирован владельцем, он стал загружаться за 1,21 секунду (на 45% быстрее).

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

Какие методы оптимизации использовал владелец?

Хостинг

Хороший веб-хостинг для сайта на WordPress имеет первостепенное значение. Особенно — такой параметр как «время отклика сервера».

Это время складывается из четырех основных действий:

  • Установка связи
  • Получение пакета запроса
  • Ожидание обработки
  • Получение ответа

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

Советую прочитать еще:  Совет недели: Как ограничить длину комментариев

Чем дороже тарифный план хостинга — тем больше ресурсов сервера вы получите для своего сайта.

Поэтому, если у вас идет рост числа посетителей — думайте о смене тарифного плана. Если основная масса читателей — из вашего родного города — думайте о хостинге в вашем городе, а не за тысячи километров.

Сайед Балхи сменил своего хостинг-провайдера и смог добиться ускорения работы сайта: с 456ms до 172ms на отклик сервера:

Совет недели: Как удалось ускорить сайт WordPress на 256% (кейс)

 

Плагин кеширования страниц сайта

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

Что такое кеширование?

Когда посетитель заходит на ваш сайт, он получает страницу с данными, которые хранятся на сервере, в базе данных. Любое действие посетителя — это запрос к серверу, обработка запроса, выполнение запроса и получение ответа с данными в браузер посетителя. Каждый посетитель инициирует более 100 запросов одновременно. Если на ваш сайт зашло одновременно 10 человек + 2 поисковых робота — представьте количество одновременно обрабатываемых запросов — около 1000—1200 запросов. А если сразу 30-40 посетителей?

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

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

Чаще всего, владелец сайта на WordPress самостоятельно решает — использовать ему плагин кеширования или нет. Для этого он ищет или варинт бесплатного плагина (типа wp-super-cache, wp total cache), или платного, например — Fresh Performance Cache.

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

Советую прочитать еще:  6 дополнительных действий к усилению защиты вашего сайта

Какой вариант выберите вы?

CDN (Сеть доставки содержимого)

Сеть доставки содержимого отлично себя покажет, если ваш сайт находится где-то внутри этой сети, а именно — географически распределенных серверов. Если ближайшие сервера от вас — в Голландии и Турции, а ваш сайт и читатели — в Москве — толку от CDN для вас — никакого.

Сервера распределенной сети хранят файлы CSS, JS и файлы изображений вашего сайта, и когда читатель заходит на сайт — CDN определяет ближайший сервер и оттуда загружает файлы вашего сайта.

По похожей технологии работают и облачные хостинги.

Объединение файлов для уменьшения запросов

Многие установленные на вашем сайте плагины добавляют свои файлы: CSS и JS. Это к тем, что уже стоят у вас в теме WordPress. Каждый новый файл — это новый запрос.

Сколько всего запросов генерирует ваш сайт? Проверить очень просто. Откройте файл footer.php и перед закрывающимся тегом BODY добавьте код:

< ?php printf(__('%d queries. %s seconds.', THEME_NS), get_num_queries(), timer_stop(0, 3)); ? >

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

Перегрузите страницу. В самом низу страницы вы увидите число запросов и время ответа сервера. Я сейчас это сделал на своем сайте — посмотрите. У меня генерируется около 130 запросов (каждая страница — по-разному).

Если у вас — больше 200 запросов, значит. вам нужно думать, как их уменьшить.

Спрайты

Спрайт — это файл изображения, который объединяет в себе несколько других файлов изображений. Пример ниже:

Совет недели: Как удалось ускорить сайт WordPress на 256% (кейс)

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

Создать спрайт несложно, как и написать CSS-правило для вывода нужно области картинки:

Советую прочитать еще:  9 советов как доработать сайт с помощью файла wp-config.php

Совет недели: Как удалось ускорить сайт WordPress на 256% (кейс)

Сжатие файлов CSS и JS

Есть красивый код, когда каждая строка содержит один параметр, а есть — сжатый код, когда все параметры написаны без пробелов.

Примеры:

Красивый CSS

beautify

Сжатый CSS

collapse

При этом экономится примерно 10-15Кб в размере файла. Пустяки, но если файлов 30-40 — уже ощутимо.

Я сжимаю файлы с помощью бесплатной утилиты-программы SnapCSS2

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

Можно дополнительно сжимать файлы изображений, без потери качества. Технологий разных много. Есть бесплатные плагины WordPress. Лично я пользуюсь плагином EWWW Image Optimizer. Плюс — я оплатил облачный сервис этого плагина, что дает мне возможность использовать плагин более эффективно и экономить мегабайты на оптимизации файлов изображений.

Сайед Балхи в результате всех этих действий сумел добиться великолепного эффекта производительности работы своего сайта List25.com

Совет недели: Как удалось ускорить сайт WordPress на 256% (кейс)

А как у меня, спросите вы?

У меня — пять основных сайтов и все работают на WordPress. Все сейчас стоят у одного хостинг-провайдера, четвертого по счету за 6 лет существования моих сайтов. Сервер хостинга расположен в Германии.

Вот мои результаты. Сравните с Сайед Балхи.

Bestplugins.ru

обратите внимание на размер страницы, число запросов и время загрузки

bestplugins

Skininfo.ru (сейчас пишу новую тему)

skininfo

Bestwordpress.org.ua

bestwordpress

WPFreethemes.ru

wpfreethemes

Portfolio (www.vlasov.biz/portfolio)

portfolio

А как  у вас?

Если материал вам понравился, нажмите или расскажите о нем друзьям!

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

2 Comments

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

Ваш email нигде не будет показан. Обязательные поля помечены *