Autoptimize — Тестирование плагина, замер производительности.

Тестирование Autoptimize, насколько плагин увеличивает скорость загрузки сайта. Сравнение статического сжатия с динамическим сжатием.


СОДЕРЖАНИЕ
  1. Замеры производительности без плагина Autoptimize.
  2. Тест плагина Autoptimize
  3. Оптимизация кода HTML 
  4. Оптимизация кода JavaScript (JS)
  5. Оптимизация кода CSS
  6. Финальные результаты теста Autoptimize
  7. Статическое сжатие Autoptimize vs Динамическое сжатие Gzip
Здравствуйте уважаемые читатели BlogForest.ru! В этой статье я хочу протестировать плагин Autoptimize, который должен помочь нам оптимизировать тему и скорость загрузки сайта.

Сразу хочу отметить, что плагин может исказить отображение различных элементов сайта, чаще завязанных на JavaScript (особенно это относиться к премиальным темам, которые часто во многом зависят от JS). Конечно, после деактивации плагина, обычно все возвращается на свои места. Все же, если вы с ним не работали, рекомендую почитать про настройку и принцип работы плагина Autoptimize. Так же в этой статье не будет подробных разъяснений по работе плагина.

Проводить все тесты я буду на своем блоге BlogForest.ru, на конкретной странице: Aliexpress. Почему именно она? На момент написания этой статьи, она одна из самых тяжелых.

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

Замеры производительности без плагина Autoptimize.

Начнем пожалуй с PageSpeed Insights.

BlogForest.ru-PSI-KompBlogForest.ru-PSI-Mobile

Что ж, страшные цифры, с которыми мы будем бороться.

Почему такие цифры? Я использую тяжелую тему оформления. Для примера, размер моего сокращенного style.css составляет 4654 строки, не включено Gzip сжатие (которое включать отдельно не обязательно, если вы используете Autoptimize), 17 активных плагинов, много JS и CSS файлов, которые подгружаются в верхней части сайта. Так же не включено кэширование, которое я обычно делаю с помощью плагина WP super cache.

Следующий тест основополагающий, с помощью него мы будет отслеживать скорость загрузки сайта, а точнее страницы: Pingdom tools.

PingDom

Замерять скорость мы будем всегда из Стокгольма. Конечно, реальная скорость сайта по СНГ будет немного выше, т.к. мой сервер находится в РФ, на хостиге Fozzy. Но наша задача не измерить скорость, а проверить эффективность плагина. В данном сервисе можно отследить какой файл, запрос или картинка грузиться долго при загрузке сайта.

Средняя скорость загрузки после 10 тестов.
Без плагинов

В любых тестах скорости загрузки сайта, в которых результат выражается в секундах, имеет место быть погрешности. Мы постараемся ее снизить и будем проводить по 10 замеров, с выводом средней скорости. Если мы не увидим существенных изменений в дальнейших тестах, можно будет сделать вывод что плагин значительно не улучшает производительность. Однако, у него есть и другие плюсы, о них чуть позже.

PingDom pervii result

Обратите внимание на графы:

  • Requests — это количество запросов, которые необходимо обработать серверу(хостингу), чтобы загрузить страницу сайта, в моем случае 94 http запроса.
  • Page size — размер загружаемой страницы, обычно, больше всего «весят» картинки, сокращение HTML, JS, CSS должно так же уменьшить вес страницы, что благорприятно скажется на скорости загрузки сайта.

Тест плагина Autoptimize

В настройках плагина есть три основных пункта:

  • Параметры HTML
  • Опции JavaScript
  • Опции CSS

Мы протестируем каждый пункт по отдельности. Так же я не буду использовать сжатие Autoptimize, которое выключается в этом пункте (т.е. если галочка стоит, сжатие выключено):

Опции Autoptimize ‹ BlogForest.ru

Т.к. можно включить динамическое GZIP сжатие и вовсе не использовать для этой цели Autoptimize, и хотя он использует статическое сжатие (что лучше), все же, хотелось бы увидеть ускорение сайта, за счет сокращения и объединения JS и CSS файлов. Но, в конце теста проверим результат и со сжатием.

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

Оптимизация кода HTML 

Скриншот Autoptimize

В PageSpeed Insights у моей темы HTML находится в «зеленой» зоне, и дальнейшая оптимизация не требуется:

Page speed

Но проверку сделаем:

тест html в autoptimize

Без плагина средняя скорость была 2,549 сек. Мы потеряли 0.057 сек. в скорости. Любой плагин, своей работой, создает дополнительную нагрузку, а т.к. HTML у меня сокращен, мы получили обратный эффект.

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

Оптимизация кода JavaScript (JS)

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

Js оптимизация

Сейчас, нам нужно определиться, улучшается ли производительность, если мы интегрируем JS код в HTML (3 пункт на верхнем скриншоте) и проверим «Принудительная загрузка JS в верхней части сайта»(2 пункт на верхнем скриншоте).

Оптимизация BlogForest JS

Снова цифры схожие, без плагина было 2,549 сек., с минимальным перевесом, побеждает JS без интеграции в hml со скоростью в 2,369 сек.

Можно сделать вывод: Объединение и сокращение JS файлов, при любых настройках, дает минимальный, но прирост.

PingDom JS result

Количество запросов  уменьшилось до 67, за счет объединения JS файлов.

А размер страницы уменьшился на 0.2 мб, за счет сокращения кода JS файлов.

Едем дальше…

Оптимизация кода CSS

Самый большой и запутанный раздел, мы не будем тестировать «Generate data: URis for images?», так как он у меня не заработал.

сss autoptimize

Первое что мы протестируем «Совокупную интеграцию CSS в HTML»(4 пункт, на скриншоте выше), забегая вперед, я получил снова лучший результат без интеграции. Как и в случае с JS, разработчик рекомендует интегрировать CSS в HTML, и в этом случае мы должны получить больший прирост в скорости. Но у нас выходит по-другому, судя по цифрам.

В связи с этим я решил протестировать CSS вместе с «Оптимизацией HTML», результат вы можете лицезреть ниже:

autoptimize css

И хотя интегрированный CSS работает быстрее c оптимизацией HTML, все-равно в лидерах остается CSS (без интеграции).

Итак, у нас остается два пункта, «удаление шрифтов гугла» и «полная интеграция CSS в HTML:

Оптимизация BlogForest autoptimize, remove & Inline

Мы протестировали все разделы, настало время увидеть что у нас из этого вышло…

Финальные результаты теста Autoptimize

Лучшие результаты, исходя из цифр у нас получились CSS и JS (Без интеграции в HTML)
Посмотрим как они вместе будут работать, а так же, финальная таблица со всеми лучшими показателями, которые мы получили в каждом разделе:

Оптимизация BlogForest finalnaia tablica

Финальная средняя скорость, без сжатия: 2,352 секунды.

Мы не получили значительного прироста скорости (который у вас может быть значительно выше, т.к. в моей теме большинство файлов были уже сокращены).

У плагина есть и другие плюсы:

1) Увеличение рейтинга в PageSpeed Insights, за счет уменьшения количества файлов, которые загружаются в верхней части сайта и оптимизации кода.

Было: Для мобильных — 28  , Для компьютеров — 35 .

Clip2net_160418223500 - Средство просмотра фотографий Windows
Стало: Для мобильных — 36, Для компьютеров — 44.

398285b64d

Один 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», скорость отрисовки страниц для посетителей, остается на таком же уровне, как до использования плагина, что есть хорошо.

Но время полной загрузки может быть немного больше, нежели при использовании других настроек:

Оптимизация BlogForest Inline and Defer

2) Статическое сжатие, однозначно лучше чем динамическое сжатие, т.к. сервер не тратит время и процессорную мощность на сжатие файлов.

Ну и напоследок, посмотрим, каких результатов можно добиться с включенным сжатием…

Статическое сжатие Autoptimize vs Динамическое сжатие Gzip

Мы не будем отключать плагин и оставим сокращенные CSS и JS, что бы проверить работу именно сжатия.

Оптимизация BlogForest New - Excel

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

в PageSpeed Insights получились такие результаты:

Для мобильных — 59

Для компьютеров — 70

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

Если Вам понравилась статья, подпишитесь на рассылку (справа вверху).

До встречи на BlogForest.ru!


Нравиться? Поделитесь с друзьями!

BlogForest

Создатель и администратор сайта.

Отправить ответ

avatar
4000
  Subscribe  
Подписаться на комментарии:
Выберите формат
Story
Formatted Text with Embeds and Visuals