Ускорение сайта на 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 - разгоняем максимум скорости

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

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

СЕГОДНЯ ЧИТАЮТ

Как встроить PDF в WordPress + 7 бесплатных плагинов на выбор

Спасибо, Adobe! Если бы не эта компания, хранение документов в Интернете, как мы знаем, было бы не таким полезным и простым, как сегодня. Поэтому, естественно, мы...

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

Как тщательно почистить и оптимизировать базу данных Вордпресс. Вопрос очистки базы данных Wordpress возникает часто. Опытным путём я нашел решение, которые позволяют почистить базу...

Как работать с облачной библиотекой темы WordPress Newspaper

Многие любители темы Newspaper наверно заметили, что в последний год появился плагин tagDiv Cloud Library, который создаёт на вашем сайте доступ к онлайн библиотеке шаблонов...

Видео уроки по работе с UPDS для Instantcms 2

Представляем вам видео уроки по созданию правил и работе с универсальным парсером UPDS 2, который позволяет добавлять любой контент на сайты Instantcms и Wordpress....

Введение в веб-разработку Laravel, основы и факты

Несколько дней мы слегка поспорили о том, есть ли у разработчиков Laravel будущее в ИТ-индустрии. Этот аргумент основывался на том факте, что Laravel не...

10 плагинов для всплывающих форм на сайте WordPress 2019, плюсы и минусы, описание

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

ПОХОЖИЕ МАТЕРИАЛЫ

Редакторы изображений Tune WP | Дополнение WPSSO для повышения резкости фото WordPress

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

Вопросы и ответы по теме Woodmart (обновляется )

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

TotalContest Pro – Плагин WordPress для конкурса фото, аудио и видео

TotalContest - это мощный плагин для проведения онкурсов WordPress, предназначенный для проведения и управления конкурсами и соревнованиями на вашем сайте. Он был разработан, чтобы...

Content-visibility: новое свойство CSS, повышающее скорость и рендеринг сайта

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

Хак Woocommerce для отображения цену в руб и грв

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

BulletProof Security плагин WordPress: безопасность, сканер, файрвол

Защита безопасности сайта на WordPress: Сканер вредоносного кода, Файрвол, защита формы авторизации, создание резервных копий базы данных, анти-спам и многое другое. Смотрите раздел Основные...