Как ускорить интернет-магазин на Webasyst: 3 приёма работы с изображениями

Представьте: пользователь заходит в ваш магазин на Webasyst, а товары грузятся 5 секунд. 53% посетителей закроют сайт, если он не загрузился за 3 секунды (данные Google). Частая причина — неоптимизированные изображения. В этой статье вы узнаете 3 рабочих метода, которые мы используем в VModern для ускорения Webasyst-проектов. Результат: рост конверсии на 15–30%.

1. Сжатие изображений: как не терять качество

Проблема: Фотографии товаров в Webasyst «весят» 2–5 МБ из-за JPEG/PNG от фотографов.

Решение:

• Инструменты:
  • Онлайн: TinyPNG, Squoosh.app (сжимают на 70–80%)
  • Плагины для CMS
  • Скрипты: sharp для Node.js (пакетная обработка)

Как внедрить:

<picture>
<source srcset="product.webp" type="image/webp">
<img src="product.jpg" alt="Кроссовки Nike Air Max">
</picture>

Результат: Размер изображений ↓ на 65%, скорость LCP ↑ на 25%.

2. Lazy Load: грузим только видимые изображения

Проблема: Webasyst по умолчанию загружает все картинки страницы, даже те, что ниже экрана.

Решение:

Готовый код для Webasyst:

// В файле theme.js вашего шаблона
document.addEventListener("DOMContentLoaded", function() {
const images = document.querySelectorAll('img[data-src]');

const lazyLoad = (img) => {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = () => img.removeAttribute('data-src');
};

const observer = new IntersectionObserver((entries) => {
entries.forEach(entry => {
    if (entry.isIntersecting) lazyLoad(entry.target);
});
});

images.forEach(img => observer.observe(img));
});

Для товаров в каталоге: Замените атрибут src на data-src в шаблоне list-thumbs.html.

Итог: Время загрузки страницы ↓ на 40%, FID (отзывчивость) ↑ до 90 баллов.

3. Кэширование: снижаем нагрузку на сервер

Проблема: Каждый запрос картинки — нагрузка на хостинг. Без кэширования сервер обрабатывает одни и те же файлы повторно.

Решение:

Способ 1. Настройка через .htaccess (для Apache)

<IfModule mod_expires.c>
    ExpiresActive On
    # Кэширование изображений
    ExpiresByType image/jpeg "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/svg+xml "access plus 1 month"
    # Кэширование шрифтов и стилей
    ExpiresByType font/woff2 "access plus 1 year"
    ExpiresByType text/css "access plus 1 month"
</IfModule>

Важно: На некоторых хостингах (например, Beget) изменение настроек кэширования через .htaccess ограничено. В таком случае:

1. Оставьте заявку в поддержку с текстом:

   "Прошу включить кэширование статических файлов для домена [ваш_домен]:
   - Изображения (jpg/png/webp/svg) — 1 год
   - Шрифты (woff2) — 1 год
   - CSS/JS — 1 месяц
   При необходимости прикрепляю текущий .htaccess"

2. После настройки проверьте работу через KeyCDN CURL Checker — в заголовках должен появиться cache-control: max-age=31536000

Способ 2. CDN для Webasyst

Если хостинг не позволяет гибко настроить кэширование, используйте CDN:

• В шаблоне: Замените прямые ссылки на файлы через wa->cdn():

  <img src="{$wa->cdn('img/logo.webp')}" alt="Логотип">
  <link href="{$wa->cdn('css/style.min.css')}" rel="stylesheet">

• Популярные CDN:
  • Cloudflare (бесплатный тариф)
  • Yandex CDN (интеграция через Яндекс.Облако)
  • StackPath

Эффект:

• Серверные запросы ↓ на 60-80%
• Time to Interactive < 2 секунд
• Снижение нагрузки на хостинг (актуально для тарифов с ограничением CPU)

Кейс VModern

Задача: Ускорить магазин спортивной экипировки на Webasyst (LCP = 5.8 сек).

Что сделали:

• Конвертировали 1200 товарных фото в WebP + сжатие
• Внедрили lazy load для каталога и галереи
• Настроили кэширование через CDN

Результат:

• LCP: 1.9 сек (↑ 67%)
• Конверсия в корзину: +22%
• Оценка Google PageSpeed: 92/100