21 порада для покращення швидкості Magento 2

Оптимізація швидкості Magento 2 — це один із перших кроків, які повинен зробити кожен власник магазину Magento 2, коли трафік зменшується, коефіцієнт відмов збільшується, а конверсії падають. І все це тому, що швидкість веб-сайту є надзвичайно важливим фактором, який впливає не тільки на Magento SEO та трафік, але і на рішення щодо покупки.

Magento — одна з найкращих CMS, які люди обирають за її унікальні функції, виняткові можливості та, безумовно, швидкість.

Так, "чиста" Magento дійсно швидка.

Але як тільки ви починаєте додавати додаткові функції, кастомізацї та третьосторонні модулі, швидкість починає падати.

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

Щоб допомогти вам зробити ваш сайт неймовірно швидким, ми підготували для вас найкращі поради для збільшення швидкості Magento 2.

1. Оновіться до останньої версії Magento

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

Не варто нехтувати цим і використовувати застарілі версії, оскільки це рано чи пізно призведе до серйозних проблем. Тому оновлюйте Magento часто, щоб забезпечити швидку та безперебійну роботу вашого веб-сайту.

2. Змініть хостинг провайдера

Magento — це складна платформа, яка має певні системні вимоги для належного функціонування. Обов’язковими вимогами є SSL та 2 ГБ оперативної пам’яті. Однак це може варіюватись залежно від потреб вашого веб-сайту.

Спільний хостинг (shared hosting) найкраще підходить для початківців. Однак не можна очікувати високої швидкості завантаження веб-сайту зі спільним хостингом та найдешевшим планом хостингу, з обмеженими ресурсами.

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

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

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

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

Хоча вони полегшують деякі процеси, модулі Magento додають код до вашого веб-сайту та роблять його більш складним. Це може спричинити проблеми зі швидкістю та уповільнити завантаження вашого сайту.

Найкраще рішення тут — це провести аудит ваших розширень і знайти “шкідника”, якого можна або оптимізувати, або повністю видалити. Також, завжди рекомендується видаляти розширення Magento 2, яке ви не використовуєте, щоб зробити ваш сайт легшим та швидшим відповідно.

Ось кілька корисних команд, які можна використовувати для керування розширеннями Magento 2:

bin/magento module:status
bin/magento module:enable
bin/magento module:disable

4. Використовуйте швидкі теми Magento

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

Отже, це погано у всіх сенсах для користувачів з хорошим Інтернет з'єднанням і справжній кошмар для тих, у кого повільний Інтернет. Це не тільки призводить до поганого досвіду під час роботи з клієнтами, але й може вплинути на інші функції Magento та навіть погіршити ситуацію.

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

5. Видаліть непотрібні шрифти

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

Іноді буває, що ви додаєте якийсь кастомний шрифт до розділу <head> файлу налаштувань сторінки і забуваєте про це. Незалежно від того, використовується шрифт чи ні, він все одно буде завантажений.

Отже, щоб прискорити роботу Magento 2, ви також можете спробувати видалити шрифти, якими не користуєтесь. GooglePageSpeed також пропонує це зробити. Adobe надає вам покрокові інструкції, тому видалити непотрібні шрифти не складе труднощів.

6. Оптимізуйте зображення

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

Щоб прискорити сайт Magento 2, потрібно оптимізувати зображення. Один з найкращих способів зробити це — за допомогою lazy loading.

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

Завдяки цьому сторінка завантажується швидше та покращується взаємодія з клієнтами.

7. Використовуйте файли нового покоління

Оскільки зображення часто займають багато місця на вашому сервері, відкладене завантаження — не єдина можливість збільшити швидкість веб-сайту Magento за допомогою оптимізації зображень. Щоб зменшити розмір зображень без особливої втрати якості, вам потрібно скористатися WebP зображеннями у Magento 2.

Це формат файлів нового покоління, розроблений Google і, який підтримується більшістю браузерів. Він дозволяє зменшити розмір файлу на 25-35%, зберегти якість зображення та відповідно покращити швидкість роботи сайту Magento.

Оскільки WebP є відносно новою технологією, Magento не дозволяє додавати зображення вже у форматі WebP у адмін панель Magento. Замість цього ви можете використовувати розширення Magento 2 WebP Images для автоматичної або ручної конвертації зображень.

8. Вимкніть flat catalogs

Magento flat catalogs використовувалися для збільшення швидкості веб-сайту Magento через меншу кількість SQL запитів та консолідацію даних. Вони добре працювали для Magento 1.x.x та 2.x.x. Це факт.

Однак виявилося, що вони спричиняли появу heavy dependencies та призводили до погіршення продуктивності та інших проблем з індексацією. Ось чому використання flat catalogs не є хорошою практикою, починаючи з Magento 2.1.

Отже, один із способів оптимізації швидкості Magento — це вимкнення flat catalogs.

Щоб вимкнути flat catalogs в Magento 2:

1. Підіть у Stores > Configuration > Catalog > Catalog > Storefront.
2. Вимкніть опції Use Flat Catalog Category та Use Flat Catalog Product.
3. Не забудьте зберегти налаштування після того, як закінчите.

9. Вимкніть JS bundling

JS bundling повинен групувати JS файли у великі бандли (bundles) та зменшувати кількості HTTP-запитів до сервера, необхідних для завантаження сторінки. Однак це не покращує швидкість роботи сайту Magento, а навпаки.

Сторінка веб-сайту не завантажується, поки браузер не завантажить усі JS бандли, навіть якщо сторінка використовує файли з одного або двох бандлів. Крім того, Magento завантажує JS бандли щоразу, коли браузер запитує нову сторінку.

Враховуючи, що JS бандли складають в середньому близько 5-10 Мб, це не найкращий спосіб покращити продуктивність Magento.

Отже, інший спосіб прискорити Magento 2 — це відключити JS bundling:

1. Підіть у Stores > Configuration > Advanced > Developer > JS Settings.
2. Вимкніть опцію Enable JavaScript Bundling.

10. Використовуйте advanced JS bundling

Він дозволяє зменшити кількість HTTP-запитів до сервера та зменшити розмір JS файлів, так само, як і звичайний JS bundling. Однак advanced JS bundling усуває необхідність завантажувати всі бандли для всіх сторінок, що запитуються браузером.

Кожна сторінка має певний набір залежностей requireJS. Щоб задовольнити потребу кожної сторінки, вам не потрібні всі бандли, а лише кілька з них.

Тому, щоб увімкнути advanced JS bundling, потрібно визначити бандли за типами сторінок (CMS сторінки, товар, категорія, оформлення замовлення (checkout)), або за функцією (функції доставки, функції оформлення замовлення, функції, пов'язані з товаром).

Оскільки для однієї сторінки будуть завантажені лише певні бандли, швидкість Magento значно зросте. Однак для веб-сайтів з складною структурою модулів та безліччю налаштувань може знадобитися професійне налаштування.

11. Ввімкніть deferred JS loading

Разом із CSS та HTML під час завантаження сторінки завантажується багато JS файлів. Все це сприяє повільному завантаженню сайту, що не подобається ні клієнтам, ані продавцям.

Щоб оптимізувати завантаження файлів JS, ви можете скористатися deferred JS loading, або відкладеним завантаженням JS файлів. Воно дозволяє виконувати скрипт JS після парсингу сторінки та відповідно збільшувати швидкість веб-сайту Magento.

Це означає, що всі скрипти будуть переміщені в нижню частину сторінки, за винятком скриптів, які ви не хочете переносити вниз сторінки.

12. Об’єднайте та зменшіть файли JS/CSS

Існують також й інші способи оптимізації швидкості Magento за допомогою JS та CSS. Magento має вбудовані інструменти для об'єднання та зменшення файлів JS та CSS (merge and minify JS/CSS files).

Мініфікація (minification) дозволяє зберегти ваші файли JS і CSS "чистими", видаливши непотрібні дані, такі як коментарі, порожні рядки тощо. Це дозволяє браузерам швидше їх читати і, відповідно, швидше повертати запити сторінок користувачеві.

Злиття (merging) JS та CSS, з іншого боку, дозволяє зменшити кількість HTTP-запитів до сервера, об’єднавши разом файли JS та CSS.

Відомо, що ці дві опції збільшують швидкість веб-сайту Magento. Тому рекомендується застосовувати їх у інфраструктурі сайту.

Крім того, вони обидві налаштовуються у адмін панелі:

1. Підіть у Stores > Configuration > Advanced > Developer.

2. Ввімкніть опції Minify Javascript Files та Merge JavaScript Files у розділі JavaScript Settings.

3. Ввімкніть опції Minify CSS Files та Merge CSS Files у розділі CSS Settings.

13. Використовуйте critical CSS

CSS стилі визначають зовнішній вигляд сторінок вашого магазину. Однак вони також визначають швидкість завантаження сторінки. За винятком розміру файлів CSS та їх розташування, на швидкість завантаження сайту Magento впливає порядок їх завантаження.

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

Використовуючи критичний CSS, ви визначаєте файли CSS, які слід завантажити першими, і ті, завантаження яких можна відкласти. Таким чином ви усунете ресурси, що блокують рендеринг (render-blocking resources), і значно покращите показник first meaningful paint, а некритичні стилі будуть завантажуватись асинхронно.

Щоб налаштувати шлях до критичного CSS файлу:

1. Підіть у Stores > Settings > Configuration > ADVANCED > Developer.
2. Ввімкніть опцію CSS Critical Path.

Вкладка Developer відображається лише в режимі розробки. Щоб увімкнути critical CSS у продакшн-режимі, можна виконати таку команду:

bin/magento config:set dev/css/use_css_critical_path 1

14. Ввімкніть production режим

Якщо ви розробник, то ви повинні знати, що існує три різних режими роботи Magento. Production є найшвидшим і його завжди потрібно вмикати на "живому" (live) веб-сайтi.

Іноді веб-сайти не працюють належним чином, оскільки ввімкнено режим розробника (developer mode). Однак він використовується лише для налагодження (debugging). Переконайтеся, що production режим увімкнено, щоб прискорити сайт Magento 2.

Виконайте такі команди, щоб:

• перевірити який режим Magento ввімкнено на вашому сайті

php bin/magento deploy:mode:show

• ввімкнути production режим, якщо його вимкнено

php bin/magento deploy:mode:set production

15. Використовуйте CDN

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

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

Це досягається завдяки архітектурі CDN, яка кешує зображення, медіа, JS та CSS файли на віддалених серверах. Потім CDN надає ці файли користувачам із сервера, найближчого до їхнього розташування.

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

16. Move to HTTP/2

HTTP/2 — це оновлена версія HTTP/1, яка забезпечує швидше завантаження веб-сайтів. Якщо протокол HTTP/1 створює нові серверні з'єднання для кожного статичного файлу, який потрібно опрацювати, HTTP/2 може робити це одночасно.

HTTP/2 обробляє кілька статичних файлів в одному з'єднанні. Таким чином веб-сайт завантажується та рендериться швидше, оскільки не витрачається час на створення кількох з'єднань.

Хоча більшість веб-серверів підтримують його за замовчуванням, ви можете налаштувати HTTP/2 за допомогою CDN або веб-сервера.

17. Ввімкніть кешування

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

Тоді, коли ви знову відвідуєте сторінку, сервер повинен знову генерувати вміст сторінки.

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

Іноді, коли розробники або дизайнери працюють над веб-сайтом, вони вимикають кеш Magento для безперебійної роботи. Однак якщо вони не ввімкнуть його після завершення роботи, це може призвести до повільного завантаження веб-сайту та поганого досвіду для ваших користувачів.

Щоб прискорити Magento 2, переконайтеся, що всі кеші ввімкнено.

Підіть у System > Cache Management, виберіть усі кеші, ввімкніть їх та натисніть Submit.

Примітка: щоб моніторити кеш, ви можете ввімкнути сповіщення про вимкнений кеш.

18. Задіюйте Varnish кеш

Коли ви вирішите заглибитись у кешування Magento, ви стикнетесь з кешем Varnish. Це рішення з відкритим кодом, рекомендоване командою Magento. Хоча Magento вже має вбудований full-page кеш, Varnish є набагато просунутішим.

Varnish служить прискорювачем веб-додатків, який "покращує" HTTP трафік, економить пропускну здатність (bandwidth) і значно покращує час відповіді сервера. Крім того, він використовується для кешування як динамічного, так і статичного контенту.

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

Varnish — це надійне рішення для кешування Magento, яке може збільшити швидкість веб-сайту Magento. Однак з налаштуваннями не все так просто. Тож переконайтеся, що ви його правильно налаштували, або проконсультуйтеся з професіоналами щодо цього.

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

Іншим рішенням для кешування, яке йде в ногу з кешем Varnish з точки зору частоти використання є Redis. Це інструмент кешування для бекенду, який дозволяє зберігати сеанси та дані сеансу. Це дозволяє вам мати швидкий доступ до статусів користувачів, налаштувань та облікових даних.

Redis має розподілену структуру зберігання даних (distributed data storage structure) і дозволяє серверам переміщувати часто використовуваний контент сторінки в оперативну пам'ять. Внаслідок зберігання даних у пам’яті Redis не потребує постійного доступу до диска. Завдяки цьому кількість виконуваних операцій збільшується і затримка в пошуковій базі даних або запитах API зменшується.

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

20. Оновіть indexers

Архітектура Magento дозволяє впорядковувати багато даних продавців (ціни, каталог, магазин, користувачів) у таблиці за допомогою індексаторів (indexers). Тож індексатори — це спосіб перетворення та відображення даних про товари та категорії на вітринах магазину.

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

Якщо ви бачите, що якісь продукти не з’являються, або швидкість веб-сайту різко падає, ви можете зробити реіндекс через CLI або зробити реіндекс Magento з адмін панелі.

21. Очистіть логи бази даних

Magento зберігає тисячі МБ даних у логах з різними записами даних. Якщо ви не очищаєте свої логи, база даних може переповнитись непотрібними даними та спричинити затримки у відповіді сервера та обробці запитів.

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

Список логів, які безпечно очищати включає:

dataflow_batch_export;

dataflow_batch_import;

log_customer;

log_quote;

log_summary;

log_summary_type;

log_url;

log_url_info;

log_visitor;

log_visitor_info;

log_visitor_online;

report_viewed_product_index;

report_compared_product_index;

report_event;

index_event.

Сервіс оптимізації Magento 2

Оптимізація швидкості Magento — це не зовсім легко. Це вимагає часу, навичок, рішучості і, головне, послідовності.

Зі списку наданого вище ви бачите, що роботи справді багато. Проте цього також може бути недостатньо.

Іноді вимкнення JS bundling, використання останньої версії Magento та оптимізація зображень не принесуть очікуваного результату. Не тому, що ви робите недостатньо. Це тому, що деякі проблеми можуть бути приховані занадто глибоко, щоб їх побачити.

Ось чому іноді найкраще довірити свій веб-сайт в руки професіоналів, і дозволити їм оптимізувати швидкість вашого сайту Magento 2 для вас.

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