Навесні ми зробили заміри на магазині клієнта з увімкненими нашими віджетами й без них. Результат був неприємний: наш власний скрипт додавав 3,3 секунди до LCP, головної метрики швидкості, за якою Google оцінює сторінку. Найпростіше було б цього не публікувати. Але зручніше пояснювати архітектуру на власних помилках, ніж на чужих, тому нижче розбір: що саме гальмувало, що ми змінили і як ви можете перевірити будь-який сторонній скрипт на своєму магазині.
Чому сторонній скрипт узагалі сповільнює магазин
Швидкість сторінки визначає не сума ваги всіх файлів, а те, що заважає браузеру намалювати головний екран. Сторонній скрипт шкодить трьома способами, і майже завжди справа не в самому коді віджета.
- Він конкурує за канал із головною картинкою. На повільному мобільному інтернеті смуга вузька. Якщо скрипт качається одночасно з фотографією товару, фотографія приїде пізніше, а саме вона зазвичай і є тим елементом, за яким міряють LCP.
- Він блокує розбір сторінки. Скрипт, вставлений без спеціальних інструкцій, змушує браузер зупинити роботу над версткою, доки не завантажиться й не виконається.
- Він качається щоразу заново. Якщо файл віддається без правильних заголовків кешування, кожен візит починається з повторного завантаження того самого коду.
Саме на першому пункті ми й обпеклися. Скрипт стояв із режимом завантаження, який дозволяє браузеру качати його паралельно й одразу виконувати, як тільки він приїде. Для аналітики це нормально, а для віджетів на повільному 4G шкідливо: код віджета не потрібен у перші секунди, а канал у картинки він забирає.
Що ми змінили: спершу спосіб підключення
Найбільший виграш дала не оптимізація коду, а два рядки в тезі підключення. Зараз магазин вставляє такий набір: підказка браузеру заздалегідь встановити з’єднання з нашим CDN, і сам скрипт із відкладеним виконанням.
- Відкладене виконання означає, що браузер спокійно домальовує сторінку, а код віджетів виконує після цього. Віджети перестають бути на критичному шляху: скільки б вони не важили, головний екран вони більше не затримують.
- Попереднє з’єднання економить час на встановлення захищеного з’єднання з нашим сервером. Браузер робить це заздалегідь, паралельно з іншими справами, а не в момент, коли скрипт уже потрібен.
Ці два рядки вже входять у код, який ви копіюєте в кабінеті, тож нічого налаштовувати не треба. Важливо лише вставити його туди, куди сказано в інструкції зі встановлення, і не розносити рядки по різних полях адмінки.
Потім розмір: три речі, які дали найбільше
Далі ми взялися за вагу самого файлу. Заміри робилися на збірці з усіма двадцятьма модулями одночасно, тобто на найважчому можливому варіанті: реальний магазин зазвичай вмикає три-п’ять віджетів і отримує файл значно менший.
Прибрали бібліотеку перевірки налаштувань
Кожен віджет має схему своїх налаштувань, і раніше бібліотека, що ці налаштування перевіряє, їхала в браузер покупця разом із кодом. Але перевіряти конфігурацію в браузері немає сенсу: вона вже перевірена в момент збірки. Тепер перевірка відбувається на нашому сервері, а в браузер потрапляє готовий результат. Мінус приблизно 50 КБ, які просто не мали там бути.
Винесли картинки з коду на CDN
Іконки подарунка у віджеті безкоштовної доставки були вшиті прямо в код у текстовому вигляді. Такий формат майже не стискається, тож ці іконки з’їдали близько сорока відсотків ваги модуля на проводі. Ми перенесли їх на CDN окремими файлами в сучасному форматі зображень із вічним кешем: браузер качає їх один раз і більше ніколи. Модуль безкоштовної доставки схуд із 17,2 до 9,8 КБ на проводі.
Навчилися вирізати непотрібне при збірці
Маска телефону містить таблицю з 227 країнами: маски, назви чотирма мовами, коди. Це 33 КБ із 50 КБ модуля. Але магазин, який доставляє тільки Україною, не потребує масок Гватемали. Тепер, якщо ви обмежили список країн, у збірку потрапляють тільки вони: модуль зменшується з 50,8 до 20 КБ. Це важлива ідея: бандл збирається персонально під ваш магазин і під ваші налаштування, а не роздається всім однаковим.
Віджети не витрачають процесор там, де їх немає
Вага файлу вирішує лише половину справи. Друга половина: скільки роботи код робить на кожній сторінці. Липка кнопка «Купити» потрібна лише на картці товару, мінімальна сума діє у кошику й на оформленні, а рекомендації тільки в кошику.
Тому кожен модуль знає, на яких типах сторінок він живе, а бандл на старті визначає тип поточної сторінки й запускає лише те, що доречно тут. На головній не запускається код кошика, на картці товару не крутиться логіка оформлення. Файл завантажується один і той самий, але процесорний час платиться тільки за потрібні модулі, а на мобільних це помітно.
Із тієї ж серії дрібниця, яка економить вам нерви: у робочій збірці вирізано всі службові повідомлення для розробників. Консоль вашого магазину лишається чистою, і в ній видно ваші власні помилки, а не наш шум.
Куди приїжджає файл і як довго він живе в кеші
Бандл роздається з нашого CDN за адресою, унікальною для вашого магазину. Кешування налаштоване так, щоб зміни доїжджали швидко, але браузер не качав те саме щоразу: файл вважається свіжим кілька хвилин, а після цього браузер ще добу може показувати збережену копію, поки у фоні тягне оновлену. Тому зміна порогу чи кольору доходить до покупців за хвилини, а повторні візити не платять за завантаження повторно.
Картинки віджетів, навпаки, позначені як незмінні з роком кешування: їх браузер качає один раз. Коли треба замінити іконку, ми публікуємо файл під новим ім’ям, а не перезаписуємо старий.
Головне не те, скільки важить віджет, а те, чи стоїть він на шляху в головної картинки. Приберіть його з критичного шляху, і вага перестає бути питанням.
Як перевірити швидкість свого магазину за п’ять хвилин
Не вірте нікому на слово, у тому числі нам. Будь-який сторонній скрипт перевіряється безкоштовно й самостійно:
- Відкрийте PageSpeed Insights і виміряйте мобільну версію картки товару, а не головної: саме картка вирішує продажі.
- Запишіть показники LCP та CLS.
- Вимкніть віджети в кабінеті, зачекайте кілька хвилин і виміряйте ту саму сторінку ще раз.
- Порівняйте. Різниця й буде чесною ціною віджетів для вашого магазину.
- Заміряйте двічі-тричі поспіль: результати одного прогону стрибають, і однією цифрою легко себе обманути.
Якщо магазин повільний і без віджетів, шукати причину треба не в них. Найчастіше це важкі фотографії товарів без стиснення, кілька рекламних скриптів і чатів одночасно та відео на головній. У цьому випадку мобільна конверсія втрачається ще до того, як покупець побачить будь-який віджет.
Що ще попереду
Чесно про плани: найбільший наступний крок, а саме розділити файл на дві частини, спільний код віджетів і маленький файл із налаштуваннями вашого магазину. Тоді спільна частина кешуватиметься між магазинами й новим покупцям часто не доведеться качати її взагалі. Це помітна архітектурна зміна, і поки вона не зроблена, ми про неї говоримо як про план, а не як про факт.
Подивитися віджети та їхній вплив на магазинЧасті питання
Чи сповільнюють віджети сайт інтернет-магазину?
Будь-який сторонній код має ціну, але вирішує спосіб підключення. Наш скрипт підключається з відкладеним виконанням і попереднім з’єднанням із CDN, тому не стоїть на критичному шляху й не конкурує з головною картинкою за канал. Найпростіша перевірка: заміряйте картку товару в PageSpeed Insights з віджетами й без них.
Скільки важить скрипт віджетів?
Збірка з усіма двадцятьма модулями важить 72,4 КБ на проводі у стисненому вигляді. Реальний магазин зазвичай вмикає три-п’ять віджетів, тож його файл помітно менший: бандл збирається персонально під магазин і містить тільки ввімкнені модулі.
Чи впливають віджети на позиції в Google?
Опосередковано, через швидкість сторінки: Core Web Vitals враховуються при ранжуванні. Саме тому віджети винесено з критичного шляху завантаження. Прямого впливу на індексацію вони не мають, бо додаються поверх готової сторінки й не змінюють її вміст для пошукових систем.
Чи качається файл віджетів при кожному відкритті сторінки?
Ні. Файл кешується браузером: кілька хвилин вважається свіжим, далі ще добу може показуватися збережена копія з фоновим оновленням. Тому повторні візити не платять за повторне завантаження, а ваші зміни налаштувань доходять до покупців за хвилини.
Чи впливає кількість увімкнених віджетів на швидкість?
Так, але менше, ніж здається. Бандл збирається під ваш магазин, тож кожен вимкнений віджет просто не потрапляє у файл. Крім того, модулі запускаються лише на релевантних типах сторінок: код кошика не працює на головній, а код картки товару не працює на оформленні.