Прискорення завантаження та роботи інтернет-магазину 5WATT

Серед першочергових завдань були:

• аудит швидкості;
• пришвидшення завантаження сторінок;
• навантажувальне тестування та підвищення продуктивності;
• оптимізація сайту для збільшення показників PageSpeed.

Роботи проводилися з жовтня 2019 до березня 2020 року

Замовник звернувся із завданнями на оптимізацію за ТЗ від SEO-фахівців. Але їх відклали, тому що потрібно було зосередитись на вирішенні проблеми зі швидкістю завантаження.

Для цього провели аудит швидкості та навантажувальне тестування. Навантажувальне тестування стало одним із найцікавіших завдань.

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

Діана Хоменко,

Проєкт-менеджер ЧЕРВОНОГО ХАМЕЛЕОНУ

В результаті проведеного аудиту швидкості наш веб-програміст виявив низку слабких місць проєкту. Швидкі тести показали основні напрямки для оптимізації завантаження та прискорення сайту.

Перехід на новішу версію PHP

Порівняли версії PHP без зміни інших параметрів. Тільки з цього помітний істотний приріст продуктивності.

PHP 7.0 (ліворуч) та поточна 5.6 (праворуч).

Встановити модуль кешування

Наш розробник взяв для тесту випадковий модуль для організації кешування та при тестуванні отримав приріст 200%.

Показники з кешуванням та без.

Ми рекомендували клієнту в першу чергу впровадити ці редагування і лише потім переходити до оптимізації за Google PageSpeed.

Модуль кешування

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

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

Запропонували клієнту модуль Page Cache Ultimate Module.

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

У самому модулі є порівняння роботи без кешування та з кешуванням:

Аналогічні результати спостерігалися на всіх сторінках інтернет-магазину. При цьому показання швидкості завантаження з кешем стабільніші: без кешування час завантаження однієї і тієї ж сторінки може варіюватися від 1 до 2 секунд, а з увімкненим кешем різниця зменшується до 100-200 мс.

Відкладене завантаження скриптів Youtube для вставлених відео – чудовий спосіб скоротити час формування сторінки. Суть методу в тому, що при завантаженні контенту замість вбудованого відео та маси супутніх скриптів завантажується лише картинка зі скріншотом з відео, і після натискання на картинку завантажується плеєр Ютуба. Таким чином, відео завантажується тільки, якщо користувач хоче його подивитися. Докладніше про цей спосіб написано тут.

Застосуванням відкладеного завантаження нам вдалося скоротити розмір сторінки на 1,7 мБ

Для підвищення швидкості завантаження зовнішніх ресурсів додали до секції head сторінки dns-prefetch.

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

Провели навантажувальне тестування інтернет-магазину для визначення продуктивності сервера та CMS PrestaShop з урахуванням підключеної CDN Cloudflare.

Роботи проводилися у два етапи:

• Первинне тестування за допомогою кількох інструментів.
• Контрольні тести після додаткових установок сервера.

Щоб отримати максимально об'єктивні результати, наш програміст провів низку тестів з використанням кількох сервісів:

• https://loader.io/
• https://frugaltesting.com/
• https://www.joedog.org/siege-home/
• https://gatling.io/open-source/.

В результаті проведених тестів вдалося встановити, що:

• сервер здатний тримати навантаження 10 користувачів за секунду протягом однієї хвилини, більше починаються відмови;
• навантаження 5 користувачів за секунду сайт витримав протягом 5 хвилин (тобто витримає і довше).

У поточній конфігурації PrestaShop теж здатний витримувати навантаження (з урахуванням підключеного Cloudflare). Відмовлятися від CMS через продуктивність потреби немає.

Після внесення змін до параметрів сервера ми провели повторне тестування, щоб оцінити результати коригувань. Для цього використовували тільки Gatling та 2 сценарії:

• 5 користувачів на секунду протягом 5 хвилин (всього 1500 користувачів);
• 10 користувачів за секунду протягом 5 хвилин (всього 3000 користувачів).

Всі тести показали помітні покращення продуктивності. Серед іншого, значно покращився час відповіді сервера.

Було:

Стало:

Таким чином, нашому програмісту завдяки проведеному тестуванню навантаження вдалося виявити слабкі місця, що негативно впливають на продуктивність ресурсу. А у зв'язці із системним адміністратором сервера ці проблеми були усунені. Результат – підвищення швидкості та продуктивності інтернет-магазину.

Для підвищення показників сервісу Google PageSpeed ​​провели низку оптимізацій:

• додали властивість font-display для шрифтів;
• впровадили «ліниве завантаження» (lazyload) для зображень та відео;
• впровадили елемент для завантаження шрифтів;
• встановили та доопрацювали модуль для виведення зображень у форматі WebP;
• оптимізували завантаження скриптів.

Результати за різними типами сторінок для мобільної та десктопної версії:

• Головна – 53/96
• Сторінка каталогу – 77/99
• Картка товару – 71/98
• Запис блогу – 72/95

У результаті нашій команді вдалося досягти гідних показників продуктивності, швидкості завантаження та “папуг” PageSpeed.

Для цього ми:

• оптимізували HTML-код
• забезпечили відкладене завантаження «важкого» контенту та передзавантаження сторонніх ресурсів;
• впровадили WebP-формат зображень та удосконалили виведення таких картинок для підтримуючих браузерів;
• разом із системним адміністратором попрацювали над налаштуванням сервера;
• організували кешування.

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