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

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

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

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

Эффективные SEO-метрики для отслеживания вовлеченности и эффективности контента

Отслеживание эффективности контента связано с изучением метрики вовлечённости , который раскрывает основные проблемы, связанные с контентом. SEO является ключевым компонентом успеха онлайн-бизнеса. Таким образом,...

Важность оформления и правильной подачи страницы “О нас” в интернет магазине

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

5 полезных советов по созданию эффективных дизайнов логотипов для сайта

Логотип - это первая линия идентификации клиентов и клиентов при работе и узнаваемости вашего бренда, это краеугольный камень любого успешного бренда. Хорошо сделанный дизайн...

Всплывающая форма обратной связи для WordPress

Сегодня я расскажу вам как я пытался сделать и в итоге сделал красивую форму всплывающей обратной связи для сайта на Wordpress. Это пригодится для...

Настройка SWAP, ускорение и стабилизация работы сервера

При инсталляции одного сервера я имел еще немного опыта и по совету серверного администратора установил небольшой swap в 512 мегабайт. Что такое swap в...

Рынок скриптов интернет магазинов 2017, обзор, статистика, оценка функционала.

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

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

10 причин открытия интернет-магазина для малого и среднего бизнеса

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

10 плагинов WordPress для создания форума: настройка, описание и управление

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

Улучшения и дополнения в WordPress 5.5 (Возможности и скриншоты)

Выпущена бета-версия WordPress 5.5, выход которой запланирован на 11 августа 2020 года. Это будет второй по значимости выпуск WordPress в этом году, и он...

Jetpack 8.7 добавляет функцию развертывания Tweetstorm, улучшает настройку поиска

Jetpack 8.7 был выпущен на этой неделе с потрясающей новой функцией, которая позволяет пользователям «развернуть» твитторм и опубликовать его в посте. Функция работает внутри блока Tweet. После...

Обзор улучшений и изменений в редакторе Gutenberg 8.5

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

Установка, настройка, оформление темы Woodmart – учимся ставить на сайт

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