Ускорение сайта: WebP, оптимизация CSS/JS и анимаций, замеры PageSpeed до и после

Технические данные

Совместимые редакции

• Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Старт
• Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Стандарт
• Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Малый бизнес
• Программа для ЭВМ "1С-Битрикс: Управление сайтом". Лицензия Бизнес

Описание

Уменьшите вес страниц и проверьте результат до покупки

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

Базовая оптимизация запускается одной кнопкой. Дополнительные функции включаются отдельно. На экране «Обзор» можно увидеть экономию объёма и сравнить замеры Google PageSpeed до и после.

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

Начните с изображений — без ручного изменения шаблона

Нажмите «Включить ускорение» на экране «Обзор». Модуль применит базовый набор: WebP-копии, загрузку изображений по мере прокрутки, резервирование места под картинки и приоритет главного изображения первого экрана.

Копии готовятся постепенно. Чтобы обработать накопленные изображения, запустите «Подготовить копии картинок». Пока копия не готова, сайт использует оригинал.

Что можно оптимизировать

• Изображения. WebP-копии, отложенная загрузка картинок ниже первого экрана, размеры для резервирования места и приоритет главного изображения. В версии 1.1.4 исправлена доставка копий в адаптивных изображениях picture и srcset.
  
• CSS и JavaScript. Уменьшение файлов и настройка отложенной загрузки или выполнения подходящих ресурсов.
  
• Шрифты. Настройки загрузки шрифтов, чтобы подобрать порядок их подключения под конкретный сайт.
  
• Счётчики и виджеты. Возможность отложить подходящие сторонние скрипты. После настройки проверьте работу аналитики, чатов и других сервисов.
  
• Видео и карты. Отложенная загрузка поддерживаемых встроенных элементов. Дополнительные режимы включаются отдельно и требуют проверки на вашем шаблоне.
  

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

Тяжёлые GIF — в лёгкие WebM-анимации

Модуль может подготовить WebM-копию GIF и показывать её как зацикленную анимацию без звука. На тестовой выборке из 32 анимаций суммарный размер исходных GIF составил 362 МБ, а WebM-копий — 30 МБ. Это результат конкретной выборки, а не обещание одинакового сжатия для любых файлов.

Для WebM нужен ffmpeg с поддержкой VP9. Функция выключена по умолчанию. Перед включением проверьте стили и воспроизведение анимаций в своём шаблоне.

Сравните показатели до и после

На экране «Обзор» видно, сколько копий подготовлено и насколько уменьшился их суммарный объём. Встроенные замеры Google PageSpeed показывают результаты для главной страницы отдельно на телефоне и компьютере: оценку производительности, отрисовку, время блокировки, сдвиги макета и вес страницы.

Для этих замеров нужен API-ключ PageSpeed. Для самой оптимизации изображений, CSS и JavaScript он не требуется. Результат также можно проверить через внешний сервис PageSpeed Insights.

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

Подготовка файлов — в фоне

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

Оригиналы сохраняются, функции можно отключать отдельно

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

Если обработка страницы не проходит предусмотренные модулем проверки, используется исходная страница. Это не отменяет тестирования: после включения новых режимов проверьте вёрстку, формы, меню, корзину и внешние сервисы.

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

Требования и ограничения

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

Отсутствие инструментов для дополнительных форматов не означает, что нужно отказываться от остальных функций: доступные возможности покажет «Проверка сервера».

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

Как проверить модуль за 30 дней

1. Сделайте резервную копию и проверьте требования сервера.
   
2. Сохраните исходные замеры при выключенном ускорении.
   
3. Включите базовую оптимизацию и дождитесь готовности копий.
   
4. Проверьте главную, каталог, карточку товара, формы и оформление заказа.
   
5. Повторите измерения и сравните вес ресурсов и показатели загрузки.
   

Если результат подходит вашему сайту, приобретите лицензию. По вопросам запуска и совместимости: marketplace@topman.dev.