Як пришвидшити інтернет-магазин на Magento — поради з оптимізації сайтів від експерта NIX

Оптимізація роботи важлива для всіх інтернет-магазинів. Адже це впливає на те, наскільки комфортним буде досвід користувачів. І якщо сайт буде повільним, потенційні покупці можуть відмовитися від покупки. Ба більше: низькі показники конверсії призводять до зниження сайту в результатах пошуку. Через це продажів стає ще менше — замкнуте коло! Тому треба завжди думати над оптимізацію інтернет-магазинів, зокрема й тих, що створені на CMS Magento. В своїй статті я зібрав 20 порад, які допоможуть підвищити швидкість роботи саме такого сайту.

1. Перевірте сторонні модулі

Глибокий аудит та тестування — з цього має починатися оптимізація будь-якого сайту. Лише потім можна переходити до покращення бекенду і фронтенду. Але в основному коді Magento 2 не так багато можливостей для цього. Тож головну увагу зосередьте на ваших платних або безплатних сторонніх модулях. Деякі з них суттєво погіршують продуктивність сайту.

По черзі увімкніть і відключіть кожен модуль та проведіть очищення кешу, а потім оцініть, як змінюється швидкість роботи сайту. Також протестуйте основні типи сторінок: від домашньої та категорій каталогу до сторінок продуктів та кошику. Якщо швидкість сайту збільшилася після відключення певних розширень, у вас вже є як мінімум декілька вузьких місць.

2. Протестуйте ресурси хостингу та серверу

Побудувати швидкий Magento-магазин на бюджетному VPS неможливо. Адже через складну структуру та особливі вимоги самої CMS-сайт не зможе впоратися з великим навантаженням. Тому для впевненості в тому, що ви завжди зможете якісно обробляти замовлення, варто звернутися до високопродуктивних серверів, де вам будуть доступні додаткові пам’ять та ресурси. Як варіант: обрати AWS-сервер, з яким у вас будуть гнучкі налаштування та масштабування потужності сервера.

3. Увімкніть функцію кешування

Дуже часто на сайтах на основі Magento 2 відключено кешування. Але достатньо увімкнути цю функцію, аби побачити миттєве збільшення швидкості роботи. Хоча іноді можуть підгальмовувати лише окремі сторінки, де вимкнено кешування.

Причин відключення кешування може бути дуже багато: від простого «забули про це» до відключення розробниками цієї функції для певного блоку в розмітці, через що кешування пропало для всієї сторінки. Тому краще за можливості налаштувати Varnish Cache замість стандартного Full Page Cache (якщо є така можливість, звичайно).

4. Використовуйте Varnish Cache

Varnish Cache пропускає всі запити до сайту на Magento через себе. І тому перед кожним відкриттям сторінки цей механізм перевіряє її наявність у кеші. Якщо сторінка є в пам’яті, Varnish Cache повертає її користувачеві звідти, не створюючи запит до самої Magento. При цьому такий кеш зберігається в оперативній пам’яті, що дозволяє надати відповідь впродовж усього 100-200 мс.

Також важливу роль відіграє вбудований інструмент під назвою health check, який проводить регулярну перевірку працездатності бекенда. Завдяки йому можна продовжувати надавати користувачеві кешований вміст — навіть якщо сам сайт не працює! Плюс цей інструмент можна застосувати для роботи з кількома бекендами. А ще Varnish Cache може підтримувати баланс навантаження між серверами та відключати неробочі.

5. Налаштуйте Redis

Redis є швидким сховищем із відкритим кодом для структур даних типу «ключ-значення». Усі операції читання та запису виконуються максимально оперативно, а резервні копії можна зберігати на диску або ж відновлювати в оперативній пам’яті. Redis найчастіше використовується саме як кеш, оскільки він зберігає всі дані у пам’яті.

Для нас важливе те, що у Magento 2 вже «з коробки» є підтримка Redis. Тому на таких сайтах можна використовувати таке сховище для кешування даних і сторінок та зберігання сесій. При цьому в Magento 2 записи кешу організовані в групи: конфігурації, розмітки, HTML-блоки тощо. Через це в інтернет-магазинах з широким асортиментом товарів кеш сайту буде просто величезним. В такому випадку використання Redis для серверного кешування надасть чимало переваг:

• Швидкість. Redis може виконувати до 110000 операцій SET на секунду та до 81000 операцій GET на секунду.
• Підтримка більшості розширених типів даних. Зокрема це списки, набори, відсортовані набори та хеші. Це надає вам більше гнучкості.
• Атомарність операцій. Такі операції виконуються повністю або не виконуються взагалі. Завдяки цьому механізму сервер Redis набуде оновленого значення, навіть якщо два клієнти одночасно звертаються до даних.
• Універсальність. Redis можна використовувати для кешування черг обміну повідомленнями та зберігання таких короткострокових даних, як сеанси вебзастосунків.
• Простота. Це сховище дуже легко встановити й налаштувати. Інсталяція може відбуватися з репозиторію. Також можна завантажити архів з останньою версією з офіційного сайту, скомпілювати його та запустити — все дуже просто.

6. Оптимізуйте середовище

Параметр, який використовується для оцінки швидкості завантаження сайту, називається TTFB, скорочення від Time To First Byte. Він показує час до отримання першого байту зі сторінки або час реакції сервера. Найчастіше цей показник є високим, тому необхідно перевіряти серверну складову сайту.

Насамперед варто приділити увагу базі даних. Коли сервер формує сторінки, він постійно звертається до БД для отримання певних даних. Наприклад, під час створення блоку «З цим товаром часто купують» виконується декілька запитів:

• ідентифікація поточного товару;
• визначення кількості разів, коли поточний товар було додано до кошика;
• пошук товару, який було додано до кошика разом із поточним продуктом;
• виключення незавершених замовлень;
• створення списку товарів, що найчастіше замовляються разом з поточним товаром.

Зі збільшенням кількості товарів та виконаних замовлень час на створення відповіді також збільшується. Для зменшення кількості запитів до бази даних можна зберігати вже створену відповідь у кеші. Тоді замість п’яти окремих запитів здійснюватиметься лише один!

Якщо ж у вас більш складні запити до БД, варто перевірити її структуру, а за необхідності — додати індекси та оптимізувати запити. Плюс я рекомендую перевірити версію PHP. Ще у 2020 році була представлена PHP 8. Вона значно більш продуктивна, аніж попередні версії. Але перед оновленням краще перевірити, чи сумісний сам сайт з новими версіями PHP.

Також я раджу підключити на проді та стейджі OPCache. Це дуже корисне розширення для PHP, яке допомагає збільшити продуктивність мови. Задля цього OPCache зберігає в оперативній пам’яті байт-код скрипта, який був попередньо скомпільований. Таким чином не треба при кожному запиті завантажувати та аналізувати скрипти. Завдяки цьому робота сайту на Magento стає більш швидкою, а ресурси сервера — заощаджуються.

А ще для оптимізації коду можна використовувати профайлер. Це може бути як вбудований у Magento 2, так і сторонній, більш комфортний в роботі Debug module.

7. Увімкніть стиснення GZIP

Браузер при відкритті сторінки завантажує різні типи файлів. І чим більший розмір цих файлів, тим довше відбувається весь процес. Аби підвищити продуктивність, можна активувати на рівні сервера GZIP-стиснення, яке підтримують усі сучасні браузери. Важливо пам’ятати: GZIP здійснює архівацію виключно тексту, а відео, зображення, аудіо та інші медіафайли залишаються без змін. Тож на сервері стискаються лише текстові дані, і вже браузер отримує їх та розпаковує.

Завдяки стисненню GZIP відбувається:

• зменшення розміру сторінок;
• прискорення передачі даних клієнту;
• покращується час до першого рендерингу сторінки.

8. Перевірте редиректи

Кожен редирект на сайті є додатковим запитом між браузером і сервером. Тож при переадресації збільшується час очікування сторінки та витрачаються зайві ресурси. Загальний час, який витрачається на цей процес, відомий як час прийняття-передачі, або RTT, від Round-Trip Time.

Переадресація кінцевої сторінки може бути визначена як наявність кількох редиректів із URL на фінальну сторінку. Це виглядає, наприклад, як переадресація abc.com на https://abc.com, а потім — на https://www.abc.com. Тож вам треба також переконатися у відсутності редиректів для статичних файлів.

9. Попрацюйте із зображеннями

Одне з найпомітніших покращень у показниках Google PageSpeed дає оптимізація зображень на сайті. Саме тому ви маєте перевірити формати та виконати їх стиснення. Наприклад, часто замість звичного JPEG використовується PNG, через що файл стає значно більшим. Але якщо конвертувати такі зображення у коректний формат, а потім стиснути, то розмір може зменшитися в кілька разів.

А ще всі сучасні браузери, зокрема й Safari від 14-ї версії, підтримують WebP, новий формат зображень. Він забезпечує найкраще стиснення — файли важать на 25-35% менше, ніж JPEG порівнянної якості.

10. Використовуйте атрибут srcset

Атрибут srcset надає браузеру набір зображень з інформацією про розмір кожного файлу, їх URL-адреси та інформацію про ширину зображення. Пари URL-ширина розділяються комами. Запис виглядає, наприклад, як image.jpg 1000w, що говорить: ширина зображення image.jpg становить 1000 пікселів. Завдяки цьому браузер обере ті файли, які найбільше підходять для конкретного випадку. А якщо у користувача, наприклад, Retina-подібний дисплей з високою щільністю пікселів, браузер врахує й це. 

Варто додати: в атрибуті src зберігається запасний варіант зображення для браузерів, які не підтримують атрибут srcset.

11. Не забувайте про Lazy Loading

Lazy Loading — це спосіб оптимізації, при якому завантаження деяких медіафайлів відкладається до тієї миті, коли вони будуть дійсно потрібні користувачеві. Це стосується файлів, які не є критичними для відображення сторінки або взаємодії з користувачем. Наприклад, немає сенсу відразу завантажувати зображення, які розташовані поза критичною зоною сайту або взагалі у футері. А тому їх відображення знадобиться лише тоді, коли користувач прокрутить сторінку до цих зображень.

12. Використовуйте font-display

Для шрифтів є цікава CSS-властивість — font-display із параметром swap. Замість того, аби очікувати завантаження незвичайного та важкого шрифту, font-display відображає текст із вбудованим у браузер шрифтом. Тож у цьому випадку необхідно вказати стандартний або резервний шрифт. 

Але треба враховувати: після виконання таких дій у користувача під час завантаження сторінки може виникати ефект короткого смикання тексту (особливо, якщо було очищено кеш). Для мінімізації такої проблеми потрібно виконати попереднє завантаження всіх шрифтів, які використовуються. Для цього треба вказати метатег в <head> з параметром preload. На наступній ілюстрації ви можете самі порівняти час завантаження шрифтів з різними значеннями font-display:

13. Увімкніть критичний CSS

Кожен сайт містить чимало CSS-стилів, які браузер починає завантажувати одразу після запиту. Якщо файли стилів великі, їх багато або ж інтернет-з’єднання повільне, тоді час відображення сторінки може помітно збільшуватися. Тут на допомогу прийде критичний CSS — збірка правил, які застосовуються лише до контенту, розташованого «вище за згин». Тобто мова про ту частину сторінки, яку користувач бачить після завантаження. Критичний CSS можна додати в <head> HTML-документа. Це допоможе уникнути додаткового запиту для отримання стилів, а решта CSS завантажиться асинхронно.

Створення критичного CSS реалізується за допомогою різноманітних автоматизованих інструментів. Але їх використання часто призводить до спотворення стилів. Тому на новому сайті варто спробувати організовувати структуру стилів за компонентами окремо для header, footer тощо. Це дозволяє генерувати критичний CSS із готовими стилями, але без їх дублювання. Якщо ж необхідно додати критичний CSS для оптимізації вже існуючого сайту, тоді краще спочатку проаналізувати структуру CSS. Якщо вона не модульна, слід вручну згенерувати критичні стилі і внести необхідні корективи. У цьому допоможуть npm-пакети та, наприклад, розширення для Chrome Chrome під назвою CSS Used.

14. Застосовуйте CDN

Content Delivery Network, або скорочено CDN, — це географічно розподілена група серверів, яка оптимізує доставку та розподіл контенту користувачам. Завдяки CDN можна швидше доставляти статичні файли: зображення, стилі, скрипти та шрифти. Сервери мережі CDN розташовані так, аби мінімізувати час відповіді для користувачів. Таким чином статичні файли кешуються буквально по всьому світі. І після відкриття сайту юзером запит на отримання таких файлів надсилається на найближчий до цього користувача CDN-сервер.

Використання CDN приносить максимум користі для глобальних проєктів, аудиторія яких знаходиться в різних регіонах. В такому випадку сайт отримає зменшення затримок, пришвидшення завантаження контенту та підвищення рівня зручності, що зрештою призводить до збільшення кількості задоволених користувачів.

15. Активуйте production mode

У Magento 2 є три робочі режими: default, developer та production. Саме останній є найшвидшим і рекомендованим для запущеного сайту, тоді як інші використовуються виключно для налаштування та розробки.

16. Уникайте JS Bundling

За задумом, угруповання JS-файлів передбачено функціоналом Magento 2 для скорочення кількості HTTP-запитів, необхідних для завантаження сторінки. Хоча це може здатися сприятливим для продуктивності, це не так. Режим JS Bundling призведе до створення декількох файлів з усім JavaScript-кодом загальною вагою 5-10 МБ, що уповільнить завантаження сторінки.

Але поєднати JS-файли та не втратити у продуктивності сайту цілком можливо — завдяки Advanced JavaScript Bundling!

17. Скористайтеся Advanced JavaScript Bundling

JS-бандлінг потрібен для скорочення кількості та розміру ресурсів для кожної сторінки. Але у стандартній версії бандлінгу повний набір зібраних файлів JavaScript завантажується на кожну сторінку! Тож тут знадобиться Advanced JavaScript Bundling. Він формує бандли відповідно до типів сторінок. Це можуть бути, наприклад, загальний бандл для JavaScript-файлів, які потрібні на кожній сторінці, та окремі набори для сторінок оформлення замовлення, категорій, товарів, CMS-сторінок.

18. Підключіть мініфікацію CSS/JS

Ця функція була відсутня у першій версії Magento, але у другій вона відіграє особливу роль. З нею можна мінімізувати файли JS/CSS без використання додаткових розширень. Але треба пам’ятати: налаштування активні лише у production mode.

19. Налаштуйте ефективне завантаження JS

Важливо не лише мініфікувати JS-файли, а й правильно підключити їх на сайті. Замість того, щоб активувати весь JS-код відразу, варто включати лише критичні елементи. Наприклад, можна відкласти завантаження аналітичних скриптів.

Також краще перемістити підключення скриптів з head у footer та додати атрибути async або defer. Стандартне підключення скриптів перериває парсинг HTML, коли браузер виявляє тег <script>. Далі скрипт завантажується, виконується, і вже потім продовжується парсинг. Але цей процес небажаний, адже у вас може бути дуже багато скриптів, через що сайт може довго завантажуватись. Натомість краще використовувати атрибути async або defer.

Атрибут async підходить для скриптів, які не взаємозалежні з іншими файлами та/або не мають залежностей. Такий скрипт завантажується паралельно та виконується лише після цього. Щодо defer, то він використовується для вказівки, що виконання скрипту може бути відкладено — наприклад, після повного завантаження сторінки.

А ще важливо мінімізувати використання сторонніх бібліотек. Якщо велика бібліотека використовується для невеликої функціональності, і її можна замінити власним кодом — це потрібно зробити.

20. Не зупиняйтеся!

Лише описаними методами оптимізація інтернет-магазинів на CMS Magento не обмежується. Але навіть ці прийоми допоможуть вам пришвидшити сайт, позитивно вплинути на UX та покращити показники Google PageSpeed. А це підвищить позиції сайту в результатах пошуку — а значить, збільшить трафік та вірогідність продажів. Тож застосовуйте ці методи — та завжди шукайте нові!