Вводное слово

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

Высокая скорость загрузки это основное требование в работе современных сайтов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Измерение скорости загрузки 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 или WP Smush It для пакетного сжатия. Есть разумный вариант обрабатывать фотографии до загрузки на хостинг.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Объедините скрипты и стили в единичные запросы, — плагин 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 активно развивается. Его разработчики и авторы плагинов делают постоянные оптимизации и закрывают найденные дыры. Убедитесь, что у вас установлены последние версии.

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

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

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

И именно долгая загрузка на сервере создает этот печальный эффект ожидания, даже если эта задержка составляет всего 1 секунду.

Всё-таки, наверное W3 Total Cache лучше использовать на VPS и продвинутых планах.

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

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

Дополнительные меры для ускорения сайта.

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

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

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

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

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

  • 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
Гость
Vasili Eremenko

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

Иван
Гость
Иван

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

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

Михаил
Гость
Михаил

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

Михаил
Гость
Михаил

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

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

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