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

Главная » Как увеличить скорость загрузки сайта на WordPress

Важность оптимизации

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

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

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

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

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

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

Процесс увеличения скорости загрузки сайта

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

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

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

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

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

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

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

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

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

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

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

Делайте бэкапы заблаговременно, а не после того как всё потеряли

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

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

к содержанию ↑

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

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

Вкладка PageSpeed GTmetrix

Я покажу вам как измерить скорость загрузки WordPress с помощью трех онлайн инструментов.

Из-за большого содержания пришлось вывести в отдельную статью. Читайте здесь — Онлайн инструменты для измерения скорости.

В следующих разделах даны основные рекомендации для увеличения скорости загрузки сайта на WordPress.
к содержанию ↑

Уменьшите вес страницы

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

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

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

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

Для хостинга nic.ru оптимизация немного другая. Вот самая толковая и рабочая статья, которую мне удалось найти и я ею успешно пользуюсь. Включение сжатия и кэширования на хостинге Ru-Center.

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

Дальше.

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

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

Ну и.

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

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

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

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

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

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

Если вы используете сервис Gtmetrix, вероятно вы заметили строку Serve scaled images (в переводе, отдавайте масштабированные изображения).

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

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

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

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

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

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

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

Удалите лишний код

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

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

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

Снизьте количество запросов

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

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

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

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

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

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

Опять же, я выделил в отдельную статью.

Смотрите выше настройку кэширования для хостинга ru-center. Для большинства других серверов достаточно добавить следующий код в файл .htaccess.

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

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

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

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

Настройки на стороне сервера для увеличения скорости загрузки WordPress

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

  • Не забывайте обновлять код вашего сайта

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

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

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

  • Включите и настройте кэширование на сервере, создание статических страниц — вы можете использовать популярный и простой плагин WP Super Cache или другие альтернативы.

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

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

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

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

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

Оптимизация с помощью CDN и снижение нагрузки на сервер

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

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

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

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

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

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

к содержанию ↑

Оставить заявку на решение проблем со скоростью загрузки сайта

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

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

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

avatar
4 Цепочка комментария
2 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
3 Авторы комментариев
МихаилИванИванVasili Eremenko Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
Vasili Eremenko
Гость

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

Иван
Гость

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

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

Михаил
Гость

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

Михаил
Гость

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

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

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

Пролистать наверх