Сразу хочу отметить, что плагин может исказить отображение различных элементов сайта, чаще завязанных на JavaScript (особенно это относиться к премиальным темам, которые часто во многом зависят от JS). Конечно, после деактивации плагина, обычно все возвращается на свои места. Все же, если вы с ним не работали, рекомендую почитать про настройку и принцип работы плагина Autoptimize. Так же в этой статье не будет подробных разъяснений по работе плагина.
Проводить все тесты я буду на своем блоге BlogForest.ru, на конкретной странице: Aliexpress. Почему именно она? На момент написания этой статьи, она одна из самых тяжелых.
Сам блог находится на стадии наполнения контентом и закрыт от индексирования поисковиками, на нем нет никакой посещаемости, соответственно нет нагрузки на сервер и мы сможем получить, более точные показатели.
Замеры производительности без плагина Autoptimize.
Начнем пожалуй с PageSpeed Insights.
Что ж, страшные цифры, с которыми мы будем бороться.
Почему такие цифры? Я использую тяжелую тему оформления. Для примера, размер моего сокращенного style.css составляет 4654 строки, не включено Gzip сжатие (которое включать отдельно не обязательно, если вы используете Autoptimize), 17 активных плагинов, много JS и CSS файлов, которые подгружаются в верхней части сайта. Так же не включено кэширование, которое я обычно делаю с помощью плагина WP super cache.
Следующий тест основополагающий, с помощью него мы будет отслеживать скорость загрузки сайта, а точнее страницы: Pingdom tools.
Замерять скорость мы будем всегда из Стокгольма. Конечно, реальная скорость сайта по СНГ будет немного выше, т.к. мой сервер находится в РФ, на хостиге Fozzy. Но наша задача не измерить скорость, а проверить эффективность плагина. В данном сервисе можно отследить какой файл, запрос или картинка грузиться долго при загрузке сайта.
Средняя скорость загрузки после 10 тестов.
В любых тестах скорости загрузки сайта, в которых результат выражается в секундах, имеет место быть погрешности. Мы постараемся ее снизить и будем проводить по 10 замеров, с выводом средней скорости. Если мы не увидим существенных изменений в дальнейших тестах, можно будет сделать вывод что плагин значительно не улучшает производительность. Однако, у него есть и другие плюсы, о них чуть позже.
Обратите внимание на графы:
- Requests — это количество запросов, которые необходимо обработать серверу(хостингу), чтобы загрузить страницу сайта, в моем случае 94 http запроса.
- Page size — размер загружаемой страницы, обычно, больше всего «весят» картинки, сокращение HTML, JS, CSS должно так же уменьшить вес страницы, что благорприятно скажется на скорости загрузки сайта.
Тест плагина Autoptimize
В настройках плагина есть три основных пункта:
- Параметры HTML
- Опции JavaScript
- Опции CSS
Мы протестируем каждый пункт по отдельности. Так же я не буду использовать сжатие Autoptimize, которое выключается в этом пункте (т.е. если галочка стоит, сжатие выключено):
Т.к. можно включить динамическое GZIP сжатие и вовсе не использовать для этой цели Autoptimize, и хотя он использует статическое сжатие (что лучше), все же, хотелось бы увидеть ускорение сайта, за счет сокращения и объединения JS и CSS файлов. Но, в конце теста проверим результат и со сжатием.
После сохранения нужных параметров в настройках плагина, нужно перейти на тестируемую страницу, дабы создался кэш. Иначе, при первом замере скорости, будет создаваться кэш и страница загрузится медленнее, нежели после его создания. После каждого теста кэш будет удалятся.
Оптимизация кода HTML
В PageSpeed Insights у моей темы HTML находится в «зеленой» зоне, и дальнейшая оптимизация не требуется:
Но проверку сделаем:
Без плагина средняя скорость была 2,549 сек. Мы потеряли 0.057 сек. в скорости. Любой плагин, своей работой, создает дополнительную нагрузку, а т.к. HTML у меня сокращен, мы получили обратный эффект.
Если у вас не сокращен HTML, возможно вы получите небольшой прирост, в других случаях не рекомендую использовать эту настройку.
Оптимизация кода JavaScript (JS)
Как я уже писал в начале статьи, после включения данного пункта, иногда возможны ошибки. Там же имеется ссылка на статью по настройке плагина, где описываются возможные решения.
Сейчас, нам нужно определиться, улучшается ли производительность, если мы интегрируем JS код в HTML (3 пункт на верхнем скриншоте) и проверим «Принудительная загрузка JS в верхней части сайта»(2 пункт на верхнем скриншоте).
Снова цифры схожие, без плагина было 2,549 сек., с минимальным перевесом, побеждает JS без интеграции в hml со скоростью в 2,369 сек.
Можно сделать вывод: Объединение и сокращение JS файлов, при любых настройках, дает минимальный, но прирост.
Количество запросов уменьшилось до 67, за счет объединения JS файлов.
А размер страницы уменьшился на 0.2 мб, за счет сокращения кода JS файлов.
Едем дальше…
Оптимизация кода CSS
Самый большой и запутанный раздел, мы не будем тестировать «Generate data: URis for images?», так как он у меня не заработал.
Первое что мы протестируем «Совокупную интеграцию CSS в HTML»(4 пункт, на скриншоте выше), забегая вперед, я получил снова лучший результат без интеграции. Как и в случае с JS, разработчик рекомендует интегрировать CSS в HTML, и в этом случае мы должны получить больший прирост в скорости. Но у нас выходит по-другому, судя по цифрам.
В связи с этим я решил протестировать CSS вместе с «Оптимизацией HTML», результат вы можете лицезреть ниже:
И хотя интегрированный CSS работает быстрее c оптимизацией HTML, все-равно в лидерах остается CSS (без интеграции).
Итак, у нас остается два пункта, «удаление шрифтов гугла» и «полная интеграция CSS в HTML:
Мы протестировали все разделы, настало время увидеть что у нас из этого вышло…
Финальные результаты теста Autoptimize
Лучшие результаты, исходя из цифр у нас получились CSS и JS (Без интеграции в HTML)
Посмотрим как они вместе будут работать, а так же, финальная таблица со всеми лучшими показателями, которые мы получили в каждом разделе:
Финальная средняя скорость, без сжатия: 2,352 секунды.
Мы не получили значительного прироста скорости (который у вас может быть значительно выше, т.к. в моей теме большинство файлов были уже сокращены).
У плагина есть и другие плюсы:
1) Увеличение рейтинга в PageSpeed Insights, за счет уменьшения количества файлов, которые загружаются в верхней части сайта и оптимизации кода.
Было: Для мобильных — 28 , Для компьютеров — 35 .
Стало: Для мобильных — 36, Для компьютеров — 44.
Один JS файл который пришлось добавить в исключение и 2 CSS, это Google шрифты и сам объединенный файл CSS(который можно полностью убрать при использовании пунктов «Inline all CSS» и «Inline and Defer CSS» ).
Лично для меня, основное преимущество плагина заключается, не ускорении сайта, а именно в удалении блокирующего кода в верхней части страницы в Page Speed Insights. Для этого я использую пункт «Inline and Defer CSS«.
Он может дать значительный прирост рейтинга в PSI(если не останется других блокирующих стилей). У меня остались google шрифты, поэтому PSI мне не добавил очков. Но в будущем, я планирую от них отказаться.
При использовании «Inline and Defer CSS», скорость отрисовки страниц для посетителей, остается на таком же уровне, как до использования плагина, что есть хорошо.
Но время полной загрузки может быть немного больше, нежели при использовании других настроек:
2) Статическое сжатие, однозначно лучше чем динамическое сжатие, т.к. сервер не тратит время и процессорную мощность на сжатие файлов.
Ну и напоследок, посмотрим, каких результатов можно добиться с включенным сжатием…
Статическое сжатие Autoptimize vs Динамическое сжатие Gzip
Мы не будем отключать плагин и оставим сокращенные CSS и JS, что бы проверить работу именно сжатия.
Скорость загрузки примерно одинаковая, но ваш сервер со статическим сжатием, сможет выдержать большую посещаемость, нежели с динамическим.
в PageSpeed Insights получились такие результаты:
Для мобильных — 59
Для компьютеров — 70
Эти цифры значительно лучше, чем те которые мы получили в начале статьи, конечно это не предел. Как минимум нужно еще использовать кэширующий плагин, который даст, значительный прирост в скорости загрузки.
Если Вам понравилась статья, подпишитесь на рассылку (справа вверху).
До встречи на BlogForest.ru!
Оставить комментарий