Inline CSS, Preloading, Preconnect для ускорения загрузки и увеличения баллов PageSpeed

Inline CSS, Preloading, Preconnect для ускорения загрузки сайта - это решение для 1с-Битрикс, ускоряющее отображение сайта на всех типах  устройств пользователей и  положительно влияющее на баллы, скорость и параметры загрузки сайта в Google  PageSpeed Insights.Механизм решения основан на снятии блокировки загрузки страницы  CSS-стилями в шапке сайта без изменения файлов вашего сайта и искажения  отображения. Дополнительно в решении есть функционал preconnect  (предсоединения), preloading (предзагрузки) и возможность проставлять  свойство font-display для шрифтов на лету.Обзор возможностей решения в видео-формате: youtube.comВ терминологии сервиса PageSpeed Insight решение устраняет проблемы:Механизм работы решения основан на снятии блокировки загрузки страницы стилями это позволяет значительно ускорить отображение страницы на экране пользователя. С использованием загрузки css инлайн-кодом, страница может быть отображена значительно раньше полной загрузки и отработки Javascript. Особенно четко эффект заметен на мобильных устройствах.Увеличение баллов в PageSpeed является не самоцелью, а последствием ускорения отображения страницы за счёт работы модуля. ▷ Простая установка и настройка ▷ Модуль работает "На лету", исходные файлы не редактируются ▷ Работа модуля полностью безопасна ▷ Обрабатываемые CSS-стили оптимизируются ▷ Поддерживается работа с Google Fonts ▷ Поддерживаются внешние таблицы стилей ▷  Ускоряет работу сайта у реальных пользователей, а не только в PageSpeed Insight ▷  Умеет удалять стандартный шрифт Open Sans, подключаемый из ядра битриксаОбрабатываемый модулем CSS оптимизируется - удаляются комментарии, переносы, лишние пробелы и прочие, не несущие ценности, символы   ✔  Корректно работает на пк, смартфоне и планшете   ✔  Поддерживает механизм многосайтовости   ✔  Одинаково хорошо работает с кодировками UTF-8 и Windows-1251   ✔  Использует стабильные события и работает на большинстве версий 1с-Битрикс   ✔  Поддерживает композитный и автокомпозитный режимДля дополнительного ускорения отображения сайта и увеличения рейтинга скорости по Google Pagespeed Вам будут полезны:- Модуль "Отложенная загрузка картинок, видео и фоновых изображений", решающий проблему "Отложите загрузку изображений" - смотреть карточку решения- Модуль "Оптимизация и сжатие HTML + CSS", уменьшающий вес отдаваемых html-страниц - смотреть карточку решения

Inline CSS, Preloading, Preconnect для ускорения загрузки и увеличения баллов PageSpeed

от Голубев Артур

Купить: 2 500 2 000 руб.

Попробовать (7 дней) Онлайн-демо

Акция действительна по 31 августа 2021

• Описание
• Отзывы (9)
• Обсуждения (31)
• Что нового
• Установка
• Поддержка

Описание

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

Опубликовано:

03.04.2019

Обновлено:

28.06.2021

Версия:

3.1.4

Установлено:

Более 1000 раз

Подходящие редакции:

«Первый сайт», «Старт», «Стандарт», «Малый бизнес», «Бизнес», «Интернет-магазин + CRM»

Адаптивность:

Да

Поддержка Композита:

Да

Совместимо с Сайты24

Нет

Пользовательское соглашение

Описание

Inline CSS, Preloading, Preconnect для ускорения загрузки сайта - это решение для 1с-Битрикс, ускоряющее отображение сайта на всех типах  устройств пользователей и  положительно влияющее на баллы, скорость и параметры загрузки сайта в Google  PageSpeed Insights.

Механизм решения основан на снятии блокировки загрузки страницы  CSS-стилями в шапке сайта без изменения файлов вашего сайта и искажения  отображения. Дополнительно в решении есть функционал preconnect  (предсоединения), preloading (предзагрузки) и возможность проставлять  свойство font-display для шрифтов на лету.

Обзор возможностей решения в видео-формате: youtube.com



В терминологии сервиса PageSpeed Insight решение устраняет проблемы:

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

	▷	Простая установка и настройка
	▷	Модуль работает "На лету", исходные файлы не редактируются
	▷	Работа модуля полностью безопасна
	▷	Обрабатываемые CSS-стили оптимизируются
	▷	Поддерживается работа с Google Fonts
	▷	Поддерживаются внешние таблицы стилей
	▷	Ускоряет работу сайта у реальных пользователей, а не только в PageSpeed Insight

▷

Умеет удалять стандартный шрифт Open Sans, подключаемый из ядра битрикса

Обрабатываемый модулем CSS оптимизируется - удаляются комментарии, переносы, лишние пробелы и прочие, не несущие ценности, символы

	✔	Корректно работает на пк, смартфоне и планшете
	✔	Поддерживает механизм многосайтовости
	✔	Одинаково хорошо работает с кодировками UTF-8 и Windows-1251
	✔	Использует стабильные события и работает на большинстве версий 1с-Битрикс
	✔	Поддерживает композитный и автокомпозитный режим

Для дополнительного ускорения отображения сайта и увеличения рейтинга скорости по Google Pagespeed Вам будут полезны:

- Модуль "Отложенная загрузка картинок, видео и фоновых изображений", решающий проблему "Отложите загрузку изображений" - смотреть карточку решения

- Модуль "Оптимизация и сжатие HTML + CSS", уменьшающий вес отдаваемых html-страниц - смотреть карточку решения

Отзывы (9)

Обсуждения (31)

Обсуждения (31 )

Авторизуйтесь, чтобы оставить отзыв или задать вопрос разработчику.

Пользователь 1664471 25 марта 2021 10:13

Артур, добрый день! Демо модуля заработало.

Подскажите как правильно настроить Preconnect и Preloading?
Я знаю, что во время загрузки страницы сайта обращаются к доменам, которые замедляют загрузку:
static.me-talk.ru - 136.9 KB
fonts.gstatic.com - 82.0 KB
www.googletagmanager.com - 72.5 KB
mc.yandex.ru - 70.0 KB
yastatic.net - 40.6 KB

Куда я должен поместить эти домены в Preconnect или Preloading?

Артур Голубев (разработчик) 25 марта 2021 10:56

Руслан Леонтьев, Добрый день!
В Preconnect, с указанием протокола, например https://mc.yandex.ru

Это не уберет обращение к этим доменам, но ускорит подключение к ним в момент когда они будут нужны (страница заранее параллельно выполнению будет собирать информацию для подключения к доменам)

Пользователь 1664471 24 марта 2021 17:25

Добрый день! Мой сайт использует шаблон Аспро Некст. Поставил демо модуля. Настройки сделал по видео-инструкции.
Никак не удается настроить модуль. Линки ведущие на css со страниц не исчезают. Проверку системы выполнил. Ошибок нет.
Подскажите что может быть не так?

Артур Голубев (разработчик) 24 марта 2021 17:38

Руслан Леонтьев, Добрый день! Спасибо за информацию.

В данный момент есть проблема с Обфускацией - закодированная демо-версия решения работает не так как обычная.

Связался с поддержкой битркса ищу возможности решения проблемы (хотя бы возможность отладить). Как только проблема решится отпишу под данным комментарием и в обсуждения

Артур Голубев (разработчик) 24 марта 2021 23:43

Руслан Леонтьев, Работоспособность Демо-режима (Кнопка "Попробовать") восстановлена. Обновите решение до последней версии

Пользователь 124836 23 марта 2021 11:26

Приветствую пользователи!

Вышло большое обновление 3.0.1: добавлен новый тип работы со стилями - "Объединение". Новый режим пока в бета-варианте, но на мой взгляд крайне перспективен (обладает большим количеством преимуществ, например не увеличивает вес страницы)

Так же устранено несколько бесполезных настроек и улучшен интерфейс настройки решения.

Рекомендую испытать новый режим

Пользователь 1612101 27 февраля 2021 13:35

Подскажите почему для дисктопных страниц срабатывает модуль
https://prnt.sc/108bolj

А для мобильных нет:
https://prnt.sc/108bpbt
https://prnt.sc/108br0w

??

Артур Голубев (разработчик) 1 марта 2021 10:25

Елена Рощинкина, Добрый день!
Тут что бы ответить на вопрос нужно изучать вашу конкретную реализацию (аналогично по настройкам из предыдущего вопроса)

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

Пользователь 1612101 27 февраля 2021 13:24

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

1 - 5 из 31

Назад12...7Вперед

Что нового

3.1.4 (28.06.2021)	Небольшие корректировки
3.1.3 (28.06.2021)	Совместимость с PHP 8 (обновить решение нужно До смены версии php)
3.1.1 (24.03.2021)	Исправление ошибок в демо версии
3.0.1 (23.03.2021)	Новый режим работы со стилями: Объединение (пока в бета режиме) Устранена настройка "Максимальный вес файлов подключамых в inline-виде" как бесполезная Опция оптимизации Google Fonts объединена с опцией внешних стилей Интерфейсные улучшения
3.0.0 (25.02.2021)	Глобальный рефакторинг кода и улучшение производительности решения
2.1.1 (24.09.2020)	Улучшены алгоритмы оптимизации css, добавлено вырезание шрифта OpenSans, подключаемого битриксом
2.1.0 (06.08.2020)	Улучшение работы решения. Добавлена поддержка font-display (пока в бета режиме)
2.0.2 (12.06.2020)	Небольшой фикс
2.0.1 (12.06.2020)	Решение расширяет функционал: Добавлена поддержка preloading и preconnect Улучшена синергия с другими решениями Улучшено кеширование
1.3.0 (13.03.2020)	Повышение производительности
1.2.2 (04.03.2020)	Небольшие улучшения
1.2.1 (25.01.2020)	Значительно улучшена оптимизация CSS
1.1.9 (13.01.2020)	Добавлен функционал исключений
1.1.8 (24.12.2019)	Небольшие улучшения
1.1.7 (26.10.2019)	Исправление работы с CDN, небольшое улучшение работы с кешем
1.1.6 (01.09.2019)	Небольшие исправления
1.1.5 (31.07.2019)	Техническое обновление
1.1.4 (13.06.2019)	Небольшие исправления
1.1.3 (12.06.2019)	Оптимизация алгоритмов
1.1.2 (29.05.2019)	Оптимизация скриптов модуля, добавлено кеширование обработки стилей сайта
1.1.1 (07.05.2019)	Улучшение работы с внешними стилями и google fonts
1.1.0 (13.04.2019)	Небольшие доработки
1.0.6 (13.04.2019)	Добавлена возможность инлайн подключения внешних стилей и Google Fonts
1.0.5 (04.04.2019)	Добавлена опция "Удалять из css пробелы, переносы и комментарии". Стили с атрибутом media="print" теперь игнорируются.

Установка

В целях безопасности и удобства работы с модулем в режиме Администратора замена CSS не производится.

Эффект от решения на каждом сайте сугубо индивидуален. Решение исправляет описанные проблемы, но Pagespeed  всегда по разному реагирует на исправление проблем. На разных проектах может прирости абсолютно разное количество баллов на схожих страницах. Даже в рамках одного сайта на разных страницах разница в баллах обычно отличается. (Эффект определяется влиянием проблем, которые исправляет решение и наличием более значимых по мнению Pagespeed проблем) Именно поэтому настоятельно рекомендую тестировать решение в демо-режиме до покупки

Полезная информация и популярные вопросы:

• Как проверить работу решения?
  
• Как отключить решение на определенных страницах?
  

Технические требования:

• Битрикс версии 15.5 и старше
  
• PHP версии 5.6 или выше
  
• Параметр PHP allow_url_fopen = 1 (для работы с внешними стилями)
  

Поддержка

▷

Проблемы с установкой в демо-режиме (попробовать)

▷

Продление демо-периода решения

▷

Решение оплачивается единоразово?

▷

Как оплатить решение через рассчётный счёт?

▷

После оплаты заказа на почту не пришел ключ

▷

Инструкция по активации ключа + Видео

▷

После активации ключа остался статус "Демо-режим"

▷

Хостинг считает файлы подозрительными. Почему?

Для получения технической поддержки пишите на почту: me@arturgolubev.ru Перед обращением в поддержку рекомендую сделать "Проверку системы" в админке сайта, т.к. 35% обращений решаются исправлением ошибок которые она находит. При обращении в техническую поддержку укажите: 1. Подробное описание проблемы Постарайтесь  максимально подробно описать проблему и укажите какие действия нужно  произвести для её обнаружения. Скриншоты приветствуются. 2. Решение с которым связана проблема 3. Адрес сайта 4. Доступы к административный панели (Логин и Пароль) 5. FTP или SFTP доступ (Хост, Логин, Пароль и Порт, если он не стандартный) Я отвечаю на все вопросы поступающие на email поддержки, если ответа не поступает более суток, проверьте папку спам.

Подробнее о технической поддержке решений и регламент работы - https://arturgolubev.ru/knowledge/course1/

Другие решения разработчика

Умный поиск с исправлением ошибок в запросе, подсказками и настраиваемой областью поиска 5 800 руб. 4 640 руб. 29

Электронная коммерция для Яндекс.Метрики, Google Analytics и Facebook (Ecommerce) 4 900 руб. 3 920 руб. 8

Динамический ремаркетинг Google Adwords, Facebook, ВКонтакте, MyTarget (Динамический ретаргетинг) 9 400 руб. 7 520 руб. 4

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

Интеграция с Wildberries FBS: остатки, цены, сборочные задания, статусы, стикеры 29 000 руб. 23 200 руб. 1

Сообщение об успешной регистрации с логином и паролем 1 000 руб. 4

Маска ввода номера телефона с выбором страны 2 500 руб. 2 000 руб. 1

Сообщение для посетителей в 1 клик 1 000 руб. 1

Отложенная загрузка картинок, видео и фоновых изображений (Lazy Loading) 2 500 руб. 2 000 руб. 2

Расширенные письма: новый заказ, смена статуса заказа, заказ отменён, заказ оплачен 1 000 руб.

Защита контента сайта от копирования 2.0 1 000 руб. 5

Оптимизация и сжатие HTML + CSS для уменьшения веса страниц сайта 1 000 руб. 5

Маска ввода номера телефона в 1 клик 1 000 руб. 6

Уведомление об использовании cookie-файлов (куки) в 1 клик 1 000 руб. 3

Печать бланка заказа и сохранение в PDF (для публичной части сайта) 2 500 руб. 2 000 руб.

Мессенджеры и социальные сети (встраиваемый блок) 1 000 руб.

Экспорт каталога товаров в Google Merchant и Facebook (автоматическая выгрузка) 1 000 руб. 16

Индикатор прокрутки страницы (визуальный прогресс просмотра сайта) 1 000 руб.

Отложенная загрузка YouTube-видео для ускорения загрузки страниц сайта 1 000 руб.

Инструменты для перехода на безопасное подключение (https, ssl) 1 200 руб.

Блокировка смены символьного кода и названия для разделов и элементов 1 000 руб. 1

Ускорение обмена с 1с и МойСклад (оптимизация времени и ресурсов выгрузки) 1 900 руб. 1 520 руб. 1

Отложенная загрузка изображений для ускорения загрузки сайта и Google PageSpeed 2 900 руб. 2 320 руб. 6

Статистика отправки Email Бесплатно 2

Кнопки поделиться в социальный сетях Бесплатно 9

Новогодние украшения для сайта в 1 клик Бесплатно 7

Калькулятор ипотеки от DomClick для сайта Бесплатно

Mobile Detect - определение устройства из PHP Бесплатно 1

еще 24 решения