25 проверенных способов ускорения WordPress для молниеносных сайтов

Почти 30% всего интернета работает на WordPress.

Проблемы производительности WordPress хорошо известны.

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

Когда время загрузки растет с 1 до 3 секунд, вероятность ухода пользователя возрастает на 32%. При 5 секундах отказы драматически растут до 90%.

Помимо влияния на UX и удержание посетителей, скорость сайта влияет на ранжирование в поисковиках.

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

Главные виновники:

• Выполнение множества скриптов
• Загрузка графики и других встроенных элементов
• Повторные HTTP-запросы к серверу
• Извлечение информации из БД WordPress

Вот 25 советов, отвечающих на вопрос как ускорить WordPress и перестать терять потенциальных клиентов.

1. Выберите качественного хостинг-провайдера для WordPress

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

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

При достижении ~30к посетителей в месяц и выше — рассмотрите выделенный сервер или как минимум VPS. Оба предотвращают «плохого соседа», пожирающего общие ресурсы. Эксперты рекомендуют сервер, физически близкий к целевой аудитории. Меньше расстояние — быстрее доставка данных.

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

2. Применяйте обновления WordPress оперативно

Для профи безопасности оперативные обновления — no-brainer. На практике ~40% WordPress сайтов на последней версии. Обновления часто включают твики скорости помимо улучшений безопасности — обновляйте ASAP.

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

3. Избегайте раздутых тем

Выбирайте тему WordPress с мыслью о скорости. Не значит голый сайт, но не берите «всё и сразу» темы. Многие коммерческие темы забиты фичами, которые не используются. Те фичи, лежащие на сервере в idle, создают драг на производительность.

Дефолтная Twenty Fifteen, например, предлагает много функционала, включая mobile-first, оставаясь стримлайнерной и облегченной. Ищите тему, дающую то, что нужно, и только это.

4. Используйте плагин кэширования

Кэширование сайта может драматически ускорить его и среди самых критичных фиксов в этом списке.

С плагином кэширования копии ранее сгенерированных страниц хранятся в памяти для быстрого извлечения при следующем запросе. Кэширование страницы намного быстрее множественных запросов к БД WordPress и загрузки из источника. Также более ресурсодружелюбно.

Плагины кэширования достаточно умны, чтобы рефрешить кэш при обновлении контента. Рекомендуемые: WP Super Cache (бесплатно), W3 Total Cache (бесплатно), WP Rocket (платный, но быстрейший в тестах).

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

Убедитесь: изображения в подходящем формате (PNG/GIF для графики, JPEG для фото) и не больше нужного. Один из простейших способов ускорить WordPress.

Сжимайте, чтобы изображения были меньше — быстрее скачиваются эндюзерами. Можно вручную перед загрузкой или автоматизировать плагином вроде WP Smush. С WP-Smush любые загруженные изображения автоматически сжимаются.

Учитывайте высокорешающие экраны при оптимизации. Используйте @2x (и вариации) код для направления высокорешающих изображений на специфические устройства.

6. Рассмотрите CDN

CDN (Content Delivery Network) — географически распределенная группа серверов, работающих вместе для быстрой доставки контента. Копии статического контента кэшируются в CDN. Статический контент: изображения, стили, JS-файлы.

Когда браузер пользователя запрашивает контент, он загружается с ближайшего узла CDN. Пример: пользователь в UK, сайт в US — данные не должны пересекать Атлантику. Служат ближайший CDN-узел.

Для высоконагруженных сайтов CDN дает доп. преимущества. Без CDN все страницы сервятся с одной локации — полная нагрузка на один сервер. С CDN нагрузка распределяется по множеству сайтов, не ваших. CDN также помогает защититься от DDoS.

CDN — не WordPress хостинг. Отдельный сервис для левериджа производительности. Cloudflare популярен для малых сайтов — есть бесплатная версия. StackPath (бывший MaxCDN) не бесплатен ($9/мес), но дружелюбный к новичкам контрольный панель и интеграция с популярными плагинами кэширования.

7. Настройте ленивую загрузку (Lazy Loading)

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

Lazy loading загружает только изображения «above the fold» (до скролла) немедленно, остальные — при прокрутке.

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

Популярные: BJ Lazy Load и Lazy Load by WP Rocket.

8. Лучшие плагины скорости WordPress (Оптимизация БД)

БД WordPress хранит весь контент: посты, ревизии, страницы, комментарии, кастомные посты (контент форм). Также там темы и плагины трекают данные и настройки. По мере роста сайта растет БД и накладные расходы каждой таблицы. С ростом размера и оверхеда БД становится менее эффективной. Периодическая оптимизация аллевирует проблему. Думайте как дефрагментация жесткого диска.

Оптимизируйте БД через инструмент SQL WordPress БД в хостинг-панели. Для многих — phpMyAdmin.

В phpMyAdmin: отметьте все таблицы в БД. Внизу выберите «optimize table» из дропдауна.

Альтернативно — плагин WP-Optimize или WP-DB Manager. Плагины удаляют лишнее помимо оптимизации остатка.

Зачем тратить время и место на trashed/неодобренные комментарии и старые данные?

9. Проверьте свои плагины

Каждый плагин добавляет лишний код. Многие грузят ресурсы с других доменов. Плохой плагин может грузить 12 внешних файлов, оптимизированный — 1-2.

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

Если плагин замедляет сайт — ищите другой, делающий то же эффективнее.

Инструменты вроде Pingdom (раздел file requests) и GTmetrix (вкладка Waterfall) помогут найти худших нарушителей.

10. Удалите ненужные плагины

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

11. Установите Expires Header для статических ресурсов

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

Можно добавив несколько строк в корневой .htaccess как в статье GTmetrix.

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

12. Отключите хотлинкинг

Хотлинкинг (leeching) — форма воровства бандвида. Работает так: другой вебмастер напрямую линкует контент на вашем сайте (обычно изображение/видео) из своего контента. Изображение отображается на сайте вора, но грузится с вашего.

Хотлинкинг увеличивает нагрузку на сервер и снижает производительность, не говоря об отвратительном веб-этикете. Защитите сайт, блокируя внешние ссылки на определенные типы контента (изображения).

Если у вас cPanel или WHM от хостинга — используйте встроенные инструменты защиты от хотлинкинга. Иначе, если сайт на Apache (Linux хостинг) — добавьте несколько строк в корневой .htaccess.

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

13. Включите GZIP

Уменьшение размера страниц критично для быстрой доставки.

GZIP — алгоритм сжатия файлов на отправителе и восстановления на получателе. Включение GZIP сжатия на сервере может драматически снизить время загрузки, уменьшая размер страниц до 70%.

Когда браузер запрашивает страницу, проверяет заголовок «Content-encoding: gzip». Если есть — знает, что сервер сжал HTML, стили, JS. Сейчас GZIP включен по дефолту на многих серверах, но лучше убедиться. Бесплатный инструмент проверки GZIP скажет.

Если нужно включить GZIP — проще через плагин WP Rocket. W3 Total Cache тоже дает способ включить под performance опциями. Если не можете плагин (проблемы прав/не хотите) и на Linux — сделайте сами, модифицируя корневой .htaccess. Статья объясняет как включить gzip через .htaccess.

14. Оптимизируйте главную страницу для скорости WordPress

Главная страница создает первое впечатление бренда и бизнеса. Критично оптимизировать для мобильной отзывчивости, приятного UI/UX и, главное, скорости.

Шаги:

• Удалите ненужные виджеты. Не нужно показывать каждый виджет везде.
• Не включайте виджеты шаринга и плагины на главной. Оставьте для постов.
• Ограничьте количество постов на главной. Меньше постов = меньше, быстрее загрузка.
• Используйте отрывки (excerpts) вместо полных постов. Опять меньше = быстрее.
• Легче с графикой. Изображения и видео грузятся дольше текста.

15. Хостите видео где-то еще

Вместо загрузки видео как медиа и сервинга на сайте — используйте видео-сервисы для оффлоада бандвида и обработки.

Воспользуйтесь вторым по трафику поисковиком — загрузите видео на YouTube или Vimeo. Скопируйте небольшой код и вставьте в пост, где нужно видео. Это встраивание (embedding). При просмотре видео стримится с третьестороннего сервера, а не вашего. В отличие от хотлинкинга — рекомендуемая практика для медиа-riched контента.

16. Ограничьте ревизии постов

Возможность отката к ранее сохраненной версии полезна, но нужно ли хранить каждую копию каждого поста? Скорее нет.

Лишние копии забивают БД и добавляют оверхед — лучше поставить кап на количество. Через плагин вроде Revision Control или добавив в wp-config.php:

define( 'WP_POST_REVISIONS', 3 );

Ставьте комфортное число. Любое будет меньше дефолта (безлимитные ревизии).

17. Установите дефолтное Gravatar-изображение как Blank

Gravatar — веб-сервис, позволяющий создавать профиль с аватаром, авто-линкующимся к email. При комментарии в WordPress блоге аватар отображается рядом. Если у пользователя нет Gravatar — WordPress показывает дефолтный «mystery man». Дúzины комментариев с одним неинформативным изображением. Зачем тратить загрузку на бесполезное, если можно убрать?

Смена дефолтного Gravatar проста. В админке: Settings → Discussion. Прокрутите к Avatars. Выберите Blank как дефолтный аватар. Готово.

18. Отключите пингбэки и трэкбэки

Когда внедрялись, предназначены для шаринга кредита и референсов к связанному контенту. На практике —mainly вектор спама. Каждый ping/track добавляет записи (больше данных) в БД.

Так как редко используются для чего-то кроме получения ссылки со вашего сайта на спамера — рассмотрите полное отключение. Settings → Discussion. Под default article settings снимите галочку «Allow link notifications from other blogs (pingbacks and trackbacks)». Применится вперед, не ретроактивно к существующим постам.

19. Разбивайте комментарии на страницы

Много комментариев — здорово, но может замедлить загрузку. Чтобы устранить: Settings → Discussion, отметьте «Break comments into pages». Укажите сколько комментов на страницу и показывать новейшие или старейшие первыми.

20. Избавьтесь от слайдеров

Красивы ли слайдеры — вопрос вкуса. Факт: они замедляют WordPress — неоспорим.

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

Также толкают основной контент вниз, возможно за экран. Зачем платить производительностью за неэффективную eye candy?

21. Перенесите скрипты в футер

JavaScript — крутой скриптовый язык для классных вещей. Но загрузка скриптов занимает время. Когда скрипты в футере — они все равно грузятся, но не держат остальную страницу в заложниках. Будьте в курсе: иногда скрипты должны грузиться в определенном порядке — сохраняйте порядок при переносе.

22. Объедините кнопки и иконки в CSS Sprites

Спрайт — большое изображение из множества маленьких. С CSS sprites загружаете спрайт и позиционируете для показа нужной части.

Только один HTTP-запрос на изображение вместо отдельных запросов на каждый компонент.

23. Минифицируйте JavaScript и CSS

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

Better WordPress Minify — популярный плагин. Много опций кастомизации. Начните с первых двух общих опций.

Они указывают: минифицировать JS и CSS файлы. Плагин создает новые минифицированные копии оригиналов. Оригналы остаются — можно быстро откатиться.

24. Избегайте редиректов лендинг-страниц

WordPress умен во многих вещах, редиректы — одна из них. Если посетитель вводит https://yourdomain.com/greatarticle.html, а сайт настроен на www префикс — авторедирект на правильную страницу (с www), https://www.yourdomain.com/greatarticle.html.

Что если пользователь вводит https:// вместо https://? Скорее всего попадет на нужную страницу, но может быть еще редирект: HTTPS → HTTP → www URL. Больше времени ожидания.

Редиректы удобны для попадания на правильную страницу, но задерживают загрузку. Избегайте когда возможно. При линковке на страницу сайта — используйте правильный, не-редиректный URL. Сервер должен быть настроен так, чтобы любой URL достигался не более чем за один редирект, любой комбинации HTTP/HTTPS или www.

Проверить статус редиректов — попробуйте несколько URL в Redirect mapper. Если больше одного редиректа — модифицируйте сервер для быстрого попадания посетителей.

Если сайт на Linux — добавьте URL rewrite правила в .htaccess. Для других платформ — проверьте дашборд на опцию конфигурации редиректов. Если нет — контакттехподдержку и попросите исправить.

25. Замените PHP на статический HTML

PHP — быстро исполняемый язык, но не так быстр как статический HTML. Вероятно, ваша тема выполняет полдюжину PHP-выражений в хедере, которые можно заменить на статический HTML. Если откроете header файл (Presentation → Theme Editor) — увидите строки вроде:

Жирным выделен PHP, исполняемый при каждой загрузке. Занимает минимальное время, но медленнее чистого HTML.

Если решительны сделать сайт максимально быстрым — свопните PHP на текст. Чтобы увидеть чем заменить — View Source на веб-странице (правый клик → view source).

Увидите нечто вроде:

Жирная область — текст, результат обработки PHP. Замените оригинальный PHP-вызов на этот код. Если сделаете для основных PHP-вызовов только в хедере — сэкономите минимум 6 вызовов PHP. Если используете разные тайтлы или заголовки статей для SEO — не меняйте PHP в первой строке. Проверьте футер и сайдбар на доп. возможности замены PHP на текст.

Скорость сайта: собираем всё вместе — оптимизация WordPress

К этому моменту у вас должен быть твердый grasp того, как ускорить WordPress.

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

Скорее всего, навигируя гайд, вы открыли, что у сайта много места для улучшения.

Применив советы выше, перезапустите тест скорости через Google TestMySite и PageSpeed Insights.

Приятно удивитесь улучшению скорости. Мониторьте Google Analytics — сколько больше посетителей и время на страницах. Это ongoing инструмент мониторинга эффективности оптимизаций.

Помните: скорость важна, но не всё. Можно вырезать все изображения, видео, плагины, использовать bare-bones тему для блазинг фаст загрузки, но сайт станет скучным.

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