Как ускорить сайт на Wordpress - принципы и рекомендации

WordPress. Ускорение загрузки сайта

Проведу комплекс работ по ускорению сайта на любом движке «под ключ». Узнать больше →

C 2018 года Google официально признал скорость сайта одним из факторов ранжирования страниц в мобильной поисковой выдачи. В 2020 году учитывать скорость работы сайта стал и Яндекс.

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

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

Из чего складывается время загрузки

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

Этап загрузки Возможные проблемы

Обращение к серверу и его отклик

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

Загрузка таблиц стилей (CSS)

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

Подгрузка веб-шрифтов

Использование подключаемых шрифтов также сопровождается микропаузами и замедляет загрузку страницы, кроме того – препятствует отображению текста до окончания подгрузки файлов со шрифтами. Рекомендуется использовать свойство font-display: swap для указания браузеру, что до окончания подгрузки веб-шрифтов можно отобразить текст стандартными системными шрифтами. Также настоятельно советую отказаться от использования сторонних CDN вроде Google Fonts и всегда переносить файлы со шрифтами на хостинг сайта.

Загрузка и обработка скриптов из «шапки» сайта (Javascript)

Использование JS-кода связано с двумя основными проблемами. Во-первых, скрипты отрабатываются не на стороне сервера, а на стороне браузера пользователя – поэтому на смартфонах с маломощными процессорами и малым объемом оперативной памяти загрузка страницы будет идти дольше, чем на мощном компьютере. Во-вторых, расположенный в коде страницы ниже скрипта контент не будет загружаться пока скрипт не отработает. Рекомендуется оставить в «шапке» сайта только критичный для отрисовки страницы код, а весь остальной перенести в футер. Также при подгрузке скриптов следует по возможности пользоваться атрибутами async и defer.

Обращения к базе данных

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

Загрузка контента страницы

Содержимое страницы начнет отображаться в браузере пользователя сразу после того как будет подгружен весь отображающийся на ней контент. И если сам текст грузится за доли секунды, то наличие в коде страницы большого количества тяжелых изображений или яваскриптов может существенно увеличить время загрузки. Как можно исправить ситуацию? Во-первых, оптимизировать всю графику, пережимая изображения до тех размеров, в которых они будут реально отображаться в теле страницы. Во-вторых, использовать технологию отложенной подгрузки (lazy loading) для всего, что только возможно: изображений, iframe-вставок с видео, JS-кода всяких онлайн-консультантов и прочих маркетинговых виджетов.

Правило 1: Стремитесь к простоте

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

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

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

Как ускорить сайт на WordPress - принципы и рекомендации
Является ли ад на скриншоте проблемой WordPress? Нет, все дело в плагинах.

Помните: при разработке плагина создатель не преследует цели гармонично встроить его конкретно в ваш сайт. Его задача – сделать универсальный продукт, подключаемый к любому сайту за пару кликов мыши.

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

Для многих оптимизаторов станет откровением, но зачастую можно отказаться даже от «таких необходимых» плагинов как Yoast SEO или All in One SEO Pack. Микроразметку можно зашить в код шаблона, а для прописывания Title и мета-тегов Description использовать кастомную функцию.

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

Правило 2: Используйте свежие версии PHP

Подтвержденный многочисленными исследованиями факт: PHP 7 работает значительно быстрее, чем PHP 5.

Более того: каждый минорный релиз работает чуть быстрее предыдущего. PHP 7.3 демонстрирует лучшую производительность по сравнению с PHP 7.2, а PHP 7.4 работает еще быстрее PHP 7.3.

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

Правило 3: Оптимизируйте графику

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

Повторю еще раз два ключевых момента:

  1. Все изображения должны быть уменьшены до того размера, в котором они будут отображаться на сайте. Загружать картинку в разрешении 1000×1000 пикселей чтобы потом она демонстрировалась на сайте в разрешении 150×150 пикселей – пустая трата пользовательского трафика и замедление скорости загрузки страницы на время, необходимое для скачивания излишне больших файлов.
  2. Перед выгрузкой на сайт картинки необходимо дополнительно сжимать через специальные приложения или сервисы для оптимизации графики. При незаметном на глаз потере качества в пределах 1-3% они позволяют уменьшить размер файла на 30-70%. Из сервисов рекомендую Optimizilla, из приложений – JPEGmini Pro (Windows, macOS) или Optimage (macOS).

В 90% случаев сталкиваясь с медленно загружающимися страницами сайта я обнаруживаю на них неоптимизированные изображения. Самый запоминающийся случай – когда фотографию с зеркальной камеры весом в 15 Мб загрузили на сайт в качестве иллюстрации размером менее 300px в сквозной блок с анонсом мероприятия.

Стоит ли конвертировать графику в активно пропагандируемый Google формат WebP? По моим наблюдениям сконвертированные в WebP изображения практически не выигрывают в плане размера файлов у оптимизированных изображений в традиционных форматах JPG и PNG.

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

Правило 4: Проводите чистку и оптимизацию БД

Как ускорить сайт на WordPress - принципы и рекомендации
Интерфейс WP-Optimize

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

Чем старее сайт и чем активнее на нем ведутся работы по добавлению и редактированию контента – тем более замусоренной будет БД.

Для оптимизации баз данных удобно использовать бесплатную версию WP-Optimize.

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

Как ускорить сайт на WordPress - принципы и рекомендации
Интерфейс PageSpeed Ninja

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

Популярные решения для кэширования на WordPress – плагины WP Fastest Cache, WP Super Cache, W3 Total Cache. Однако мне больше пришелся по душе плагин PageSpeed Ninja. Несмотря на относительную малоизвестность, он предлагает обширный выбор настроек для ускорения WordPress.

Помимо непосредственно кэширования, PageSpeed Ninja умеет создавать объединенные и минифицированные копии CSS и JS файлов, включать поддержку «ленивой подгрузки» изображений в один клик мыши – и не только. Настоятельно рекомендую к установке.

Последнее обновление статьи: 10 июля 2020 года

Оставьте комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *