Ускорение загрузки сайта. Оптимизация изображений, видео, шрифтов, css, js (webp, Google PageSpeed), 6.6.2

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

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

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

1. Оптимизация css-стилей сайта

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

Оптимизация стилей устраняет проблему "Устраните ресурсы, блокирующие отображение" в PageSpeed.




2. Оптимизация изображений, конвертация в Webp

Решение конвертирует изображения в современный формат WebP, позволяющий значительно сократить вес изображений и ускорить работу браузера с изображениями.

Оптимизация изображений устраняет или уменьшает проблемы "Используйте современные форматы изображений" и "Настройте эффективную кодировку изображений" в PageSpeed.



3. Оптимизация JavaScript и счётчиков

В последних версиях   решения добавился функционал работы с JavaScript - теперь вы можете   отложить выбранные скрипты до загрузки страницы или до взаимодействия   пользователя с сайтом

Решение исправляет проблему "Пассивные прослушиватели событий не используются для  улучшения производительности при прокрутке" в PageSpeed.



4. Оптимизация Youtube и Rutube видео

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

Решение преобразует исходный фрейм (iframe) видео. Скрипты решения загрузят  все необходимые данные, когда они будут нужны - при клике на кнопку  воспроизвести. Для конечного пользователя данный механизм не заметен.

Преобразования  проводимые решением так же исправляют ошибку pagespeed "Для отложенной  загрузку с фасадными объектами доступно несколько ресурсов"




5. Отложенная загрузка шрифтов (font-display)

Решение имеет механизм автоматической установки font-display: swap для шрифтов.

Использование font-display устраняет проблему "Настройте показ всего текста во время загрузки веб шрифтов" в PageSpeed



6. Preconnect и Preloading

С помощью решения можно через настройки установить preconnect   (предсоединения), preloading (предзагрузки) без редактирования кода сайта

Использование preloading устраняет проблему "Настройте предварительную загрузку ключевых запросов" в PageSpeed

7. Удаление стандартного OpenSans

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

	▷	Безопасность файлов - исходные файлы не редактируются
	▷	Гибкая настройка - можно включить только те оптимизации, которые вам нужны
	▷	Ускоряет работу сайта у реальных пользователей, а не только в PageSpeed Insight

	✔	Поддерживает механизм многосайтовости, композитный и автокомпозитный режим
	✔	Одинаково хорошо работает с кодировками UTF-8 и Windows-1251
	✔	Использует стабильные события и работает на большинстве версий 1с-Битрикс
	✔	Корректно работает с большинством готовых решений (Аспро, Digital Web, Intec и т.д.) и на сайтах с уникальным дизайном
	✔	Поддержка версий PHP: 5.6, 7.x, 8.x

Дополнительные рекомендации:

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

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

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