Web-агентство Red Chameleon
+38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
Замовити зворотній дзвінок
Про нас
  • Відгуки
  • Наші клієнти
  • Вакансії
Портфоліо
Створення сайтів
  • Розробка сайтів на Laravel
  • Розробка сайтів на YII2
  • Розробка сайтів на Symfony
  • Створення сайту на Wordpress
  • Створення інтернет-магазину
  • Створення інтернет-магазину на Laravel
  • Розробка інтернет-магазину на PrestaShop
Підтримка сайту
  • Доопрацювання сайту
  • Перенесення сайту з Бітрікс на інші CMS
Контакти
Блог
Ещё
    +38 095 520-30-05 hello@redchameleon.com.ua EnUaRu
    • Про нас
      • Назад
      • Відгуки
        • Наші клієнти
          • Вакансії
          • Портфоліо
          • Створення сайтів
            • Назад
            • Розробка сайтів на Laravel
              • Розробка сайтів на YII2
                • Розробка сайтів на Symfony
                  • Створення сайту на Wordpress
                    • Створення інтернет-магазину
                      • Створення інтернет-магазину на Laravel
                        • Розробка інтернет-магазину на PrestaShop
                        • Підтримка сайту
                          • Назад
                          • Доопрацювання сайту
                            • Перенесення сайту з Бітрікс на інші CMS
                            • Контакти
                            • Блог
                            • Веб-студія
                            • Проекти
                            • Прискорення завантаження та роботи інтернет-магазину 5WATT

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

                            https://5watt.ua/ – оптово-роздрібний інтернет-магазин світлодіодної продукції.

                            Представники компанії звернулися до нас за технічною підтримкою сайту. Ми взялися за проєкт наприкінці 2019 року і досі працюємо над його покращенням та оптимізацією.

                            Сайт на PrestaShop, але ці методи переважно підходять для проєкту на будь якій платформі.

                            Пришвидшити сайт

                            Как мы ускоряли интернет-магазин

                            Початок робіт із прискорення сайту

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

                            • аудит швидкості;

                            • пришвидшення завантаження сторінок;

                            • навантажувальне тестування та підвищення продуктивності;

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

                            Роботи проводилися з жовтня 2019 до березня 2020 року.
                            Замовник звернувся із завданнями на оптимізацію за ТЗ від SEO-фахівців. Але їх відклали, тому що потрібно було зосередитись на вирішенні проблеми зі швидкістю завантаження.
                            Для цього провели аудит швидкості та навантажувальне тестування. Навантажувальне тестування стало одним із найцікавіших завдань.
                            За результатами впровадили комплекс доопрацювань, які підвищили продуктивність та швидкість роботи сайту.
                            Диана Хоменко
                            Діана Хоменко,
                            Проєкт-менеджер ЧЕРВОНОГО ХАМЕЛЕОНУ

                            Аудит швидкості інтернет-магазину

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

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

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

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

                            Сравнение версий PHP

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

                            Наш розробник взяв для тесту випадковий модуль для організації кешування та при тестуванні отримав приріст 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-адреси сторонніх ресурсів, з яких вантажиться контент, доти, коли дані з них фактично запитуються. Так заощаджується час на зовнішніх підключеннях.

                            DNS-prefetch

                            Навантажувальне тестування сайту

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

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

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

                            2. Контрольні тести після додаткових установок сервера.

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

                            • 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

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

                            • додали властивість font-display для шрифтів;

                            • впровадили «ліниве завантаження» (lazyload) для зображень та відео;

                            • впровадили елемент для завантаження шрифтів;

                            • встановили та доопрацювали модуль для виведення зображень у форматі WebP;

                            • оптимізували завантаження скриптів.

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

                            • Головна – 53/96

                            • Сторінка каталогу – 77/99

                            • Картка товару – 71/98

                            • Запис блогу – 72/95

                            Pagespeed 5watt

                            Результат робіт із прискорення інтернет-магазину

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

                            Для цього ми:

                            • оптимізували HTML-код;

                            • забезпечили відкладене завантаження «важкого» контенту та передзавантаження сторонніх ресурсів;

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

                            • разом із системним адміністратором попрацювали над налаштуванням сервера;

                            • організували кешування.

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

                            А ваш сайт не потребує прискорення?

                            Готові обговорити ваш проєкт та запропонувати ефективні рішення.

                            Подзвоніть мені


                            Давайте обговоримо ваш проєкт
                            Залишіть заявку, і ми зв'яжемося з вами

                            Сайт захищений reCAPTCHA, використовуються
                            Політика конфіденційності та Умови користування Google.

                            Про веб-студію
                            Портфоліо
                            Вакансії
                            Контакти
                            Блог
                            Створення сайтів
                            Розробка сайтів на Laravel
                            Розробка сайтів на Symfony
                            Розробка сайтів на YII2
                            Створення сайту на WordPress
                            Розробка інтернет-магазинів
                            Створення інтернет-магазину на Prestashop
                            Розробка b2b-сайтів та порталів
                            Розробка особистого кабінету
                            Створення інтернет-магазинів на Laravel
                            Підтримка сайтів
                            Доопрацювання сайтів
                            Перенесення сайтів з Бітрікс на іншу платформу
                            Синхронізація із ERP-системами

                            Карта сайту
                            Оплата та розрахунки
                            Гарантії
                            Наші контакти


                            +38 (095) 520-30-05
                            hello@redchameleon.com.ua
                            Українa, м. Київ, вул. Біломорська, буд. 1А
                            • Facebook
                            • Telegram
                            • Viber
                            • WhatsApp
                            WEB-агентство Красный Хамелеон
                            WEB-агентство Червоний Хамелеон. Розробка, підтримка, просування сайтів та інтернет-магазинів
                            в Україні (Київ, Харків, Одеса, Дніпро, Львів) та інших країнах.
                            © 2013-2022, Червоний хамелеон.