linkДокументация по модулю "Preload (Предварительная загрузка)"

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

Модуль входит в пакет SpeedUP для CS-Cart проектов (поставляется бесплатно в рамках пакета).

Какие проблемы решает модуль "АВ: Предзагрузка":

• Обеспечивает техническую реализацию предзагрузки файлов шрифтов (прямое требования сервиса аудита скорости Google PageSpeed Insights);
• Обеспечивает использование приоритетов загрузки файлов изображений при загрузке страниц (улучшает показатели FCP/LCP, значимость которых неоднократно подчеркивалась в анонсах Google по изменению алгоритмов поискового ранжирования в 2021 году);
• Обеспечивает автоматическую предзагрузку для списков товаров, главного изображения товара, главного изображения блога.

Модуль совместим со следующими Темами:

• YoupiTheme (совместимых с соответствующей версией CS-Cart);
• UniTheme2 (совместимых с соответствующей версией CS-Cart);
• Responsive.

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

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

1. На сайте https://cs-cart.alexbranding.com авторизуйтесь под своей учетной записью владельца заказа;
2. Перейдите на страницу Мой профиль → Заказы;
3. Найдите соответствующий заказ с решением (по которому у Вас есть проблема) в списке заказов и перейдите к его деталям;
4. Найдите ссылку Техническая поддержка рядом с названием модуля (по которому вам необходима помощь) и нажмите ее;
5. Заполните данные с проблемой, предоставьте доступы к Вашей установке (обязательно путь к административной панели, почту и пароль администратора + FTP доступы) и создайте тикет (после того, как будет создан тикет, Вы получите письмо на e-mail и специальный код для отслеживания тикета в дальнейшем);
6. Ожидайте ответ специалиста (на электронную почту владельца заказа с темой) в соответствии с регламентами работы службы техподдержки и выбранным Вами приоритетом решения.

Если Вы не получили ответ в течении сроков, обозначенных в регламентах, напишите на почту info@alexbranding.com с номером тикета, по которому вовремя не получили ответ, и менеджер команды разработчиков решит проблему с соблюдением регламентов.

Протестировать работу модуля, с доступом к административной панели магазина, Вы сможете на нашем сервере Демо решений для CS-Cart от Alexbranding выбрав его в списке Модулей или просто перейдите по ссылке.

Рекомендуем ознакомиться с общими ограничениями:

1. Все модули и решения команды AlexBranding требуют предварительной установки сервисного модуля AB: Менеджер Модулей. Он поставляется бесплатно и отвечает за вопросы: установки, обновления, лицензионной проверки модулей. Исключить использование этого сервисного модуля не представляется возможным;
2. Файлы модуля могут иметь закрытую (закодированную) часть, в которой находится исключительно проверка лицензии;
3. Модуль будет работать только на тех доменах, которые указаны в лицензии пользователя. При попытке использования решения на установках CS-Cart, домены которых не включены в лицензию, модуль будет автоматически выключен;
4. Установка локально не допускается системой лицензирования, чтобы модуль работал на дополнительном домене (поддомене) укажите этот домен (поддомен) в поле Домен при заказе (или напишите на info@alexbranding.com) — добавление технических доменов для разработчика или для тестирования — бесплатно.

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

Далее выполняйте следующую последовательность действий, которая отличается в зависимости от вашей версии платформы CS-Cart:

Также, Вы можете установить модуль стандартной установкой для CS-Cart. Для этого, скачайте соответствующий архив с совместимой с Вашей версией платформы CS-Cart версией модуля.
Перейдите на сайт cs-cart.alexbranding.com, авторизуйтесь под учетной записью владельца заказа и перейдите в Мой профиль → Заказы → Соответствующий заказ, перейдите в его детали и Вы увидите список доступных архивов для заказанного модуля. Скачайте необходимую Вам версию (архив) и произведите установку (стандартная для CS-Cart установка: Модули → Скачанные модули и в меню шестерёнки выберите Ручная установка).

Для доступа к настройкам модуля необходимо перейти на страницу Панель администратора → Модули → Управление модулями и у названия модуля в меню шестерёнки выбрать соответствующий пункт меню.

Для управления ссылками предзагрузки перейдите на страницу Панель администратора → Модули → Управление модулями, у названия модуля AB: Предзагрузка в меню шестерёнки выберите Предзагрузка ссылок.

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

1. URL — ссылка на шрифт. Можно указывать как абсолютные ссылки https://domain.com/fonts/font.woff, так и относительные /fonts/font.woff. Во втором случае будет подставлен текущие домен и протокол.
2. Формат — формат файла.
3. Использовать timestamp — у локальных шрифтов, подключаемых в стилях, к ссылке автоматически доставляется временная метка вида https://domain.com/fonts/font.woff?1580119222. В таком случае в URL нужно добавить ссылку до знака вопроса (https://domain.com/fonts/font.woff) и установить этот чекбокс.
4. Статус — позволяет временно убрать ссылку из предзагрузки, не удаляя данные.

Откройте любую страницу витрины сайта и обновите её с открытой вкладкой Network в Инструментах разработчика.

Определение ссылок

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

Пример ссылок предзагрузки

Результат предзагрузки

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

На странице AB: UniTheme2 → Настройки темы → Вкладка "Модули" модуль AB: Preload (Предварительная загрузка) добавляет свои настройки предзагрузки изображений. Модуль отключает Lazy Load для нескольких первых изображений и добавляет для них теги <link rel="preload">. Используйте для повышения показателя PageSpeed Insights.

На странице Дизайн → Макеты модуль АВ: Preload (Предварительная загрузка) добавляет настройки в блоки баннеров с шаблонами AB: Расширенный баннер (Карусель) и AB: Расширенный баннер:

• Предзагрузить первый баннер ‒ при включенной настройке главное изображение первого баннера в блоке автоматически предзагружается.
• Экспертные настройки предзагрузки ‒ часть первого экрана, которую занимает изображение. Доступен выбор для каждого устройства отдельно.

На странице AB: YoupiTheme → Настройки темы → Вкладка "Модули" модуль AB: Preload (Предварительная загрузка) добавляет свои настройки предзагрузки изображений. Модуль отключает Lazy Load для нескольких первых изображений и добавляет для них теги <link rel="preload">. Используйте для повышения показателя PageSpeed Insights.

На странице Дизайн → Макеты модуль АВ: Preload (Предварительная загрузка) добавляет настройки в блоки баннеров с шаблонами AB: Расширенный баннер (Карусель) и AB: Расширенный баннер:

• Предзагрузить первый баннер ‒ при включенной настройке главное изображение первого баннера в блоке автоматически предзагружается.
• Экспертные настройки предзагрузки ‒ часть первого экрана, которую занимает изображение. Доступен выбор для каждого устройства отдельно.

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

Для работы с анализатором выполните следующие действия:

1. Авторизуйтесь под администратором на витрине.
2. Откройте меню администратора на витрине.
3. В верхнем правом углу нажмите на иконку анализатора.

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

Цветовой индикатор указывает:

• Зелёный цвет ‒ изображения, которые уже предзагружены;
• Красный цвет ‒ изображения, которые не предзагружены и их стоит предзагрузить;
• Синий цвет ‒ изображения, которые не предзагружены.

Цифровой индикатор указывает:

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

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

• Состояние предзагруженности изображения;
• Фактическую часть от всех изображений в окне;
• Актуальное состояние настройки.

Смотрите видео с примерами использования анализатора: