Ускорение магазина на Opencart — как улучшить скорость загрузки сайта

Магазин на Opencart, будь то версия 2 или 3, по умолчанию не заточен под высокую скорость загрузки страниц. В 2022 году Google все больше обращает внимание на данный фактор, игнорировать это больше нельзя, ускорение магазина на Опенкарте — «must have».

Начнем.

Как определить скорость загрузки сайта на Opencart

Для того, чтоб определить скорость загрузки интернет-магазина на CMS Opencart, достаточно воспользоваться сервисом от Google PageSpeed Inlights.

Для правильной оценки скорости магазина следует проверить 4 типа страниц сайта:

Главную страницу
Страницу категории (группу товара)
Товарную страницу (карточку товара)
Информационные страницы (блог, страницы контактов, доставки и оплаты и другие)

Если скорость загрузки в PageSpeed попала в красную зону, то с ней обязательно нужно работать. В своих проектах я стараюсь вывести все показатели в зеленую и желтую зону (в идеале, чтоб все страницы были в зеленой зоне).

Обязательно нужно обращать внимание как на мобильную версию, так и на компьютерную. Мобильная версия в приоритете.

Ускоряем Opencart — работа с административной панелью

Первым делом нужно правильно настроить интернет-магазин в самой админке. Есть функционал, который может грузить сайт, его нужно отключить.

Выключаем подсчет количества товаров в категориях.

Для этого нужно перейти в административную панель в раздел:

Система > Настройки

Жмем «редактировать» напротив нужного магазина, переходим во вкладку «Опции», и в поле «Подсчет товаров в категории» указываем значение «Нет»

После этого в меню не будет выводится количество товара:

Далее нужно обратить на поле «Лимит товаров (Витрина)».

Если в данном поле указано очень большое значение, например 50 и больше, то страница категории будет загружаться значительно медленнее, так как на ней будет большое количество товаров. Чем больше товаров на странице — тем больше изображений, а изображения (особенно не оптимизированные) сильно влияют на скорость загрузки. Как оптимизировать изображения расскажу в этой статье ниже.

Далее увеличиваем уровень сжатия.

Остаемся в настройках и переходим во вкладку «Сервер», находим поле «Уровень сжатия» и указываем значение от 5 до 8. Как правило я ставлю 7.

Данная цифра задает уровень сжатия GZIP, что положительно влияет на скорость магазина.

На некоторых сайтах это работает, на некоторых — абсолютно нет. Каждый проект уникален. Экспериментируйте. Следующие пункты позволят увеличить скорость на любом проекте, но они требуют вмешательств в код CMS.

Как улучшить скорость загрузки сайта на Opencart с помощью оптимизации изображений

Изображения забирают на себя весомый процент времени загрузки сайта. Первое, что нужно сделать — это подобрать правильное разрешение изображений.

Настройка подходящего размера изображений — пункт из PageSpeed.

Покажу примере баннера на главной странице.

Если в настройках магазина указаны размеры для баннера 1140 на 380 пикселей, то изображение, которое будет размещено на этом баннере должно быть этого же разрешения.

Многие вебмастера загружают изображения с большим разрешением, но с правильными пропорциями, в надежде, что баннер будет более четкий и качественный, но это не так. Функционал Опенкарта все равно подгонит картинку под размер, который задан в административной панели.

Важно: изображения не должны быть больше, чем это заявлено в админке.

Если же проигнорировать этот пункт, то PageSpeed сообщит об этом в своем отчете:

Это относится и к другим фотографиям сайта:

Фото товара
Логотип
Логотипы партнеров и т. д.

Использование современных форматов изображений — следующий пункт из PageSpeed.

Как говорит сам Google:

Форматы WebP и AVIF обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика

По этому у разработчиков нет выбора. WebP — это необходимость. Некоторые хостинги имеют функцию конвертации всех изображений сайта в этот формат, одним из таких хостингов является Hosting Ukraine. Также на нем есть функционал оптимизации кода, отложенной загрузки изображений и многие другие помощники ускорения сайта.

Если же хотите реализовать автоматическую конвертацию изображений в WebP на CMS Opencart, совсем недавно я писал по этому поводу большую полезную статью.

По этому поводу есть множество модулей, я не буду их описывать в этой статье, суть ясна. WebP — наше все.

Также, перед тем, как загружать изображения на сайт, настоятельно рекомендую прогонять их через сервисы для оптимизации картинок. Один из сервисов, которым пользуюсь лично я — это TinyPNG и TinyJPG.

Использование lazysizes — отложить загрузку скрытых изображений

lazysizes — это библиотека отложенных изображений, которую советует Google. Данная библиотека позволяет прогружать только те изображения, которые попадают в зону видимости пользователя.

Для того, чтоб внедрить данный функционал на сайт, нужно подключить библиотеку.

<script src="lazysizes.min.js" async></script>

И добавить к img:

class="lazyload"

Более подробную информацию можно найти в подсказках сервиса PageSpeed.

Для изображений задать явным образом атрибуты width и height.

Чтоб выполнить ещё один пункт PageSpeed, нужно для каждого изображения задать атрибуты высоты и ширины.

Делается это очень просто, находим вывод нужного изображения в коде сайта и добавляем для width и height, который соответствует его размеру. На некоторые фото сайта не получится применить этот метод, так как это может нарушить дизайн.

Нужно постараться присвоить высоту и ширину как можно большему количеству изображений.

Улучшаем скорость загрузки Opencart с помощью оптимизации кода

Удаление неиспользуемого css и js

Оптимизация css и js могут значительно ускорить загрузку интернет-магазина. Первым делом нужно обратить внимание на неиспользуемый код css и js. В ходе разработки сайта опытные программисты могут легко понять, какой код css из файла stylesheet.css не будет использоваться.

Например:

Если в интернет-магазине используется только один вывод товаров — вывод сеткой (product-grid), то все, что связано со списком (класс product-list) можно смело удалить из файла stylesheet.css. И так далее.

Все то же самое нужно сделать и с js.

Также стоит убедиться, что все подключенные файлы js и css в <head> участвуют в работе сайта.

Плюсом в ускорении магазина будет минификация кода css и js через различные онлайн-сервисы и объединение всех стилей/скриптов в один файл.

Работа со шрифтами магазина на Opencart

В интернете есть много сравнений, какой шрифт грузит работу сайта меньше: ttf, woff или же шрифт, который подключен через Google Fonts. В ходе экспериментов я пришел к выводу, что woff — это самый легкий вариант. Google Fonts очень сильно замедляет скорость сайта.

Вывод: лучше использовать шрифты в формате woff, которые скачаны и загружены в отдельную папку на хостинге.

Для того, чтоб правильно подключить шрифт к сайту и не потерять в скорости заходим в файл:

catalog/view/theme/тема/stylesheet/stylesheet.css

Где «тема» — это название используемого шаблона.

И пишем конструкцию:

@font-face { 
	font-family: ProximaNova-Black;
	src: url(/fonts/ProximaNova-Black.woff);
	font-weight: normal;
	font-display: swap;
	}

Где «font-family: ProximaNova-Black» — это название шрифта.

«src: url(/fonts/ProximaNova-Black.woff)» — путь к папке хостинга, где хранится шрифт.

Важно!

«font-display: swap» — это именно то свойство, которое нужно указывать для любого подключения шрифта. Он позволит избежать ошибки:

Также PageSpeed всегда ругается на font awesome.

Для того, чтоб исправить эту ошибку заходим в файл:

catalog/view/javascript/font-awesome/css/font-awesome.css

и в

catalog/view/javascript/font-awesome/css/font-awesome.min.css

Находим строку:

@font-face{

И в конце (по анологии с добавлением новых шрифтов) добавляем:

font-display: swap;

Уменьшение влияния стороннего кода на работу сайта

Пожалуй, это самый сложный пункт.

Все современные магазины на Opencart добавляют на свой сайт множество сторонних сервисов.

Например:

код подключения Яндекс Метрики
подключение Google Analytics
различные пиксели от Meta Facebook
вывод видео с YouTube
и т. д.

К сожалению удалить эти скрипты нельзя и следует только смириться с тем, что они очень заметно увеличивают скорость загрузки сайта. Некоторые сторонние ресурсы можно облегчить. Например вывод видео с YouTube можно пропустить через плагин liteyoutube.

Но вот с сервисами аналитики придется смириться, либо удалить те, которые не так важны для магазина.

Оптимизация скорости загрузки магазина на Opencart — кеширование

Задаем правила эффективного использования кеша для статических объектов.

Практически все нормальные хостинги предоставляют функцию кеширования статических объектов. Если же ваш провайдер не может обрадовать этой услугой, то придется купить модуль, который поможет включить правильное кеширование.

На этом все. Если вы знаете ещё действенные способы ускорить сайт на Opencart, то пишите об этом в комментариях.

Всем быстрых магазинов!