Итак решил немного заняться ускорением сайта на примере ok2web.ru. Для начала я сниму несколько показателей, которые определяют его скорость, далее проведу некоторые эксперименты по разным направлениям и после этого сравню результаты. Для проведения экспериментов по ускорению сайта установлена тема NewsPaper, которая очень качественно сделана и популярна среди разхработчиков информационных сайтов на WordPress. Но по умолчанию в PageSpeed у меня показывает 69 скорость для мобильных и 80 скорость для компьютеров. Вроде бы неплохой результат, но тем не менее попробуем добиться большего.
Содержание
Начало снимаем результаты скорости сайта
Итак для начала мы проверим сайт на трёх сервисах оценки скорости сайта, это гугл PageSpeed, gtmetrix, pingdom. Как правило этих трёх сервисов хватает чтобы оценить скорость работы сайта. Ну и конечно в консоли снимем результаты.
Результаты проверки в сервисах перед началом ускорения
Gtmetrix результаты проверки
Мы видим, что показатели мягко говоря слабоваты. Оценка 78% по PageSpeed и 59% по Yslow, а общая загрузка идёт за 6.3 секунды, при весе сайта в 1.61 мб и 140 запросов. Попробуем просто повторить еще раз. После повтора результаты одинаковы.
Теперь проверим через Pingdom
Оценка тоже слабовата. на уровне 75% и время открытия 2 секунды. Сайт быстрее 71% других сайтов, что явно маловато. Но пингдом кстати дал неплохую оценку я считаю
Гугл pageSpeed оценка скорости
Делаю тест и получаю вот такие результаты.
Для компьютера пишет:
- Предложения по оптимизации;
- Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы Сократите CSS
- Оптимизируйте изображения
- Используйте кеш браузера
Мифы и практика скорости сайтов на 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, после чего прошёлся снова с проверкой.
Результаты заметно увеличились. Теперь загрузка мобильной вышло на зеленое и стала на уровне 90%, а для компьютеров 85%. Уже неплохо. Особенно хороший рост у мобильных. Но пойдём дальше и сейчас попробуем перекинуть загрузку всех скриптов и стилей в футер страницы.
Перенос загрузки стилей и скриптов в футер страницы. решение двойственное конечно. Во первых получается некрасивый вид загрузки, сначала сбоку возникают названия, потом загружается страница. Для того чтобы перенести все скрипты и стили в футер я использовал код
remove_action( 'wp_head', 'wp_print_styles', 8 );
remove_action( 'wp_head', 'wp_print_head_scripts', 9 );
который добавил в function.php темы. Посмотрим что покажет теперь загрузка. Результаты практически не изменились. Так что решать каждому стоит это делать или нет.
А вот какие результаты стали в pingdom после этих оптимизаций.
Статью еще буду дополнять по мере проведения новых экспериментов. И конечно хотелось бы услышать ваши рекомендации и пожелания.
Дополнение к статье от 16 ноября 2017.
Прошло немного времени с написания и таки зачесалось мне покопаться дальше и попробовать ещё больше ускорить. Но я решил изменить чуть подход, перекопал кучу плагинов кеша и в итоге собрал ту сборку, которая на мой взгляд оптимизирует работу максимально. Первый раз я увидел 100 из 100 для PageSpeed.
После переборов плагинов и вариаций, я остановился на варианте использования Fastest cache и Autoptimise. C помощью первого я делаю все основные настройки, а второй добивает некоторые мелочи. В итоге мои показатели выросли.
А вот какие показатели скорости зафиксировал в панели
Пока вот. Загрузка на уровне 0.190 миллисекунды. Но в целом я еще думаю займусь этим более детальнее и на уровне сервера возможно установлю varnish.
Еще немного скринов по скорости как стало. Сначала pingdom затем gtmetrix
