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

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

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

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

Twig cache

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

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

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

    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"

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

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

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

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

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

Додайте атрибут defer до тегів Зв'язок в Telegram Зв'язок в Telegram