Top Man Digital: Ускорение сайта — WebP, WebM, Lazy Load и оптимизация CSS/JS

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

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

Изображения

Модуль создаёт WebP-копии изображений и автоматически подставляет их на страницы. Исходные JPEG и PNG остаются на сервере и используются как запасной вариант.

Дополнительно модуль:

• загружает изображения по мере прокрутки страницы;
  
• оставляет первые изображения для немедленной загрузки;
  
• назначает главной картинке первого экрана высокий приоритет;
  
• добавляет недостающие width и height, чтобы страница не прыгала при загрузке;
  
• обрабатывает изображения в галереях и слайдерах, адреса которых хранятся в атрибутах data-*;
  
• может готовить копии сразу после загрузки изображения через административную часть.
  

GIF-анимации

Тяжёлые GIF-анимации можно показывать как WebM-видео. Для посетителя анимация выглядит привычно: запускается автоматически, работает без звука и повторяется по кругу.

На тестовой выборке из 32 анимаций общий размер файлов уменьшился с 362 до 30 МБ. На странице реального сайта четыре GIF-файла весом 30 МБ были заменены WebM-копиями общим размером 3 МБ.

Исходная GIF-анимация остаётся внутри разметки как запасной вариант. Функция выключена по умолчанию и требует установленного ffmpeg с поддержкой VP9.

Стили и шрифты

Модуль уменьшает CSS-файлы и создаёт отдельные оптимизированные копии. Второстепенные стили и подключения сервисов шрифтов перестают задерживать первую отрисовку страницы.

Скрипты и счётчики

Скрипты из разрешённого списка можно выполнять позже, когда основное содержимое страницы уже загружено. Модуль также умеет уменьшать JS-файлы и откладывать известные счётчики и сторонние виджеты.

Видео и карты

Встроенные видео, карты и другие элементы внутри iframe загружаются по мере прокрутки. Посетитель не тратит время и трафик на содержимое, которое ещё не появилось на экране.

Модуль не перезаписывает изображения, CSS и JavaScript сайта. Все облегчённые версии хранятся отдельно в каталоге /upload/topman.optimizer/assets/.

Готовая HTML-страница обрабатывается перед отправкой посетителю. Модуль точечно добавляет нужные атрибуты, адреса и обёртки, не пересобирая всю разметку.

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

Административная часть, служебные страницы и режим визуального редактирования не обрабатываются.

Конвертация изображений, минификация файлов и создание WebM-копий выполняются в фоновой очереди. Посетителю не приходится ждать завершения тяжёлых операций.

Очередь может работать:

• через штатный агент 1С-Битрикс;
  
• по расписанию через cron;
  
• небольшими порциями после открытия страницы.
  

Если обработчик остановится во время задачи, модуль автоматически вернёт её в очередь.

В административной части можно:

• увидеть, работает ли ускорение;
  
• посмотреть количество готовых копий и сэкономленный объём;
  
• проверить поддержку WebP, Imagick и ffmpeg на сервере;
  
• следить за очередью фоновых задач;
  
• запускать массовую обработку изображений и анимаций;
  
• повторять и отменять задачи;
  
• находить и удалять неиспользуемые копии;
  
• смотреть историю изменений;
  
• подготовить диагностическую выгрузку для поддержки.
  

Перед удалением ненужных файлов модуль показывает, что именно будет удалено.

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

Модуль поддерживает композитный режим 1С-Битрикс и предупреждает о настройках, которые зависят от возможностей браузера и поэтому несовместимы с кешированием одинаковой страницы для всех посетителей.

Для установки нужны:

• PHP 8.2 или новее;
  
• 1С-Битрикс 23.900.1000 или новее;
  
• права на запись в каталог /upload;
  
• GD или Imagick для создания WebP;
  
• Imagick для анимированного WebP;
  
• ffmpeg с кодеком VP9 для преобразования GIF в WebM.
  

Экран проверки сервера покажет, какие возможности доступны на текущем хостинге.

Решение особенно полезно интернет-магазинам, каталогам, корпоративным сайтам и контентным проектам, где много изображений, анимаций, скриптов, счётчиков, видео или карт.

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