Как ускорить сайт на WordPress • WP Best

Доброго времени суток.

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

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

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

Причины и цели ускорения

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

Может просто кто-то сообщил, что скорость загрузки влияет на поведенческие факторы и ранжирование страниц в поиске.

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

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

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

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

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

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

Подробнее читайте в моей статье — Онлайн инструменты для измерения скорости.

Я рекомендую пользоваться gtmetrix, как самым простым и удобным сервисом, с адекватной оценкой и рекомендациями.

Если вы получили оценку 8-9 по Gtmetrix, значит всё здорово. И скорее всего, сайт грузится на 8-9.

Вот как выглядит отчёт скорости загрузки в сервисе Gtmetrix.

Как измерить скорость загрузки WordPress в сервисе GTmetrix

У Pagespeed Insights более странные показатели и рекомендации загрузки. Он может оценить скорость для мобильных в 2 балла, хотя фактически и визуально это конечно не так. Про PageSpeed Insights я написал отдельную статью.

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

Техника безопасности при ускорении

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

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

Лучше заранее обезопасить свои действия бэкапом.

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

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

Я часто пользуюсь ими, очень удобно.

Бюджетный хостинг или дорогой хостинг

Большинство хостингов предлагают современный стек приложений, хорошее мощное железо, быстрые диски.

У каждого хостинга могут быть свои недостатки и достоинства. Но в целом во многих характеристиках они не отличаются. Поэтому выбирать сложно.

Выделить я хочу отдельно зарубежный хостинг SiteGround, который просто ТОП.

Работа с ним ориентирована на удобство, безопасность, скорость. Да, он немного дороже своих собратьев. Но его смело можно назвать хостингом премиум класса для WordPress сайтов.

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

Про обновления, безопасность и скорость

Всегда своевременно обновляйте код вашего сайта.

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

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

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

При отсутствии обновлений рано или поздно сайт сломается. Причем в неподходящий момент.

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

Удалите лишние плагины

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

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

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

Самый быстрый код — это код, которого нет!

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

Отключите лишние шрифты

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

Доходит до такого, что на сайте могут быть подключены 3-4 копии Font Awesome. Подключаются они из файлов стилей плагинов, которые нельзя править по понятным причинам.

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

Отключение шрифта, как в случае с кодом, — лучший вариант для скорости. Но если отключить нельзя, оптимизируйте доставку в Autoptimize, WP Rocket, LS Cache или в другом плагине оптимизации.

Настройки на сервере

Для хорошей производительности, на сервере должна быть выбрана свежая версия PHP. Также иногда нужно включить сжатие, настроить кэширование статических ресурсов в файле .htaccess. Следует сказать, что я давно не делал последнее вручную. Большинство популярных плагинов оптимизации, — W3 Total Cache, WP Fastest Cache, WP Rocket и другие, — записывают нужные настройки автоматически.

Включите Gzip сжатие

Gzip сжатие — это первый шаг для снижения веса, и он всегда должен работать на вашем сайте.

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

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

Вы можете взять, например, код отсюда enable gzip compression via .htaccess.

Если у вас VPS сервер с ISP Manager, посмотрите эту простую инструкцию от reg.ru.

Настройте кэш браузера

Задайте сроки хранения для статических ресурсов.

На многих серверах, которые предлагают услуги хостинга, достаточно добавить следующий код в файл .htaccess.

Пример — Add Expires Header to WordPress.

Плагины оптимизации и кэширования

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

WP Super Cache. Кэширует для мобильных только с установленным расширением типа WP Touch. Давно не слежу за этим плагином. Поправьте меня, если не так.

WP Fastest Cache. Условно бесплатный плагин, ряд важных функций доступен только в премиум версии.

W3 Total Cache. Один из старейших плагинов кэширования с большим количеством настроек. Кстати в нем можно выбрать сохранение в memcached. Но лично у меня с этим плагином каждый раз что-то не задавалось.

Чаще всего я использую простой легковесный плагин кэширования Cache Enabler. В связке с плагином оптимизации Autoptimize. Получается всегда очень неплохо.

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

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

Сжатие и объединение HTML, JS, CSS в плагине Autoptimize
Как ускорить сайт на WordPress с помощью Autoptimize

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

Отдельно несколько слов про WP Rocket. Про него писал отдельный обзор, часто устанавливал и настраивал.

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

Я понимаю, что многие пользуются «пробными» версиями. Но если рассматривать вариант покупки между WP Rocket и оптимизированным планом хостинга Siteground, я отдаю предпочтение последнему. Он настолько хорош.

Плагины SG Optimizer и LS Cache интегрируются соответственно c Siteground и с сервером Litespeed. Очень популярные и функциональные плагины. До сих пор не понимаю, почему еще не все перешли на эти сервера.

Плагины оптимизации изображений

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

Эффект сокращения размера достигается в основном за счёт сжатия больших изображений. Больше оригинальный размер — больше экономия. Поэтому иногда я просто выборочно сжимаю изображения через плагин и сервис TinyPng. Бесплатный лимит сжатия составляет 500 изображений в месяц, но этого достаточно. По качеству сжатия всё отлично.

Про способы сжатия я написал отдельную статью Оптимизация изображений.

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

Если в вашей медиабиблиотеке уже загружено большое количество файлов, воспользуйтесь плагинами EWWW Image Optimizer или Robin Image Optimizer для пакетного сжатия. Обрезайте очень большие размеры фотографий до загрузки на хостинг.

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

Сконвертированные изображения также отнимут место на диске, 50-70 % от всего размера вашей медиабиблиотеки.

В общем, я перестал уделять внимание webp. Делаю в том случае, если меня об этом просят.

Еще одна очень частая проблема с изображениями — масштабирование в браузере.

Масштабирование изображений

Если вы используете сервис Gtmetrix, вероятно вы заметили строку Serve scaled images .

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

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

Можно пересоздать все новые размеры изображений с помощью простого плагина Regenerate Thumbnails.

Темы и плагины создают собственные наборы размеров изображений, поэтому управлять ими становится сложнее. В этих случаях я часто пользуюсь плагином Simple Image Sizes.

На странице Настройки -> Медиафайлы он отображает все зарегистрированные размеры, позволяет изменить их(!), а также заново сгенерировать для выбранных типов записей.

Плагин Simple Image Sizes выводит информацию о всех зарегистрированных размерах изображений.

Иногда, проще заменить весь плагин. На одном сайте я видел свыше 30 зарегистрированных размеров, 10 из которых создавал плагин галереи. Причем эта галерея использовалась только на нескольких страницах, поэтому было оправданно от неё отказаться и заменить встроенным функционалом.

Уделите особое внимание графическим элементам вашего сайта — во многих случаях это решающий фактор для ускорения сайта.

Ленивая загрузка

Грузите позже то, что не нужно сейчас.

Наиболее очевидное и популярное применение — ленивая загрузка картинок.

Я использую A3 Lazy Load, Autoptimize, Lazy Load by WP Rocket. Иногда требуется исключить классы или конкретные изображения, если вёрстка выглядит странно. Но в общем, решаемо.

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

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

С ленивой загрузкой видео и фреймов хорошо справляются те же плагины A3 Lazy Load, Lazy Load by WP Rocket.

Конечно же, эти опции есть и в комбайнах оптимизации, типа WP Rocket, LS Cache.

Отложенная загрузка внешних скриптов

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

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

Следующий метод отложенной загрузки — через setTimeout после начала прокрутки страницы.

<script type="text/javascript">
var loaded = false;

window.addEventListener('scroll', () => {
    if (loaded === false) {
        loaded = true;
        
        setTimeout(() => {

            // здесь код виджета чата, метрики и др. 
        
        }, 1000)
    }
});
</script>

Вот еще один способ загрузки внешнего скрипта в указанную позицию DOM дерева (на примере яндекс карты).

<div id="map"></div>
<script type="text/javascript">

setTimeout(function () { 
var elm = document.getElementById("map"); 
s = document.createElement('script');
s.src = '//api-maps.yandex.ru/services/constructor/1.0/js/...';
s.async = true;
s.onload = function () {
     document.dispatchEvent(new CustomEvent('scroll'))
}
elm.parentNode.insertBefore(s, elm.nextSibling);
 
 }, 5000)
</script>

Эти техники нельзя назвать сложными, но они требуют неких навыков работы с кодом.

Оптимизация запросов к базе данных

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

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

Для более подробного профилирования кода, есть удобная команда wp-cli profile, помогающая с поиском медленного кода на разных стадиях загрузки сайта.

Ускорение сайта WordPress через CDN

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

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

На своем сайте я использую бесплатный план Cloudflare.

В Siteground есть удобное подключение к Cloudflare, что дает еще один повод полюбить этот хостинг.

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

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

  • Cжатие, редактирование, кадрирование и конвертирование изображений
    • Kraken.io Web Interface — сжатие изображений
    • Compressor.io — еще один инструмент сжатия без потерь
    • PicResize — кадрировать, повернуть, и изменить размер изображения
    • WebResizer — Изменить размер онлайн
  • CSS, HTML, JS Minifier
    • HTML Minifier — Сокращение размера HTML, включая стили и скрипты, присутствующие в разметке.
    • CSS Minifier — Сокращение размера каскадных стилей
    • JSCompress — Сжатие скриптов и файлов JS
    • UnMinify — обратный процесс, приведение сжатого кода в читаемый вид.

Моя услуга по ускорению сайта на WordPress

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

Желаю успехов в работе над ускорением вашего сайта!
Понравилась статья, делитесь ею и оставляйте комментарии.

Подписаться
Уведомление о
guest
10 комментариев
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Vasili Eremenko
Vasili Eremenko
4 лет назад

А вот Jetpack вообще сильно грузит wordpress?

Иван
Иван
4 лет назад

Вот этого я не знаю.

Уже вам посоветовал использовать плагин p3 performance profiler, так вы получите общее представление об относительной производительности ваших плагинов.

Михаил
Михаил
2 лет назад

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

Михаил
Михаил
2 лет назад

Этот CDN сильно отличается от упомянутого вами Клаудфлейр не только охватом РФ. Он поддерживает интеллектуальную обработку запросов как Fastly. Поэтому авторизованные, комментирующие или использующие какой-либо функционал посетители пропускаются мимо кеша. А анонимное большинство получает страницы моментально, не нагружая хостинг.

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

По Host-tracker у меня было время загрузки, как у вас, порядка 4сек. C WP-Super-Cache 1.5сек. А с CDN меньше 1й.

trackback

[…] WordPress написаны десятки плагинов, ориентированные на увеличение скорости загрузки разным типом способов: включение gzip сжатия, задание […]

trackback

[…] себя как конечный инструмент для увеличения скорости загрузки сайта на WordPress, и улучшения показателей в Pagespeed […]

trackback

[…] Как ускорить сайт на WordPress […]

trackback

[…] Как ускорить сайт на WordPress […]

10
0
Оставьте комментарий.x
()
x
Пролистать наверх