- Регистрация
- Сообщения
- 733
- Реакции
- 39
Оптимизация скорости сайта на WordPress — одна из тех тем, которые, казалось бы «перекопаны» вдоль и поперек, но продолжают вызывать постоянный интерес. И, если задуматься, это совсем неудивительно. WP остается самой популярной CMS, на которой работает более 43% сайтов. Технически же неискушенный пользователь может легко потеряться в «океане» созданных для WordPress технологий и возможностей настройки.
В этой статье мы расскажем о первых этапах оптимизации работы WordPress. Это будет полезно тем, кто только начинает использовать CMS или начал задумываться об эффективности ее работы. Конечно, в кратком обзоре будет приведен далеко не полный список возможных мер, но выполнение этих шагов позволит вам быстро добиться первых ощутимых результатов и сделать WP-сайт более быстрым.
Что такое скорость сайта
Термином скорость загрузки сайта принято обозначать время, за которое веб-страница или мультимедийный контент загружаются с серверов хостинга и отображается в браузере. Чем больше скорость загрузки страницы, тем меньше времени проходит между нажатием на ссылку и ее полным открытием.Для пользователей скорость загрузки страниц является самым очевидным показателем технического качества сайта, наряду со временем отклика сервера, адаптивностью и продуманным UX-дизайном. Качественный сайт, загружающийся за пару секунд, имеет больше шансов привлечь и удержать посетителей. Это хорошо отражается как на ранжировании веб-ресурса поисковиками, так и на бизнес-факторах — продажах, LTV, ROI.
На какую скорость ориентироваться
Как понять, что ваш сайт имеет оптимальную скорость загрузки страниц или, наоборот, работает слишком медленно? Измерить ее с помощью специализированных онлайн-инструментов:
- PageSpeed Insights (PSI) — мощный SEO-инструмент от Google измеряет скорость загрузки мобильной и десктопной версии сайта по 6 параметрам, дает общую оценку по шкале от 1 до 100, а также предлагает список конкретных решений по оптимизации.
- WebPageTest — бесплатный инструмент с открытым исходным кодом позволяет запускать тесты сайтов с использованием 25 различных браузеров.
- Pingdom Website Speed Test — полезный и простой в использовании веб-инструмент, который одинаково эффективно могут использовать для выявления проблем производительности как новички, так и опытные администраторы сайтов.
- SpeedTest.me — сервис измеряет, как быстро открываются страницы сайта в разных странах мира.
- Website Grader — этот сервис тестирования производительности также предлагает рекомендации по оптимизации скорости сайта, высылаемы на указанную почту.
Согласно подсчетам маркетологов, 47% клиентов интернет-магазинов ожидают, что время загрузки страницы составит менее двух секунд, а 40% пользователей покинут сайт на третьей секунде ожидания.
Так что же может считаться «мгновенной» загрузкой сайта? Инженеры Google прибегли к помощи нейронауки и обнаружили, что этот показатель равен 100 миллисекундам. Именно столько затылочная доля нашего мозга хранит визуальную информацию в виде сенсорной памяти.
Как ускорить WP-сайт
На время загрузки страницы влияет множество факторов — от качества услуг хостинг-провайдера и общей производительности веб-сайта, до особенностей выбранной CMS и взаимодействия с сайтом самого пользователя. Ниже мы постараемся остановиться на тех шагах по оптимизации производительности WP-сайта, которые может сделать непосредственно владелец или администратор веб-ресурса.Шаг #1 — тщательно подбираем хостинг
Быстрый и постоянно доступный веб-сайт начинается с продуманного подхода к выбору его хостинг-площадки. Начать следует с подбора технических параметров, подходящих WP-сайту. Тут важно помнить, что, по сути, WordPress — это однопоточное PHP-приложение, на скорость работы которого будет сильно влиять частота CPU. Чем выше CPU процессора на хостинге, тем быстрее CMS сможет формировать HTML-документ, а пользователь получать запрошенные данные с сайта.Не менее важно правильно определиться с типом хостинга. На первый взгляд, может показаться хорошей идеей залить новый сайт на эконом-тариф виртуального хостинга, который при минимальных затратах сулит полноценное размещение в Сети. Но сайт будет делить площадку с неустановленным количеством «соседей», способных «оттягивать» общие ресурсы на себя. Разумнее выбрать более продвинутые варианты размещения — VDS, выделенный сервер или облачный хостинг, которые стоят немного дороже, но предлагают надежное разделение ресурсов и лучшую безопасность.
Шаг #2 — используем легкую тему
Тема WordPress — набор файлов, определяющих то, как будет выглядеть ваш сайт. Темы с большим количеством динамических элементов, ползунков, виджетов, социальных иконок могут добавить странице функциональность и привлекательность, одновременно делая ее тяжелее. Это будет создавать веб-серверу и браузеру дополнительную нагрузку, а в перспективе понизит скорость сайта.Лучшее решение — использовать легкие темы, чей функционал не содержит ничего лишнего. Обычно они уже установлены в WordPress по умолчанию. Другой вариант — попробовать одну из легких, сверхбыстрых WP-тем, вроде Astra, OceanWP, Hello Elementor, GeneratePress или Neve, которые идеально оптимизированы для уменьшения времени загрузки. Для многофункционального веб-сайта нужно обратить внимание на темы, использующие производительный фреймворк, например, Bootstrap или Foundation.
Шаг #3 — оптимизируем размер картинок
Качественные и тяжелые изображения — один из основных факторов увеличения размера веб-страницы. Чтобы красивые картинки не отразились на скорости загрузки, нужно найти надежный способ уменьшить их размер без ущерба для качества.Можно оптимизировать каждое изображение вручную с помощью специальных инструментов, например, расширений для браузера, Photoshop, устанавливаемых утилит (PngQuant, FileOptimizer) или многочисленных онлайн-сервисов, вроде TinyJpg. Но обработка каждой картинки по отдельности занимает много времени. К счастью, в WordPress есть плагины практически на любой случай жизни, включая автооптимизацию изображений.
Плагины WP для автоматического уменьшения изображений
- Smush — один из самых популярных плагинов для lossless-сжатия изображений индивидуально или в пакетном режиме. Инструмент хорошо автоматизирован и может эффективно работать по принципу «включил и забыл».
- Optimus — оптимизирует загружаемые изображения WordPress до 70% от первоначального размера без потери качества.
- EWWW Image Optimizer — плагин прост в использовании и может на лету оптимизировать новые и ранее загруженные изображения размером до 150 Mb.
- ShortPixel Image Optimizer — плагин отличает хорошее качество сжатия (до 90% от оригинала), а также отсутствие лимитов на размер загружаемого файла на бесплатном тарифе.
- Imagify — плагин способен уменьшить изображение на 98% без потери качества, однако бесплатно обработает лишь файлы до 2 Mb.
Шаг #4 — минимизируем JS, CSS и HTML
Еще один надежный способ «облегчить» сайт и добавить ему скорости — уменьшить размер файлов HTML, JavaScript и CSS. Это означает удаление из кода ненужных символов, которые не требуются для загрузки, например:- пробелов;
- символов новой строки;
- комментариев;
- разделителей блоков.
Для решения этой задачи можно воспользоваться специальными плагинами — они помогут оптимизировать CSS, JS и HTML файлы WP-сайта.
Например, популярный плагин Autoptimize может произвести конкатенацию или объединение всех подключаемых на странице скриптов и стилей в единый файл. Ссылка на файл со CSS-стилями помещается в начало HTML документа, а ссылка на аналогичный файл с JS-файлами и встроенными скриптами — в его конец. Похожие операции с CSS и JS производит плагин Better WordPress Minify.
Шаг #5 — используем расширенные механизмы кэширования
Плагины для кэширования WordPress — например, W3 Total Cache (W3TC), W3 Super Cache или WP Rocket — автоматизируют сложные задачи по добавлению правил кэширования к отдельным элементам веб-сайта. Сочетание подобных плагинов с передовыми механизмами кэширования (Varnish) поможет заметно повысить скорость работы WordPress и уменьшить время загрузки веб-сайта.Шаг #6 — используем CDN
Скорость загрузки сайта зависит, в том числе и от того, насколько далеко находятся посетители от места, где физически размещен сайт. Приблизить веб-ресурс к его географически отдаленной аудитории помогает распределенная инфраструктура «сетей доставки контента» или CDN (Content Delivery Network).CDN-сервис хранит копию (кеш) сайта в различных ЦОД, расположенных в разных уголках планеты. С его помощью пользователи из разных городов и стран могут быстро получить запрашиваемый контент веб-страницы из ближайшей к себе локации, а не с серверов, где хостится сам ресурс. Каждый поставщик услуг CDN предоставляет удобные плагины для WordPress, которые можно активировать в CMS буквально парой кликов.
Популярные CDN-сервисы:
- Cloudflare — 200+ дата-центров с кеширующими DNS-серверами в более, чем 100 странах; глобальная граничная пропускная способность сети составляет 172 Тбит/с; среднее время задержки ~20 мс, к сервису напрямую подключено свыше 11000 сетей, включая всех крупных интернет- и облачных провайдеров.
- Akamai — более 4200 точек присутствия и более 1400 сетей, охватывающих 135+ стран; глобальная пропускная способность сети свыше 300 Тбит/с; среднее время задержки ~25 мс.
- G-Core Labs — 140+ точек присутствия на разных континентах; глобальная пропускная способность сети свыше 75 Тбит/с; среднее время задержки ~30 мс.
- Amazon CloudFront — 410+ точек присутствия в 48 странах мира, кеширующая сеть включает свыше 275 000 серверов; среднее время задержки ~24 мс.
- CDN77 — глобальная пропускная способность 90+ Тбит/с; сеть включает 3000+ местных интернет-провайдеров.
- Key CDN — кеширующие серверы расположены в 40 дата-центрах 30 стран мира.
Шаг #7 — включаем сжатие GZIP
GZIP — технология сжатия файлов с сайта перед их отправкой в браузеры пользователей. Все современные браузеры автоматически распаковывают сжатые таким образом файлы и отображают их без потерь или изменений качества. GZIP сокращает время загрузки файла и делает веб-ресурс быстрее.Как работает сжатие GZIP / Источник - kinsta.com
Возможно, на вашем WP-сайте уже включена GZIP-компрессия? Узнать это можно за пару кликов — достаточно вбить URL в один из онлайн-сервисов, типа Check GZIP Compression или HTTP Compression Test. Если результат отрицательный, придется подключать GZIP вручную.
Как включить GZIP на WordPress:
- Использовать специальные плагины, такие как PageSpeed Ninja, WP Rocket, WP Super Cache или W3 Total Cache. Важно помнить, что используя плагины для GZIP-сжатия, рационально применять только один из них, чтобы не дублировать выполнение задачи и не нагружать серверные ресурсы.
- Добавить следующий код в конфигурационный файл веб-сервера .htaccess:
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>
Перед тем, как выбрать способ включения GZIP-сжатия, нужно помнить, что одновременно можно использовать только один вариант. Для оптимизации скорости предпочтительно выбрать второй способ, где сжатие происходит на веб-сервере, без участия PHP.
Шаг #8 — очищаем базу данных WordPress
Оптимизация или удаление ненужных данных из БД, сведет ее размер к минимуму, а также поможет уменьшить размер резервных копий. Помимо прочего необходимо удалить спам-комментарии, фейковых пользователей, старые черновики контента и ненужные темы. Подобное уменьшение размера баз данных и веб-файлов ускорит работу WordPress и сайта на этой CMS.Важный этап оптимизации баз данных — деактивация или удаление лишних плагинов.
Для их поиска можно использовать специальные плагины, вроде Advanced Database Cleaner и Database Cleanup. Если используемые плагины даже полезны, но излишне нагружают систему, можно поискать их функциональную альтернативу в виде сторонних сервисов (например, IFTTT, Zapier) для автоматизации или планирования задач.
Шаг #9 — сводим к минимуму внешние скрипты
Использование внешних скриптов на веб-страницах нагружает систему обработкой дополнительных данных и увеличивает общее время загрузки. Чтобы избежать этого, можно использовать лишь необходимый минимум скриптов, включая, например, счетчики и инструменты аналитики (Яндекс.Метрика, Google Analytics) или системы комментирования (Disqus, Cackle).Шаг #10 — отключаем пингбеки и трекбеки
Pingbacks и trackbacks (протоколы обратного отслеживания) — это два основных компонента WordPress, которые предупреждают пользователя каждый раз, когда его блог или страница получает ссылку. Однако постоянная генерация запросов к WordPress может привести к нежелательной нагрузке на ресурсы сервера. К тому же пингбеки и трекбеки широко используются при DDoS-атаках на сайты.К счастью, этот WP-функционал легко отключается и заменяется внешними сервисами для проверки ссылок на сайте, например, Google Search Console или Яндекс.Вебмастер.
Отключить пингбеки и трекбеки можно в «WP-Admin» → «Настройки» → «Обсуждение». Просто снимите флажок «Разрешить уведомления о ссылках из других блогов (уведомления и обратные ссылки)». Отключить самостоятельные пингбэки (которые создает ваш сайт) можно с помощью одного из специализированных бесплатных плагинов, например, No Self Pings.
Шаг #11 — отказываемся от Apache2 в пользу Nginx + php-fpm
Самый популярный веб-сервер Apache2 имеет критический для скорости WP-сайта архитектурный недостаток — при отдаче статического контента, каждый запрос порождает дополнительный процесс. Это приводит к излишней загрузке памяти и плохо влияет на производительность.Чтобы разгрузить ресурсы сервера, следует заменить Apache2 на Nginx. Этот веб-сервер не берет на себя функции обработки PHP, передаёт эти запросы на выделенный обработчик php-fpm. Пакеты с сервером Nginx можно найти в стандартных репозиториях Ubuntu и других популярных ОС семейства Linux.
Шаг #12 — следим за актуальностью версии PHP
WordPress в основном написан на PHP, поэтому производительность ПО не в последнюю очередь зависит от того, установлена ли на хостинге последняя версия этого интерпретатора. Проверить актуальность версии WordPress PHP можно с помощью специальных плагинов, типа Display PHP Version или Version Info, отображающих эту информацию прямо в консоли управления.Чтобы WP-сайт работал как часы, мало одной актуальной версии PHP. Не менее важно своевременно обновлять версии ядра WordPress, используемых тем и плагинов.
Шаг #13 — используем инструменты профилирования и дебагинга
PHP плагины — одновременно и сильная, и слабая сторона WordPress. Они значительно расширяют функциональность CMS, но при плохой оптимизации моментально становятся «тормозом» для админки и страниц WP-сайта.Инструменты профилирования PHP или профилировщики, вроде Code Profiler или F12-Profiler, проверяют производительность работы кода на каждом из трех основных этапов загрузки WordPress и находят слабые места для дальнейшей отладки (дебагинга).
Альтернативой профилировщикам могут стать универсальные плагины для мониторинга безопасности, например, Health Check, SiteAlert, Debug Bar и Query Monitor. Эти инструменты работают по принципу швейцарского ножа и проверяют все показатели, влияющие на «здоровье» CMS — от актуальности версии PHP до наличия мусорных плагинов.
Шаг #14 — внедряем мониторинг показателей скорости
Оптимизация скорости сайта на WordPress далеко не разовое мероприятие. Чтобы закрепить полученный результат, важно постоянно отслеживать время загрузки и улучшать его. Автоматический мониторинг сервера и сайта можно наладить с помощью пары универсальных опенсорс-инструментов Prometheus + Grafana. Первый осуществляет сам мониторинг и хранит метрики, а второй визуализирует собранные данные.Шаг #15 — меняем URL-адрес входа в WordPress
По умолчанию для входа на WP-сайт используется URL «domain.com/wp-admin/». Но все боты, хакеры и скрипты, конечно же, знают об этом и будут атаковать админку брутфорсом (перебором) и другими доступными способами. Изменив URL-адрес, можно стать менее очевидной мишенью для киберпреступников. Так можно лучше защитить себя от кибератак, уменьшив нагрузку, которую отказывают на сервер постоянные обращения спам-ботов, а также помочь предотвратить распространенные ошибки, типа 429 Too Many Requests.Изменить URL-адрес входа в WordPress можно с помощью одного из плагинов:
- Change wp-admin login;
- WPS Hide Login;
- Custom Login URL (CLU);
- WP Security Hardening;
- Hide wp-admin / wp-login.php.
Заключение
Самая очевидная польза от описанных выше шагов — неизменно высокое качество загрузки сайта, которое обязательно оценят его посетители. Быстрый сайт на WordPress активнее поднимается в поисковом рейтинге, облегчает задачу оценки для поисковых систем, повышает коэффициент конверсии, улучшает такие важнейшие поведенческие факторы, как время пребывания на странице и показатель отказов.Опытному WP-админу очевидно, что исчерпывающее руководство по данной теме будет включать гораздо больше пунктов. Например, в этот список можно добавить такие пункты, как блокировка паразитных скан-ботов, запрет на загрузку аудио/видео файлов на сайт, настройка «ленивой загрузки» (LazyLoad) изображений, отключение хотлинкинга. Следует понимать, что цель данной статьи — помочь с первыми шагами в оптимизации времени загрузки страниц.
А как вы ускоряете свой сайт на WordPress?
Материал подготовлен на основе статьи Shams Sumon с использованием открытых источников и авторскими дополнениями.
