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

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

Модуль создаёт лёгкие копии изображений, оптимизирует загрузку 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.

Перед установкой

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

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

Imagick нужен для анимированного WebP, ffmpeg с VP9 — для преобразования GIF в WebM. Эти инструменты требуются только для соответствующих функций.

1. Установите модуль

1. Установите решение topman.optimizer через Маркетплейс в административной части сайта.
   
2. Откройте «Top Man Digital» → «Ускорение сайта».
   
3. Откройте «Проверка сервера» и убедитесь, что доступны необходимые библиотеки и запись в /upload.
   
4. При многосайтовости проверьте, к каким сайтам будут применены общие настройки.
   

2. Сохраните результат до включения

До запуска ускорения сохраните исходные показатели. Для встроенного сравнения укажите API-ключ PageSpeed в настройках и запустите замер главной страницы при выключенном ускорении. Дождитесь завершения задачи.

API-ключ нужен для встроенных замеров, а не для оптимизации файлов. Если ключа нет, можно использовать внешний сервис PageSpeed Insights.

3. Включите базовую оптимизацию

1. На экране «Обзор» нажмите «Включить ускорение».
   
2. Для обработки накопленных изображений нажмите «Подготовить копии картинок».
   
3. Проверьте очередь в разделе «Фоновые задачи» и дождитесь появления готовых копий.
   

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

Для большого каталога настройте запуск обработчика по расписанию. Команду берите из интерфейса установленной версии модуля; при необходимости передайте её администратору сервера. Проверьте, что PHP для cron соответствует требованиям модуля.

4. Проверьте сайт

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

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

5. Добавляйте остальные функции постепенно

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

Для GIF → WebM проверьте наличие ffmpeg с VP9 и воспроизведение в шаблоне. Этот режим меняет способ вывода анимации и может потребовать проверки стилей, написанных для тега img.

Если результат не устраивает

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

Обратитесь в поддержку: marketplace@topman.dev. Укажите версию модуля и PHP, шаблон сайта, адрес страницы, выбранные настройки и последовательность действий. Приложите результаты замеров или диагностическую выгрузку, предварительно проверив её содержимое. Пароли и секретные ключи в публичные сообщения не отправляйте.

ПОЛЬЗОВАТЕЛЬСКОЕ СОГЛАШЕНИЕ

Редакция от 05.02.2021

Перед началом любого использования указанного ниже Приложения внимательно ознакомьтесь с условиями его использования, содержащимися в настоящем Пользовательском соглашении (далее – Соглашение). Любое начало использования Приложения означает надлежащее заключение Соглашения и Ваше полное согласие со всеми его условиями. Если Вы не согласны безоговорочно принять условия Соглашения, Вы не имеете права использовать Приложение.

Соглашение применяется к следующей программе:

Программа для ЭВМ «Top Man Digital: Optimizer»

Основные термины:

Разработчик - ООО "ИНТЕРНЕТ ПАРТНЕРСТВО"

Приложение – копия указанной выше программы для ЭВМ (как в целом, так и ее компоненты), а также любая документация по ее использованию, исключительные имущественные права на которую принадлежат Разработчику.

Договор – возмездный лицензионный договор между Пользователем и Разработчиком на предоставление права использования Приложения, в котором предусмотрены способы использования Приложения и иные существенные условия, неотъемлемой частью которого является настоящее Соглашение.

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

Пользователь – юридическое лицо, индивидуальный предприниматель или физическое лицо, которое намеревается правомерно использовать функционал Приложения или уже использует функционал Приложения для нужд, связанных с осуществлением предпринимательской или иной экономической, в том числе некоммерческой, деятельности (за исключением личных, семейных, домашних и иных подобных нужд).

Активация – действие, направленное на регистрацию на конкретного Пользователя, осуществляемое в порядке, предусмотренном в Соглашении.

Активационный код – набор символов (лицензионный ключ), представляющий собой техническое средство защиты авторских прав и предназначенный для Активации.

Техническая поддержка – мероприятия, осуществляемые Разработчиком в установленных им пределах и объемах для обеспечения функционирования Приложения, включая информационно-консультационную поддержку Пользователей по вопросам использования Приложения.

1.       УСЛОВИЯ ИСПОЛЬЗОВАНИЯ И ОГРАНИЧЕНИЯ

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

1.2.             Пользователь не может копировать, распространять Приложение в любой форме, в том числе в виде исходного кода, каким-либо способом, в том числе сдавать в аренду/прокат. Пользователю не разрешается использовать Приложение каким-либо способом, если такое использование противоречит или приводит к нарушению Соглашения или действующего законодательства Российской Федерации.

1.3.             Запрещается любое использование Приложения, противоречащее Соглашению, Договору и действующему законодательству Российской Федерации.

2.                  АВТОРСКИЕ ПРАВА И ТОВАРНЫЕ ЗНАКИ

2.1.             Приложение является результатом интеллектуальной деятельности и объектом авторских прав Разработчика.

2.2.             Алгоритмы работы Приложения и его исходные коды (в том числе их части) являются коммерческой тайной Разработчика. Любое их использование или использование Приложения в нарушение Соглашения рассматривается как нарушение прав Разработчика и является достаточным основанием для лишения Пользователя предоставленных по Соглашению и Договору прав.

2.3.             Пользователю не предоставляются права на использование товарных знаков и знаков обслуживания Разработчика и/или его партнеров.

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

2.5.             Для защиты авторских прав и ограничения использования Приложения Разработчик использует различные технические средства защиты.

3.                  ВИДЫ ЛИЦЕНЗИЙ И СРОКИ ИХ ДЕЙСТВИЯ

3.1.             Стандартная Лицензия:

3.1.1.       Стандартная Лицензия предоставляется на срок, указанный в Договоре, со дня Активации, если иное не установлено настоящим Соглашением. По окончании указанного срока Пользователь вправе продолжить использование Приложения на условиях Ограниченной Лицензии, либо заключить новый Договор для продления использования Приложения на условиях Стандартной лицензии на очередной срок.

3.1.2.       Активация Стандартной Лицензии должна быть осуществлена в обязательном порядке посредством ввода Активационного кода в соответствующее поле одним из следующих способов: (а) на соответствующем этапе установки Приложения; (б) в специальном поле раздела обновлений; (в) в сети Интернет по адресу https://www.1c-bitrix.ru/support/key_info.php.

3.1.3.       Стандартная Лицензия предоставляет право на использование Приложения без ограничений и в соответствии с заявленными в технической документации функциональными возможностями.

3.1.4.       Права на все новые версии (обновления) Приложения, а также доступ к их установке и использованию, предоставляются без выплаты дополнительного вознаграждения только при наличии у Пользователя одновременно платной  лицензии на программу для ЭВМ «1С-Битрикс: Управление сайтом» и Стандартной Лицензии на Приложение на условиях настоящего Соглашения и Договора. Все обновления Приложения являются его неотъемлемой частью и используются исключительно вместе с Приложением как единая программа для ЭВМ в порядке, предусмотренном в Соглашении.  Стороны соглашаются и подтверждают свое понимание того, что установка новых версий (обновлений) Приложения не влечет за собой предоставления нового права на использование Приложения или продления срока действующей Стандартной Лицензии. При этом Пользователю может быть предложено ознакомиться и принять дополнение к Соглашению или новую версию Соглашения.

3.1.5.       Разработчик предоставляет Пользователю право получения Технической поддержки по вопросам, связанным с функциональностью Приложения, особенностями установки и эксплуатации на стандартных конфигурациях поддерживаемых (популярных) операционных, почтовых и иных систем в период действия права Пользователя на получение новых версий (обновлений) Приложения, указанного в пункте 3.1.4.  Соглашения, без выплаты дополнительного вознаграждения.

Разработчик несет единоличную ответственность за техническое обслуживание и поддержку Приложения в соответствии с Соглашением и требованиями действующего законодательства.

3.2.             Ограниченная Лицензия:

3.2.1.       Ограниченная Лицензия предоставляется Пользователю без дополнительного вознаграждения (безвозмездно) на весь срок действия исключительных прав на Приложение только в случае и со дня предоставления ему Стандартной Лицензии.

3.2.2.       Ограниченная Лицензия предоставляет Пользователю право на использование тех функциональных возможностей Приложения, которые были предоставлены ему в рамках Стандартной Лицензии, за исключением права на получения новых версий (обновлений) Приложения и Технической поддержки.

4.                  ОТВЕТСТВЕННОСТЬ

4.1.             За нарушение условий настоящего Соглашения и Договора, в том числе нарушение авторских прав Разработчика, наступает ответственность, предусмотренная законодательством Российской̆ Федерации.

4.2.             Пользователь несет ответственность, предусмотренную законодательством Российской Федерации, за осуществление действий, направленных на устранение технических средств защиты, а также за распространение методов устранения таких средств защиты, включая следующие:

- сохранность в тайне Активационного кода Приложения с даты его выдачи;

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

4.3.             Разработчик несет единоличную ответственность за соответствие Приложения действующему законодательству.

4.4.             Исключительно Разработчик несет ответственность за рассмотрение любых претензий Пользователей или любой третьей стороны, связанных с Приложением или владением и/или использованием Пользователем Приложения, включая, но не ограничиваясь: претензии об ответственности за качество Приложения;  любое утверждение о том, что Приложение не соответствуют каким-либо применимым правовым или нормативным требованиям; претензии, возникающие в соответствии с законодательством о защите потребителей, персональных данных, конфиденциальности или аналогичным законодательством. Разработчик осуществляет расследование, защиту, урегулирование и исполнение любого требования о нарушении прав на интеллектуальную собственность в случае претензий третьих лиц о том, что Приложение, владение им и/или его использование нарушает права третьих лиц на интеллектуальную собственность.

4.5.             Во избежание сомнений, Разработчик и Пользователь признают и соглашаются с тем, что ООО «1С-Битрикс» (г. Москва, ИНН 7717586110):

-                    не является стороной настоящего Соглашения;

-                     не несет ответственность за действия Разработчика при обработке персональных данных Пользователя, предоставленных последним Разработчику при использовании Приложения, не контролирует получение Разработчиком необходимых правовых оснований для обработки персональных данных Пользователя;

-                    не участвует в рассмотрении и не несет ответственность за рассмотрение Разработчиком любых претензий Пользователя или любой третьей стороны, связанных с Приложением или владением и/или использованием Приложения;

-                    не участвует в предоставлении Технической поддержки и не несет никаких обязательств по ее предоставлению, так же, как и каких-либо иных аналогичных услуг в отношении Приложения;

-                    не несет ответственности за соответствие Приложения и информации о нем действующему законодательству;

-                    не несет ответственность за расследование, защиту, урегулирование и исполнение любого требования о нарушении интеллектуальной собственности в отношении Приложения.

5.       ОГРАНИЧЕННАЯ ГАРАНТИЯ

5.1.        Приложение предоставляется по принципу «как есть» и Разработчик не гарантирует, что все его функциональные возможности будут отвечать ожиданиям Пользователя или смогут быть применимы для какой-либо конкретной его цели.

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

5.3. Если при использовании Приложения будут обнаружены ошибки, Разработчик предпримет меры для их исправления в максимально короткие сроки и/или выпустит новую, исправленную версию Приложения. Стороны соглашаются, что точное определение срока устранения ошибки не может быть установлено, так как Приложение тесно взаимодействует с другими программами для ЭВМ сторонних разработчиков, операционной системой и аппаратными ресурсами компьютера Пользователя, и работоспособность и время устранения проблем в полной мере не зависят только от Разработчика.

5.4.        ООО «1С-Битрикс» не имеет никаких гарантийных и иных обязательств в отношении Приложения, а также любых претензий, убытков, обязательств, затрат или расходов, связанных с любым несоблюдением какой-либо гарантии Разработчиком.

6.                  ДЕЙСТВИЕ, ИЗМЕНЕНИЕ И РАСТОРЖЕНИЕ СОГЛАШЕНИЯ

6.1.        Настоящее Соглашение регулируется в соответствии с законодательством Российской̆ Федерации.

6.2.        В случае нарушения Пользователем условий настоящего Соглашения Разработчик имеет право в одностороннем порядке расторгнуть Договор.

6.3.        При расторжении настоящего Соглашения Пользователь обязан прекратить использование Приложения полностью и уничтожить все копии Приложения, установленные на компьютерах Пользователя, включая резервные копии и все компоненты Приложения.

6.4.        Пользователь вправе расторгнуть настоящее Соглашение в любое время, полностью удалив Приложение.

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

6.6.        Соглашение также распространяется на все новые версии (обновления) Приложения, предоставляемые Пользователю, если только при обновлении Приложения Пользователю не будет предложено ознакомиться и принять дополнение к Соглашению или новое Соглашение.

6.7.        Разработчик оставляет за собой право в одностороннем порядке периодически обновлять и изменять Соглашение.

7.                  КОНТАКТНАЯ ИНФОРМАЦИЯ РАЗРАБОТЧИКА

ООО "ИНТЕРНЕТ ПАРТНЕРСТВО"
Почтовый адрес: 350049, КРАСНОДАРСКИЙ КРАЙ, Г.О. ГОРОД КРАСНОДАР, Г КРАСНОДАР, УЛ КРАСНЫХ ПАРТИЗАН, Д. 194, ПОМЕЩ. 202
Телефон: 88612175130

Служба техподдержки: https://marketplace.1c-bitrix.ru/solutions/topman.optimizer/#tab-support-link