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

Содержание

Инструменты для оценки скорости

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

Существует множество инструментом для оценки скорости сайта, но я останавлюсь на двух из них, это:

Скорость загрузки сайта в 2018

В 2010 году Google сообщил, что на ранжирование результатов в поисковой выдаче теперь будет влиять скорость загрузки десктоп версии сайта. Прошло 8 лет. И вот, лето 2018, Google заявил, что теперь и скорость мобильной версии влияет на ранжирование.

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

Окей, переходим теперь к самой оптимизации.

Используйте быстрый Framework или тему для сайта

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

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

Хороший пример – это тема Total WordPress theme. Это многоцелевая тема, которая имеет множество функций. Но в то же время сохраняет высокую производительность. Каждый из их демо-сайтов, нагруженный огромным количеством контента, загружается не дольше 800 милисекунд. Это поразительный результат, хочу отметить!

Советую также обратить на легковесные Thesis Theme framework и Genesis. Эти фреймворки получили хорошую репутацию в вопросах создания быстрых и хорошо написанных тем.

Используйте кеширование

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

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

Плагины WordPress для кеширования

Вот список нескольких бесплатных и платных плагинов для кеширования:

Браузерное кеширование

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

Добавьте следующий код в .htaccess:

Серверное кеширование

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

Предварительное получение настроек DNS

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

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

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

Переменные запроса лучше убрать из ссылок на статические ресурсы, т.к. это может вызвать проблемы с прокси-кешированием и CDN. Можно отключить программно:

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

Есть и отдельные плагины, которые отключают переменные запроса. Например, Query Strings Remover или Remove Query Strings From Static Resources.

Используйте CDN

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

Загружайте все возможные части сайта с помощью CDN

Это касается даже самых маленьких файлов, например, favicon. Если все загружается с помощью CDN, то используется лишь одно единственное соединение. Например, если дело касается favicon, то просто загрузите изображение в корневую папку и добавьте в header.php следующий код:

Оптимизируйте базу данных

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

Отключите или ограничьте ревизии постов

Можно отключить создание новых ревизий и увеличить время между автосохранением поста с 60 секунд до 5 минут:

Для этого есть даже отдельный плагин, если не хочется связываться с кодом – Disable Post Revision.

Для ограничения количества ревизий используйте этот код:

Код нужно добавить в главный конфигурационный файл WordPress, wp-config.php.

Удалите старые ревизии из базы данных

Здесь может помочь плагин WP-Optimize. Он удаляет все ревизии постов, очищает автоматически созданные черновики постов, удаляет спам-комментарии, удаляет неутвержденные комментарии, transient options, pingbacks и trackbacks.

Избегайте использования более 100 страниц на одном сайте

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

Почему так? Страницы имеют иерархичную структуру. Поэтому необходимо загрузить их все, чтобы определить взаимосвязи между ними. Для постов этого требуется. Один пост никак не связан с любыми другими.

Поэтому если нужно иметь больше 100 страниц, то стоит воспользоваться custom post types. Есть специальные плагины для этого, например, Post Type Switcher.

Оптимизируйте изображения с помощью умного сжатия

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

Для эти целей есть разные плагины. TinyPNG и Optimus.

Optimus, например, использует комбинацию сжатия с потерями и без потерь, что уменьшает размер файлов без видимого изменения качества картинки. Благодаря этому возможно сжатие графических файлов до 70%.

После установки и настройки TinyPNG или Optimus изображения начнут сжиматься сразу после загрузки на сайт.

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

Gzip – это еще один способ сжатия, который уменьшает размер веб-страниц, таблиц стилей и сценариев JavaScript на серверной стороне перед отправкой их браузеру пользователя. Вы можете проверить включено ли Gzip-сжатие на сайте с помощью Check GZIP Compression или PageSpeed Insight Tools от Google.

Добавьте код в .htaccess:

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

Уменьшите количество плагинов WordPress

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

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

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

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

Оптимизируйте производительность веб-шрифтов

Согласно статье KeyCDN, 57% процентов сайтов сейчас используют кастомные шрифты. По сравнению с 2011 годом этот показатель вырос на 850%. Как показывает практика, кастомные шрифты выгоднее всего хранить шрифты в форматах WOFF и WOFF2.

А еще лучше с помощью localFont tool преобразовать их в base64 и использовать как CSS и JavaScript на сайте. В этом случае браузер будет кешировать шрифты нативно, не загружая их постоянно с вашего сервера.

Оптимизируйте Font Awesome

Font Awesome следует хранить на своем CDN. Файл шрифта будет загружаться с помощью того же соединения, что и остальные ресурсы. Подключайте Font Awesome с помощью файла CSS, ссылку на который разместите в <link>. Не забудьте адрес сменить на CDN:

Используйте ленивую загрузку изображений, видео и Disqus

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

Такие элементы страницы представлены специальные заполнителями, которые заменяются, как только пользователь опускает страницу вниз, либо активирует on-click событие.

Ленивая загрузка изображений

Можно использовать для этого плагин BJ Lazy Load. Работает еще и для текстовых виджетов. Если вы используете плагин кеширования WP Rocket, то сможете в его настройках найти опцию для ленивой загрузки изображений.

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

Для видео есть бесплатный Lazy Load for Videos. Может существенно сократить скорость загрузки страниц на сайтах, сильно наполненных видео с YouTube или Vimeo.

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

Это хороший плагин для комментариев, но он создает больше 10 дополнительных HTTP-запросов, что может существенно замедлить ваш сайт. Но есть решение – Disqus Conditional Load, плагин, который убирает те дополнительные запросы до начала загрузки. Плагин не мешает SEO и робот сможет индексировать комментарии.

Используйте минификацию и конкатенацию для CSS и JavaScript

Минификация

Эта процедура играет большую роль. Минификация удаляет лишние символы из HTML, CSS или JavaScript. Это:

  • комментарии
  • переносы строк
  • пробелы
  • лишние разделители

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

Конкатенация

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

Для минификации и конкатенации вы можете использовать специальные плагины. WP Rocket, кстати, имеет это на вкладке “Basic”. К слову, многие плагины кеширования имеют эти функции. Но существуют и легковесные решения, например, Better WordPress Minify и Autoptimize.
Когда речь заходит о месте размещения CSS и JS, то CSS лучше размещать сверху страницы, а JS – снизу.

Уменьшите количество HTTP запросов

Gravatars

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

Решается проблема двумя способами.

  • Вы можете выключить Gravatars и использовать вместо них локальные аватары. Для этого установите плагин WP User Avatar, в его настройках нужно “выключить Gravatars и использовать только локальные аватары”.
  • Либо же используйте Disqus. Да, это отдельный плагин. Может показаться странным, но он производительней стандартной системы комментариев, если их более 5 за счет меньшего количества HTTP запросов.

Отключите Emojis

С версии 4.2 в WordPress появились эмодзи. И не важно, используете ли вы их где-то или нет, они всегда загружаются с помощью дополнительного JavaScript-файла. От этого нужно избавиться. Для начала отключите во “Writing Settings” преобразование смайлов из текстовых знаков в графические аналоги. Затем следуйте одному из двух способов.

  • Используйте плагин Disable Emojis
  • Либо отключите все вручную, вставив код из того же плагина в файл functions.php:

Отключите ненужные скрипты на каждой странице

Лучше всего сократить количество плагинов. Но Gonzalez – исключение. Он позволяет отключать загрузку скриптов на всех страницах и оставлять только на некоторых. Например, вы используете Contact Form 7. Этот плагин загружает свои скрипты на каждой странице, но они нужны только на странице с контактами. С помощью Gonzalez можно их отключить на остальных страницах. По меньшей мере, это избавит вас от 5 дополнительных HTTP запросов.

Отключите скрипт встраивания

Начиная с WordPress 4.4, появился скрипт wp-embed.min.js, который позволяет легко встраивать видео, картинки, твиты и т.д. Например, WordPress автоматически превратит URL во встроенное YouTube-видео и предоставит предпросмотр в визуальном редакторе. Многие люди не используют эту возможность или не нуждаются в ней. Вы можете всегда встраивать видео или твитты старым способом, просто вставляя нужный embed-код вручную с YouTube или Twitter.
Проблема скрипта автоматического встраивания в том, что он загружается на каждой странице.

Для отключения скрипта примените один из двух способов.

  • Используйте плагин Disable Embeds
  • Вставьте в functions.php следующий код:

Отключите скрипт для комментариев

Всякий раз, когда вы используете потоковые комментарии, comment-replay.min.js включается в каждый пост и страницу. Могут быть случаи, когда вам этот скрипт не нужен, а может вы, вообще, используете Disqus. В этих случая скрипт нужно отключать. Добавьте в functions.php следующий код:

Предотвратите Hotlinking

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

После этого на стороннем ресурсе вместо картинки будет отображаться ошибка 403.

Отключите Pingbacks и Trackbacks

Pingbacks и Trackbacks сегодня рассматриваются как устаревшие функции, которые могут замедлять веб-страницы. С помощью Ahrefs, Google Alerts и других средств для мониторинга бренда намного удобнее отслеживать, что кто-то ссылается на ваш контент.

Вы можете отключить Trackbacks и Pingbacks в ‘Discussion Settings’. Имейте ввиду, что настройка будет актуальна только для новых постов. Если нужно изменить это и для старых, то воспользуйтесь групповым редактирование постов и запретите для них pings.

Определите размеры изображений

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

Исправьте проблему замедления admin-ajax.php

С WordPress 3.6 был представлен WordPress Heartbeat API, который позволяет WordPress создать “общение” в реальном времени между браузером и сервером. Благодаря этому улучшилось управление сессиями, отслеживание ревизий постов и автосохранение.

WordPress Heartbeat API использует admin-ajax.php для выполнения AJAX-вызовов из браузера. Это может привести к высокой загрузке CPU и большому количеству PHP вызовов. Например, если вы оставите панель управления сайтом открытой, то она будет продолжать отправлять POST запросы с периодическим интервалом.

Есть бесплатный плагин Heartbeat Control, который позволяет легко настроить частоту этих запросов.

Имейте ввиду, что многие разработчики плагинов используют этот файл. Если вы заметите задержки, возможно, они вызваны с обращениями к admin-ajax.php. Чтобы разобраться в этом, используйте Speed Test Tool. Найдите вызов admin-ajax.php и просмотрите данные post. Вы сможете найти имя action, по которому определить вызывающий плагин.

Настройте MySQL

Конфигурация может изменяться от сервера к серверу. Рекомендую использовать инструмент, который называется MySQL Tuner. Он не вносит никаких изменений в конфигурацию, но может предоставить обзор производительности сервера и дать некоторые базовые рекомендации для улучшения. Есть и другие инструменты для этого, например, MySQL tuning primer script или phpMyAdmin.

Пользуйтесь надежным и быстрым хостингом

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

Заключение

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

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

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: