Как ускорить сайт на WordPress • WP Best

Почему скорость загрузки важна

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

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

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

На этой странице я собрал все известные мне, протестированные, работающие техники ускорения сайта на WordPress. Материал подойдет как для новичков, так и для более опытных веб-мастеров. Вы всегда найдете подходящие для себя идеи.

И если вы выполните предложенные рекомендации, то сможете получить высокую оценку по Pagespeed Insights. Но первоочередная задача, просто сделать страницы максимально быстрыми визуально.

Как увеличить скорость загрузки сайта

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

  1. Сбор информации — измерение текущей скорости загрузки сайта
  2. Отбор критических пунктов — те факторы, которые больше всего замедляют ваш сайт и дадут вам наилучший результат
  3. Этап реализации — вы принимаете решение сделать всё самостоятельно или делегировать

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

Сможете ли вы добиться 100%-го показателя скорости загрузки и гарантировать стабильность этого результата? Нет. Есть много разных факторов в скорости загрузки сайта, каждый из которых можно постоянно дорабатывать и в чем-то улучшать. Ускорение сайта это не одноразовая задача, по типу «сделал и забыл». Хотя многие техники работают перманентно, ваш сайт по-прежнему нуждается в своевременной и запланированной профилактике.

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

Точность показателей Pagespeed Insights

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

Ничего не имею против него, но вы должны понимать — он представляет всего лишь рекомендации. Которые не всегда выполнимы или необходимы.

Если вас интересуют подробности, поищите в поиске мифы о Google Pagespeed Insights.

Я же лично пользуюсь для измерения скорости сервисом GTMetrix.com, а также консолью браузера, потому что они показывают фактическую историю загрузки в виде таблицы (waterfall).

Именно реальная оптимизация важна для вас, ваших пользователей, и для продвижения сайта.

Делайте бэкапы заблаговременно

Делайте бэкапы перед любыми серьезными изменениями!

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

Возьмите в помощь следующие статьи:

Как измерить скорость загрузки с помощью онлайн сервисов

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

Вот как выглядит отчёт скорости загрузки в сервисе Gtmetrix.

Как измерить скорость загрузки WordPress в сервисе GTmetrix

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

Подробнее читайте в моей статье — Онлайн инструменты для измерения скорости.

Далее, предлагаю вам основные рекомендации по увеличению скорости загрузки.

Как ускорить сайт с помощью сокращения веса страницы

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

  • Включите Gzip сжатие — это первый шаг для снижения веса, и он всегда должен работать на вашем сайте.

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

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

Вы можете взять, например, код отсюда enable gzip compression via .htaccess.

Дальше.

  • Уменьшите размер исходного кода — сократите код HTML, JS и CSS. Для этих целей я рекомендую использовать плагин Autoptimize, потому что он простой в использовании и достаточно функциональный.

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

Ну и.

  • «Лидерами» по составлению веса для страницы, безусловно являются изображения.

Попробуйте сократить их количество. Если картинка не несет никакой смысловой нагрузки, быть может её стоит удалить?

Максимально сожмите и оптимизируйте все изображения. Про это я написал отдельную статью Оптимизация изображений.

Вы также можете воспользоваться компьютерной программой или теми сервисами, которые я указал в конце страницы.

Если в вашей медиабиблиотеке уже загружено большое количество файлов, воспользуйтесь плагинами EWWW Image Optimizer или Robin Image Optimizer для пакетного сжатия. Обрезайте очень большие размеры фотографий до загрузки на хостинг.

Еще одна очень частая проблема с изображениями — масштабирование в браузере.

Оптимизация размеров изображений

Если вы используете сервис Gtmetrix, вероятно вы заметили строку Serve scaled images .

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

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

Нужно пересоздать новые размеры всех изображений с помощью простого плагина Regenerate Thumbnails.

Премиум темы и определенные плагины создают собственные наборы размеров изображений, поэтому управлять ими становится сложнее. В этих случаях я часто пользуюсь плагином Simple Image Sizes.

На странице Настройки -> Медиафайлы он отображает все зарегистрированные размеры, позволяет изменить их(!), а также заново сгенерировать для выбранных типов записей.

Плагин Simple Image Sizes выводит информацию о всех зарегистрированных размерах изображений.

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

Поэтому уделите особое внимание графическим элементам вашего сайта — во многих случаях это решающий фактор скорости загрузки сайта.

Удалите, замените или оптимизируйте лишний код

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

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

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

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

Как ускорить сайт с помощью сокращения запросов

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

  • Объедините скрипты и стили, чтобы сократить число запросов, — плагин Autoptimize прекрасно с этой задачей справляется. Информацию по настройке этого плагина смотрите в отдельной статье — оптимизация загрузки скриптов и стилей.

Очень часто настройка плагина Autoptimize не требует технических знаний в работе сайта.

Сжатие и объединение HTML, JS, CSS в плагине Autoptimize
Как увеличить скорость загрузки сайта на WordPress с помощью Autoptimize

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

  • Настройте кэш браузера — задайте сроки хранения для статических ресурсов;

На многих серверах, обеспечивающих услуги хостинга, достаточно добавить следующий код в файл .htaccess.

Пример — Add Expires Header to WordPress.

  • Если в вашей теме много маленьких изображений — попробуйте объединить их в CSS спрайты.

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

Я успешно пользовался бесплатным онлайн сервисом для генерирования спрайт картинки вместе со стилями — CSS Sprites Generator.

Устанавливайте обновления!

Обновления это залог стабильности, безопасности, и скорости работы сайта.

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

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

Поэтому еще раз подчеркну.

Держите код вашего сайта обновленным.

Включите и настройте кэширование на сервере

Вы можете использовать популярные и простые плагины вроде WP Super Cache, Cache Enabler или другие альтернативы.

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

Оптимизация запросов к базе данных

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

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

Для более подробного профилирования кода, есть удобная команда wp-cli profile, помогающая с поиском медленного кода на разных стадиях загрузки сайта.

Оптимизация скорости WordPress с помощью CDN

На своем сайте я использую бесплатный план Cloudflare.

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

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

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

Ленивая загрузка это откладывание загрузки ресурсов, которые не участвуют в отображении видимой области страницы.

Отложенная загрузка может дать объемный прирост в скорости. Поэтому опция ленивой загрузки и её настройка есть во многих плагинах оптимизации: Autoptimize, Jetpack, Ewww Image Optimizer, WP Rocket, WP Fastest Cache, A3 Lazy Load и другие.

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

Для отложенной загрузки Youtube видео можно установить плагин WP YouTube Lyte.

Расширений для ленивой загрузки написано очень много. Но лучше придерживаться наиболее популярных вариантов, потому что они более протестированы сообществом. В оптимизации мне практически всегда хватает работы Autoptimize и A3 Lazy Load, разве что иногда необходимо исключить несколько классов или названий изображений из обработки, в случаях если оформление ломается.

Отложенная загрузка внешних скриптов

На сайте часто встречаются вставки скриптов внешних приложений: чаты, карты, метрики, vk, facebook и другие.

Универсальный способ отложенной загрузки через setTimeout после старта прокрутки страницы.

<script type="text/javascript">
var loaded = false;

window.addEventListener('scroll', () => {
    if (loaded === false) {
        loaded = true;
        
        setTimeout(() => {

            // здесь код виджета чата, метрики и др. 
        
        }, 1000)
    }
});
</script>

Способ загрузки файла внешнего скрипта в указанную позицию DOM дерева (на примере яндекс карты).

<div id="map"></div>
<script type="text/javascript">

setTimeout(function () { 
var elm = document.getElementById("map"); 
s = document.createElement('script');
s.src = '//api-maps.yandex.ru/services/constructor/1.0/js/...';
s.async = true;
s.onload = function () {
     document.dispatchEvent(new CustomEvent('scroll'))
}
elm.parentNode.insertBefore(s, elm.nextSibling);
 
 }, 5000)
</script>

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

Список вспомогательных онлайн сервисов и их назначение

Различные онлайн инструменты, которые вам пригодятся в процессе ускорения сайта.

  • Cжатие, редактирование, кадрирование и конвертирование изображений
    • Kraken.io Web Interface — сжатие изображений
    • Compressor.io — еще один инструмент сжатия без потерь
    • PicResize — кадрировать, повернуть, и изменить размер изображения
    • WebResizer — Изменить размер онлайн
  • CSS, HTML, JS Minifier
    • HTML Minifier — Сокращение размера HTML, включая стили и скрипты, присутствующие в разметке.
    • CSS Minifier — Сокращение размера каскадных стилей
    • JSCompress — Сжатие скриптов и файлов JS
    • UnMinify — обратный процесс, приведение сжатого кода в читаемый вид.

Моя услуга по ускорению сайта на WordPress

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

Желаю успехов в работе над ускорением вашего сайта!
Понравилась статья, делитесь ею и оставляйте комментарии.

Подписаться
Уведомление о
guest
10 Комментарий
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Vasili Eremenko
Vasili Eremenko
4 лет назад

А вот Jetpack вообще сильно грузит wordpress?

Иван
Иван
4 лет назад

Вот этого я не знаю.

Уже вам посоветовал использовать плагин p3 performance profiler, так вы получите общее представление об относительной производительности ваших плагинов.

Михаил
Михаил
2 лет назад

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

Михаил
Михаил
2 лет назад

Этот CDN сильно отличается от упомянутого вами Клаудфлейр не только охватом РФ. Он поддерживает интеллектуальную обработку запросов как Fastly. Поэтому авторизованные, комментирующие или использующие какой-либо функционал посетители пропускаются мимо кеша. А анонимное большинство получает страницы моментально, не нагружая хостинг.

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

По Host-tracker у меня было время загрузки, как у вас, порядка 4сек. C WP-Super-Cache 1.5сек. А с CDN меньше 1й.

trackback

[…] WordPress написаны десятки плагинов, ориентированные на увеличение скорости загрузки разным типом способов: включение gzip сжатия, задание […]

trackback

[…] себя как конечный инструмент для увеличения скорости загрузки сайта на WordPress, и улучшения показателей в Pagespeed […]

trackback

[…] Как ускорить сайт на WordPress […]

trackback

[…] Как ускорить сайт на WordPress […]

10
0
Оставьте комментарий.x
()
x
Пролистать наверх