Замеры
Вес страницы с панелью объявлений: Bulletin vs WPFront vs HashBar
Мы поставили одну и ту же панель объявлений (одна строка текста и кнопка-ссылка вверху страницы) в одном и том же магазине с помощью Bulletin, WPFront Notification Bar и HashBar по очереди и измерили, что каждый плагин добавляет к странице.
- −83% JavaScript и CSS в Bulletin 3.17 по сравнению с 3.16 (81 КБ → 13 КБ gzip)
- 0 сдвигов макета: страница не прыгает, когда появляется панель
- +2 запроса, как у WPFront (у HashBar: +12)
Что каждый плагин добавляет к странице
Главная страница, гость, медиана 10 запусков. «Добавлено» — то, что плагин загружает сверх той же страницы без панели.
| Показатель | Bulletin 3.17 | WPFront | HashBar |
|---|---|---|---|
| Добавлено запросов | 2 | 2 | 12 |
| Добавлено JS + CSS (gzip) | 13 KB | 3 KB | 44 KB |
| Добавлено JS + CSS (без сжатия) | 60 KB | 8 KB | 182 KB |
| Сдвиг макета (CLS) | 0 | 0 | 0 |
Bulletin 3.16 vs 3.17
Та же панель, та же страница. Bulletin 3.17 готовит сообщение на сервере и выводит панель сразу на её месте, а не сдвигает её туда после загрузки страницы.
| Показатель | Bulletin 3.16 | Bulletin 3.17 |
|---|---|---|
| Добавлено JS + CSS (gzip) | 81 KB | 13 KB |
| Добавлено JS + CSS (без сжатия) | 228 KB | 60 KB |
| Сдвиг макета (CLS) | 0.046 | 0 |
Как мы измеряли
Мы загружали каждую страницу 11 раз в headless Chrome, каждый раз в новом браузере с пустым кэшем, отбрасывали первую загрузку и приводим медиану остальных 10. «Добавлено» — это файлы, которые появляются при активном плагине и которых нет на той же странице без плагина панели.
Одновременно был активен только один плагин панели, и каждый показывал одну и ту же панель вверху страницы: одна строка текста и одна кнопка-ссылка, оформление каждого плагина по умолчанию. Кэширование страниц было отключено. Всё остальное в магазине не менялось.
Bulletin 3.17.0 (Pro), WPFront Notification Bar 3.5.2 и HashBar 2.0.6. Bulletin 3.16.0 мы замерили тем же способом для таблицы «до и после».
Вопросы
Какой плагин панели объявлений самый лёгкий?
В нашем тесте меньше всего добавил WPFront Notification Bar: около 3 КБ. Bulletin 3.17 добавил 13 КБ, HashBar — 44 КБ. Ни один из трёх не вызвал сдвига макета, когда панель находилась вверху страницы.
Что изменилось в Bulletin 3.17?
Сообщения теперь преобразуются из Markdown на сервере, а не в браузере каждого посетителя, а панели вверху страницы выводятся сразу вместе со страницей. В сумме это сократило файлы Bulletin на фронтенде на 83% и убрало сдвиг макета.
Можно ли повторить этот тест?
Да. Конфигурация и методика описаны выше; тот же подход работает на staging-копии (тестовой копии) вашего сайта.