https://5watt.ua/ – оптово-роздрібний інтернет-магазин світлодіодної продукції.
Представники компанії звернулися до нас за технічною підтримкою сайту. Ми взялися за проєкт наприкінці 2019 року і досі працюємо над його покращенням та оптимізацією.
Сайт на PrestaShop, але ці методи переважно підходять для проєкту на будь якій платформі.
Початок робіт із прискорення сайту
Серед першочергових завдань були:
-
аудит швидкості;
-
пришвидшення завантаження сторінок;
-
навантажувальне тестування та підвищення продуктивності;
-
оптимізація сайту для збільшення показників PageSpeed.
Замовник звернувся із завданнями на оптимізацію за ТЗ від SEO-фахівців. Але їх відклали, тому що потрібно було зосередитись на вирішенні проблеми зі швидкістю завантаження.
Для цього провели аудит швидкості та навантажувальне тестування. Навантажувальне тестування стало одним із найцікавіших завдань.
За результатами впровадили комплекс доопрацювань, які підвищили продуктивність та швидкість роботи сайту.
Аудит швидкості інтернет-магазину
В результаті проведеного аудиту швидкості наш веб-програміст виявив низку слабких місць проєкту. Швидкі тести показали основні напрямки для оптимізації завантаження та прискорення сайту.
Перехід на новішу версію PHP
Порівняли версії PHP без зміни інших параметрів. Тільки з цього помітний істотний приріст продуктивності.
PHP 7.0 (ліворуч) та поточна 5.6 (праворуч).
Встановити модуль кешування
Наш розробник взяв для тесту випадковий модуль для організації кешування та при тестуванні отримав приріст 200%.
Показники з кешуванням та без.
Ми рекомендували клієнту в першу чергу впровадити ці редагування і лише потім переходити до оптимізації за Google PageSpeed.
Роботи з пришвидшення інтернет-магазину
Модуль кешування
Проблема з модулями для PrestaShop у тому, що вони платні (і часто їхня вартість дуже відчутна), а демоверсій немає. Для швидкого тесту під час аудиту швидкості використовувалася застаріла версія.
Тому вибір доводиться ґрунтувати на кількості завантажень, регулярності оновлень, оцінці користувачів та статтях, але протестувати їх на сайті, щоб порівняти в реальних умовах не вдасться.
Запропонували клієнту модуль Page Cache Ultimate Module.
Після встановлення модуля та прогрівання кешу на тестовому сервері отримали досить значний приріст швидкості.
У самому модулі є порівняння роботи без кешування та з кешуванням:
Реальне порівняння також показало гідні результати →
Сторінка каталогу
Завантаження без кешу – 3.98 с
Карточка товару
Завантаження без кешу – 879 мс.
Завантаження із кешем – 449 мс.
Завантаження із кешем – 243 мс.
Аналогічні результати спостерігалися на всіх сторінках інтернет-магазину. При цьому показання швидкості завантаження з кешем стабільніші: без кешування час завантаження однієї і тієї ж сторінки може варіюватися від 1 до 2 секунд, а з увімкненим кешем різниця зменшується до 100-200 мс.
Відкладене завантаження відео
Відкладене завантаження скриптів Youtube для вставлених відео – чудовий спосіб скоротити час формування сторінки. Суть методу в тому, що при завантаженні контенту замість вбудованого відео та маси супутніх скриптів завантажується лише картинка зі скріншотом з відео, і після натискання на картинку завантажується плеєр Ютуба. Таким чином, відео завантажується тільки, якщо користувач хоче його подивитися. Докладніше про цей спосіб написано тут.
Застосуванням відкладеного завантаження нам вдалося скоротити розмір сторінки на 1,7 мБ.
DNS-prefetch
Для підвищення швидкості завантаження зовнішніх ресурсів додали до секції head сторінки dns-prefetch.
Така конструкція допомагає заздалегідь визначати IP-адреси сторонніх ресурсів, з яких вантажиться контент, доти, коли дані з них фактично запитуються. Так заощаджується час на зовнішніх підключеннях.
Навантажувальне тестування сайту
Провели навантажувальне тестування інтернет-магазину для визначення продуктивності сервера та CMS PrestaShop з урахуванням підключеної CDN Cloudflare.
Роботи проводилися у два етапи:
-
Первинне тестування за допомогою кількох інструментів.
-
Контрольні тести після додаткових установок сервера.
Щоб отримати максимально об'єктивні результати, наш програміст провів низку тестів з використанням кількох сервісів:
В результаті проведених тестів вдалося встановити, що:
-
сервер здатний тримати навантаження 10 користувачів за секунду протягом однієї хвилини, більше починаються відмови;
-
-
навантаження 5 користувачів за секунду сайт витримав протягом 5 хвилин (тобто витримає і довше).
У поточній конфігурації PrestaShop теж здатний витримувати навантаження (з урахуванням підключеного Cloudflare). Відмовлятися від CMS через продуктивність потреби немає.
Після внесення змін до параметрів сервера ми провели повторне тестування, щоб оцінити результати коригувань. Для цього використовували тільки Gatling та 2 сценарії:
-
5 користувачів на секунду протягом 5 хвилин (всього 1500 користувачів);
-
10 користувачів за секунду протягом 5 хвилин (всього 3000 користувачів).
Всі тести показали помітні покращення продуктивності. Серед іншого, значно покращився час відповіді сервера.
Було:
Стало:
Таким чином, нашому програмісту завдяки проведеному тестуванню навантаження вдалося виявити слабкі місця, що негативно впливають на продуктивність ресурсу. А у зв'язці із системним адміністратором сервера ці проблеми були усунені. Результат – підвищення швидкості та продуктивності інтернет-магазину.
Впровадження рекомендацій Google PageSpeed
Для підвищення показників сервісу Google PageSpeed провели низку оптимізацій:
-
додали властивість font-display для шрифтів;
-
впровадили «ліниве завантаження» (lazyload) для зображень та відео;
-
впровадили елемент для завантаження шрифтів;
-
встановили та доопрацювали модуль для виведення зображень у форматі WebP;
-
оптимізували завантаження скриптів.
Результати за різними типами сторінок для мобільної та десктопної версії:
-
Головна – 53/96
-
Сторінка каталогу – 77/99
-
Картка товару – 71/98
-
Запис блогу – 72/95
Результат робіт із прискорення інтернет-магазину
У результаті нашій команді вдалося досягти гідних показників продуктивності, швидкості завантаження та “папуг” PageSpeed.
Для цього ми:
-
оптимізували HTML-код;
-
забезпечили відкладене завантаження «важкого» контенту та передзавантаження сторонніх ресурсів;
-
впровадили WebP-формат зображень та удосконалили виведення таких картинок для підтримуючих браузерів;
-
разом із системним адміністратором попрацювали над налаштуванням сервера;
-
організували кешування.
Клієнт залишився задоволеним досягнутим результатом. А це найкращий показник якості роботи нашої команди.
А ваш сайт не потребує прискорення?
Готові обговорити ваш проєкт та запропонувати ефективні рішення.