Ускорение сайта на WordPress — разгоняем максимум скорости

Итак решил немного заняться ускорением сайта на примере ok2web.ru. Для начала я сниму несколько показателей, которые определяют его скорость, далее проведу некоторые эксперименты по разным направлениям и после этого сравню результаты. Для проведения экспериментов по ускорению сайта установлена тема NewsPaper, которая очень качественно сделана и популярна среди разхработчиков информационных сайтов на WordPress. Но по умолчанию в PageSpeed у меня показывает 69 скорость для мобильных и 80 скорость для компьютеров. Вроде бы неплохой результат, но тем не менее попробуем добиться большего.

Начало снимаем результаты скорости сайта

Итак для начала мы проверим сайт на трёх сервисах оценки скорости сайта, это гугл PageSpeed, gtmetrix, pingdom. Как правило этих трёх сервисов хватает чтобы оценить скорость работы сайта. Ну и конечно в консоли снимем результаты. 

Результаты проверки в сервисах перед началом ускорения

Gtmetrix результаты проверки

Ускорение сайта на WordPress - разгоняем максимум скоростиУскорение сайта на WordPress - разгоняем максимум скорости

Мы видим, что показатели мягко говоря слабоваты. Оценка 78% по PageSpeed и 59% по Yslow, а общая загрузка идёт за 6.3 секунды, при весе сайта в 1.61 мб и 140 запросов. Попробуем просто повторить еще раз. После повтора результаты одинаковы.

Теперь проверим через Pingdom 

Ускорение сайта на WordPress - разгоняем максимум скорости

Оценка тоже слабовата. на уровне 75% и время открытия 2 секунды. Сайт быстрее 71% других сайтов, что явно маловато. Но пингдом кстати дал неплохую оценку я считаю 

Гугл pageSpeed оценка скорости

Делаю тест и получаю вот такие результаты. 

Ускорение сайта на WordPress - разгоняем максимум скоростиУскорение сайта на WordPress - разгоняем максимум скорости

Для компьютера пишет:

Отличная работа! При создании этой страницы вы учитывали наши рекомендации, поэтому она будет удобной для пользователей.
 
  • Предложения по оптимизации;
  • Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы Сократите CSS
  • Оптимизируйте изображения
  • Используйте кеш браузера

 Мифы и практика скорости сайтов на WordPress

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

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

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

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

Этапы ускорения и результаты

Переходим к настройке и оптимизации. Наша задача, улучшить результаты. Начну я пожалуй с самого тяжелого: оптимизация картинок. Обычно картинки являются самым таким тяжелым местом для оптимизации. С учётом того, что на сайте нет больших картинок и они носят скорее функцию визуализацию и оживления материалов, я уменьшу их размер и качественные характеристики путём сжатия. 

Шаблон NewsPaper позволяет добавить в function темы строчку, которая отрегулирует размер. Мы помним, что вес сайта был 1.6 мегабайта и из них графика это 31% веса. 

Для оптимизации я вставляю в function темы следующую строку кода.

add_filter( 'jpeg_quality', create_function('', 'return 75;' ) );

Этот код регулирует качество картинок относительно оригиналов. Теперь я ставлю плагин для регенерации всех картинок Force Regenerate и запускаю его. Вообще у меня обычно стоит Image Optimiser но здесь надо не просто уменьшить размер, но и перегенерировать картинки, поэтому пришлось поставить дополнительный плагин.

После обхода Force Regenerate — картинки наоборот стали весить больше. Пришлось снова их оптимизировать Image Optimizer. Строку оставил, но сделал 2 прохода Image Optimizer, после чего прошёлся снова с проверкой.

Ускорение сайта на WordPress - разгоняем максимум скоростиУскорение сайта на WordPress - разгоняем максимум скорости

Результаты заметно увеличились. Теперь загрузка мобильной вышло на зеленое и стала на уровне 90%, а для компьютеров 85%. Уже неплохо. Особенно хороший рост у мобильных. Но пойдём дальше и сейчас попробуем перекинуть загрузку всех скриптов и стилей в футер страницы.

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

remove_action( 'wp_head', 'wp_print_styles', 8 );

remove_action( 'wp_head', 'wp_print_head_scripts', 9 );

который добавил в function.php темы. Посмотрим что покажет теперь загрузка. Результаты практически не изменились. Так что решать каждому стоит это делать или нет.

А вот какие результаты стали в pingdom после этих оптимизаций.

Ускорение сайта на WordPress - разгоняем максимум скорости

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

Дополнение к статье от 16 ноября 2017.

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

После переборов плагинов и вариаций, я остановился на варианте использования Fastest cache и Autoptimise. C помощью первого я делаю все основные настройки, а второй добивает некоторые мелочи. В итоге мои показатели выросли.

Ускорение сайта на WordPress - разгоняем максимум скорости

А вот какие показатели скорости зафиксировал в панели

Ускорение сайта на WordPress - разгоняем максимум скорости

 

Пока вот. Загрузка на уровне 0.190 миллисекунды. Но в целом я еще думаю займусь этим более детальнее и на уровне сервера возможно установлю varnish.

Еще немного скринов по скорости как стало. Сначала pingdom затем gtmetrix 

Ускорение сайта на WordPress - разгоняем максимум скорости

 

Ускорение сайта на WordPress - разгоняем максимум скорости

4 КОММЕНТАРИИ

  1. Для улучшения скорости сайта ok2web.ru можно применить следующие меры:

    1. Оптимизировать изображения: уменьшить размер файлов изображений, использовать форматы с меньшим весом (например, JPEG вместо PNG), установить атрибуты width и height для изображений.
    2. Включить кэширование: настроить правильные заголовки кэширования на сервере, чтобы браузер сохранял ресурсы на дольше и не загружал их заново при повторных посещениях.
    3. Минифицировать и объединить CSS и JavaScript файлы: удалить неиспользуемый код и комментарии, объединить файлы, чтобы уменьшить количество запросов к серверу.
    4. Оптимизировать базу данных: очистить устаревшие данные, оптимизировать таблицы, использовать кэширование запросов.
    5. Использовать Content Delivery Network (CDN): разместить статические файлы (CSS, JavaScript, изображения) на серверах CDN, чтобы пользователи получали контент из ближайшего по географии сервера.
    6. Установить кеширование на стороне клиента: использовать Local Storage и IndexedDB для хранения и кеширования данных на стороне пользователя.
    7. Оптимизировать серверную конфигурацию: настроить компрессию данных (GZIP), использовать HTTP/2 протокол, вынести статический контент на отдельный домен.

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

  2. Дополнение:
    Для повышения скорости сайта ok2web.ru можно использовать несколько методов. Во-первых, оптимизировать изображения, уменьшив их размер и выбрав оптимальный формат (например, JPEG для фотографий и PNG для логотипов). Также стоит обратить внимание на минификацию HTML, CSS и JavaScript кода для сокращения его размера. Другой полезной техникой является кэширование страниц и ресурсов, чтобы уменьшить количество запросов к серверу. Также можно использовать CDN (Content Delivery Network) для более быстрой доставки контента на разных серверах по всему миру. Наконец, важно удалить все неиспользуемые или устаревшие плагины и скрипты, которые могут замедлять загрузку сайта. Применение этих методов поможет увеличить скорость загрузки и повысить удобство использования ок2web.ru.

  3. Итак, для начала проведения экспериментов по ускорению сайта была выбрана тема NewsPaper на популярной платформе WordPress. Однако, по умолчанию сайт имеет скорость 69 для мобильных устройств и 80 для компьютеров в оценке PageSpeed. Хотя этот результат уже неплохой, мне хочется достичь большего ускорения.

    Для начала я решил снять несколько показателей, которые определяют скорость сайта. Для этого я использовал три сервиса: Google PageSpeed, gtmetrix и pingdom. Также были записаны результаты в консоли.

    После проведения проверки, я обнаружил, что показатели скорости сайта оставляют желать лучшего. Оценка PageSpeed составляет всего 78%, а Yslow — 59%. Время загрузки сайта составляет 6,3 секунды, при этом его размер составляет 1,61 Мб и есть 140 запросов. Мне стало ясно, что необходимо продолжить работу по улучшению скорости.

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

ОСТАВЬТЕ ОТВЕТ

Пожалуйста, введите ваш комментарий!
пожалуйста, введите ваше имя здесь

56 + = 65

OK2WEB
OK2WEB
Более 12 лет занимаюсь разработкой и продвижением сайтов. Городские порталы, информационные и новостные сайты. Сейчас в основном разрабатываю интернет магазины и коммерческие сайты. Если у вас есть вопросы пишите, стараюсь оперативно ответить и помочь.

Плагин Wordfence: как настроить сканирование сайта для проверки файлов и страниц

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

Плагин Wordfence: список основных проблем при сканировании сайта и их решение

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

Как ChatGPT может помочь в разработке сайта, ищем полезные варианты

ChatGPT может помочь вам создать свой веб-сайт. Хотя он не может создать реальный веб-сайт и опубликовать его в Интернете — для этого вам следует проверить эти конструкторы веб-сайтов AI — он все же может быть очень полезным компаньоном в процессе создания. Правильно, с ChatGPT на вашей стороне многие элементы процесса создания веб-сайта...

Что такое ChatGPT и OpenAi, статистика, полезные данные и описание работы

С момента своего запуска ChatGPT стал вирусным как похожий на человека чат-бот, который отвечает пользователям на основе того, что они вводят. Инструмент может отвечать на вопросы и давать ответы на основе набора данных из 300 миллиардов слов и 175 миллиардов параметров. В будущем он обязательно...

WooCommerce — Сообщение о подтверждении перед удалением товара из корзины и авто обновление корзины

Бывает задача сделать всплывающее сообщение, чтобы подтвердить, хотите ли вы удалить что-то из корзины магазина. Это требуется для явного согласия, попробуем это добавить. На самом деле довольно просто, все, что вам нужно, это немного jQuery, как показано ниже: И сразу же решим частую задачу, как...

Обзор новой версии Woocommerce 7.4 — основные изменения, журнал разработки

Вышло обновление плагин интернет магазина Woocommerce в котором большое количество добавлено изменений, исправлений. Полный обзор всех новых деталей в этой статье. Журнал изменений 7.4.0 2023-02-18 WooCommerce Fix — добавлена ​​поддержка сортировки по включенному параметру. №36215 Исправление — Разрешить навигацию по вкладкам продуктов без запроса несохраненных изменений #36235 Исправление —...