Безкоштовні способи оптимізації швидкості OpenCart

OpenCartBot - 15.09.2025

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

Основні етапи оптимізації швидкості завантаження OpenCart

Twig cache

У OpenCart є вбудований кеш шаблонів. Його треба обов’язково ввімкнути в адмінці. Це зменшує кількість обчислень при генерації сторінок. Отже, відкриваємо головну сторінку адмінки Dashboard (Панель інструментів, іноді Панель стану), кнопкою з іконкою шестерні викликаємо додаткові налаштування і вмикаємо Theme cache (Кеш теми).

Кеш статичних файлів

CSS, JS та зображення повинні кешуватися на рівні сервера. Для цього достатньо прописати правила в конфігурації Apache чи Nginx з довгим expires або cache-control. Зазвичай включити кешування статичних файлів можна в панелі хостингу. Якщо у вас немає такої можливості - додайте у файл .htaccess (у корені сайту) правила для кешування:

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access plus 1 month"
    ExpiresByType image/jpeg "access plus 1 month"
    ExpiresByType image/gif "access plus 1 month"
    ExpiresByType image/png "access plus 1 month"
    ExpiresByType image/webp "access plus 1 month"
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/pdf "access plus 1 month"
    ExpiresByType text/javascript "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    ExpiresByType application/x-shockwave-flash "access plus 1 month"
    ExpiresByType image/x-icon "access plus 1 year"
</IfModule>

Заміна зовнішніх ресурсів на внутрішні

Завантажте на сервер усі зовнішні скрипти, стилі та шрифти з CDN. Це зменшить кількість DNS-запитів та прискорить завантаження. Особливу увагу приділіть Google Fonts, jQuery та Bootstrap, Font Awesome з CDN. Постарайтесь зробити так, щоб ваш сайт завантажував лише власні ресурси, без залежності від роботи зовнішніх серверів. Зберігайте скрипти і шрифти у себе на сервері і підключайте їх.

Відкладення айфреймів

Якщо використовуєте айфрейми (Youtube відео, Google карта), додайте атрибут loading="lazy" або реалізуйте відкладене завантаження через JavaScript з затримкою 2-3 секунди після завантаження основного контенту.

Відкладене завантаження скриптів

Додайте атрибут defer до тегів <script> або перенесіть неважливі скрипти в кінець <body>. Критичний JavaScript залиште в <head>.

Lazy loading для зображень

Додайте атрибут loading="lazy" до тегів <img>. Для головних зображень (логотип, банери вище фолду) використовуйте loading="eager" або fetchpriority="high".

HTTP/2 та стиснення

Якщо сервер підтримує HTTP/2, потрібно його ввімкнути (в панелі хостингу). Це прискорює завантаження кількох файлів одночасно. Також у конфігурації сервера варто включити стиснення. GZIP підтримується всюди, Brotli ще ефективніший, якщо є можливість його активувати. Якщо таких опцій у вас немає - додайте у .htaccess правила для GZIP стиснення:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

WebP формат зображень

Формат WebP зменшує вагу зображень у кілька разів. Для OpenCart є безкоштовний модуль для автоматичної конвертації зображень у WebP. Це зменшить розмір файлів на 25-35% без втрати якості. Модуль можна отримати тут.

Оптимізація бази даних

Використовуйте безкоштовний скрипт OpenCart Turbo для автоматичної оптимізації таблиць бази даних. Він додає пропущені індекси та змінює двигун БД на InnoDB, який краще підходить для OpenCart. Скрипт запускається одним кліком і не вимагає додаткових знань чи налаштувань.

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

У налаштуваннях магазину відключіть:

Підрахунок товарів у категоріях (Система → Настройки → Опції → Лічильник товарів у категорія).
Відслідковування онлайн-відвідувачів (Система → Настройки → Опції → Клієнти онлайн)

Ці функції створюють додаткові запити до бази при кожному завантаженні сторінки.

Заміна іконок Font Awesome

Замініть шрифт іконок Font Awesome на SVG спрайт або PNG спрайт. Це зменшить розмір CSS і кількість HTTP-запитів. Створіть один файл з усіма потрібними іконками.

Очищення CSS та JS

Видаліть невикористані стилі з Bootstrap та інших CSS файлів. Об'єднайте кілька CSS/JS файлів в один. Мініфікуйте код за допомогою онлайн-інструментів.

Перенесення скриптів

Перенесіть усі неважливі JavaScript файли в футер, залишивши в header лише критичний код для відображення контенту, наприклад, лише бібліотеку jQuery.

Кешування сесій

Якщо маєте доступ до Redis або Memcached, налаштуйте їх для кешування сесій та результатів SQL запитів. Це значно прискорить роботу з базою даних.

Перевірка результатів

Щоб оцінити ефект, перевіряйте швидкість у:

PageSpeed Insights - аналіз від Google з рекомендаціями
GTmetrix - детальний звіт з водоспадом запитів
WebPageTest - тестування з різних локацій та пристроїв

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