10 способов ускорить сайт на WordPress 1
Оптимизация

10 способов ускорить сайт на WordPress

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

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

Что делает сайт WordPress медленным?

Мне нравится разбивать проблемы с производительностью на две группы:

Проблемы с бэкэндом.

Говоря о «проблемах с бэкэндом» я подразумеваю проблемы, которые возникают до и во время генерации страницы на сервере.

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

Данные проблемы обычно связаны с:

  • плохим хостингом;
  • перегруженностью сервера;
  • медленными запросами к базе данных;
  • плохо оптимизированной темой/плагинами.

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

Самое простое что можно сделать в этом случае — выбрать хостинг получше и удалить все ненужные плагины. Также можно компенсировать большую часть «проблем с бэкэндом» с помощью полного кэширования страниц.

Проблемы с фронтендом.

Говоря о «проблемах с фронтендом» я подразумеваю проблемы, которые возникают во время загрузки страницы. Эти проблемы обычно вызваны:

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

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

Диагностика проблем.

WebPageTest — мой любимый инструмент для тестирования производительности фронтенда. Вы можете указать URL любого сайта и получить конкретные рекомендации, как ускорить сайт. Также можно использовать сервис Pingdom для аналогичного отчета.

Вот пример теста скорости моего сайта.

10 способов ускорить сайт на WordPress

В верхней части представлены буквенные оценки, позволяющие сделать выводы (A и B — хорошие, D и F — плохие). Так например если у вас есть оценки D или F для «First Byte Time», это означает, что у вас есть проблемы с бэкендом. Остальные проблемы связаны с веб-интерфейсом и хостингом.

Также обратите внимание на раздел «Fully Loaded». Здесь представлено общее время загрузки вашего сайта, количество запросов, общий размер файла страницы и «стоимость» доставки сайта (посредстовом CDN) такого размера (нужно добиться, чтобы было как можно меньше знаков доллара($)).

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

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

10 способов ускорить ваш сайт WordPress

Кеширование

Самое простое действие, способное ускорить сайт на WordPress — использовать полное кэширование страниц.

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

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

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

Существуют высококачественные хостинги, имеющие в своем арсенале встроенное полное кэширование страниц, можно использовать платный плагин для кэширования WP Rocket или же его бесплатную альтернативу, например W3 Total Cache, WP Super Cache и т.п.

Можно также рассмотреть возможность кэширования фрагментов для сложных запросов или внешних запросов к API. К примеру кэш всей страницы может изменяться по 5-10 раз в день, тогда как для некоторых ее фрагментов можно указать, насколько долго содержимое кэша будет оставаться действительным/валидным (например один раз в день).

Сжатие изображения

Большинство веб-сайтов используют большие несжатые изображения. Вы можете уменьшить размер файла изображения на 20-80% без видимых изменений и легко ускорить сайт. WebPageTest покажет вам потенциальную экономию от сжатия на вкладке обзора производительности.

10 способов ускорить сайт на WordPress

Существует великолепный сервис TinyPNG.com, который сжимает изображения без ухудшения их исходного качества. Вы можете вручную загружать каждое изображение на TinyPNG, и обрабатывать его, прежде чем загрузить на свой сайт, но это хлопотно. Можно установить плагин Compress JPEG & PNG images, получить ключ API, после чего все загружаемые в медиатеку изображения будут автоматически оптимизированы и сжаты. Бесплатная версия плагина позволяет обработать 100 изображений в месяц, чего будет вполне достаточно для большинства пользователей. Вы также можно попробовать и другие аналоги, такие как Optimus, WP Smush и Imagify.

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

Качественный хостинг

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

Убедитесь, что ваш хостинг использует PHP 7 или выше. Обновление до PHP 7 даст вам значительное повышение производительности без каких-либо других изменений на вашем сайте. Используйте плагин Display PHP Version, чтобы узнать, какая у вас версия PHP, и плагин PHP Compatibility Checker, чтобы убедиться, что ваша текущая тема и плагины совместимы с самой последней версией PHP.

Аудит плагинов

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

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

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

Используйте плагин P3 Profiler (или аналоги), чтобы увидеть, как каждый плагин влияет на время загрузки вашего сайта. Также просмотрите исходный код ключевых страниц на вашем сайте и в каталоге wp-content/plugins узнайте количество и размер файлов CSS и JS, которые использует этот плагин.

С помощью Debug Bar и Query Monitor, определите наличие ошибок и медленных запросов. Изучите детали, чтобы определить, какие плагины отвечают за эти ошибки и запросы.

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

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

Если вам повезет, то вы сможете выявить какой-нибудь неиспользуемый плагин, снижающий на 80% время загрузки, и вы просто удалите его, чтобы ускорить сайт. Иначе придется обращаться к профессиональным WordPress-разработчикам для проведения более тщательного аудита и выработки рекомендаций по оптимизации.

Минимизируйте CSS и JavaScript

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

Плагины и темы загружают файлы CSS и JS для реализации их функциональности. Они часто эти файлы оставляют «как есть», т.е. с большим количеством места и встроенными комментариями. Это в свою очередь увеличивает размер файла, что негативно сказывается на производительности. «Минимизировать» файлы — значит удалить лишние данные, что в некоторых случаях позволяет уменьшить размер файла на 25-50%, а значит, еще больше ускорить сайт.

Некоторые плагины для кеширования будут самостоятельно минимизировать файлы, например WP Rocket. Также можете использовать отдельный плагин, например, Autoptimize. Если вы используете CloudFlare в качестве CDN, то данный сервис также уменьшает и минифицирует передаваемые данные.

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

Кеширование статического контента

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

Для этого можно использовать плагины (WP Rocket и аналоги), или же вручную добавить следующий код в файл .htaccess:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/gif A31536000
ExpiresByType image/jpg A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/png A31536000
ExpiresByType image/bmp A31536000
ExpiresByType text/css A31536000
ExpiresByType text/javascript A31536000
ExpiresByType application/javascript A31536000
ExpiresByType application/x-javascript A31536000
</IfModule>

Используем CDN

Вес вашего сайта большей частью определяют изображения, файлы CSS и JS. Можно загружать их намного быстрее, разместив их в CDN. Сеть доставки контента (CDN) — это географически разнородная группа серверов с специализированным ПО, которые ускоряют доставку (“отдачу”) контента конечному пользователю, т.е. помогает ускорить сайт.

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

Очистка таблицы wp_options в базе данных

Данные технические изменения стоит делать только опытным веб-разработчикам!

В таблице wp_options ядро WordPress ​​и плагины сохраняют данные со всего сайта. И большая часть этих данных установлена ​​на «автозагрузку» (атрибут autoload по умолчанию ставится в «yes»), т.е. это означает, что они загружаются на каждой странице вашего WordPress-сайта.

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

Сначала необходимо отсортировать пункты таблицы с автозагружаемыми данными по их размеру. Ниже представлена SQL команда для вывода топ 10 пунктов:

SELECT option_name, length(option_value) AS option_value_length FROM wp_options WHERE autoload='yes' ORDER BY option_value_length DESC LIMIT 10;

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

10 способов ускорить сайт на WordPress

Уменьшаем HTML-разметку

Одна из часто игнорируемых областей оптимизации — это HTML-разметка. Откройте исходный код ваших страниц и посмотрите на разметку. Возможно вы удивитесь, насколько HTML взаимосвязан с определенными функциями вашего сайта. Могут ли эти функции быть более эффективными и нужны ли они вообще?

WordPress довольно щедро раздает CSS-классы, и они могут суммироваться. К примеру, несколько лет назад мне попался сайт, у которого было большое меню (около 80 пунктов), и примерно 30% всей HTML-разметки составляло только меню. Уменьшая количество ненужных CSS-классов, можно значительно сократить разметку.

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

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

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

Например на одном клиентском сайте, мы обнаружили, что виджет Twitter, показывающий последние твиты, сильно замедляют работу сайта. Он загружал много изображений, около 30 общим весом около 2,9 МБ. Удалив этот виджет, мы уменьшили размер страницы более чем на 50% и добились скорости загрузки страницы — менее 2-х секунд.

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

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

Также вы можете использовать вкладку «Domains» в отчете WebPageTest, чтобы увидеть количество запросов, которые ваш сайт генерирует к каждому домену.

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

Источник: www.billerickson.net

Вконтакте
Linkedin
Telegram
Whatsapp

Похожие статьи

Исправляем проблемы с CLS (Cumulative Layout Shift)


Нововведение Google, Core Web Vitals, поглотило мир SEO и веб-разработки, и многие сайты заняты оптимизацией своего Page Experience, чтобы повысить фактор ранжирования. Метрика Cumulative Layout Shift доставляет проблемы многим сайтам, поэтому давайте рассмотрим способы решения любых проблем с данной метрикой


У этой статьи пока нет комментариев


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


Ваш адрес email не будет опубликован.

18 − девять =