Как ускорить сайт на Битрикс для pagespeed?

Question

[Александр]

Как ускорить сайт на Битрикс для pagespeed?

При тестировании сайта для google на сервисе pagespeed https://developers.google.com/speed/pagespeed/insi...
сервис сообщает, что страницы сайта грузится медленно, из-за того, что скорость загрузки страниц много лишнего и JS, но эти стили и скрипты нужны для нормальной работы сайта, часть из них часть из них стили и скрипты шаблона сайта, другие это системные JS скрипты которые загружает сам Битрикс.

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

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


В блоке Preload key requests pagespeed указывает что больше всего на скорость загрузки повлияли шрифты
3


Для ускорения загрузки страницы pagespeed предлагает использовать атрибут link rel=preload при подключении CSS.

Пробовал следовать рекомендации pagespeed и подключать CSS стили такой конструкцией

<link href="/local/templates/.default/css/style.min.css"  type="text/css" rel="preload" />

но тогда стили страницы отваливаются в браузере FireFox. Как можно сделать, чтобы pagespeed загружал шрифты быстрее и не выставлял рекомендацию rel=preload и можно ли вообще добавить эту рекомендацию в тег link так чтобы стили не отключались в FireFox?

pagespeed рекомендует добавить компрессию как я понимаю ее можно добавить используя настройки gzip compression в .htaccess и больше ничего делать не надо?



Eliminate render-blocking resources - здесь сервис рекомендует убрать блокирующие рендеринг страницы ресурсы, в моем случае он почему то таким ресурсом результирующий CSS файл сайта, куда Битрикс объединил CSS файл стилей шаблона сайта, CSS файлы шаблонов компонентов и системные файлы


Remove unused CSS - здесь сервис указывает системные CSS и стили шаблона сайта как неиспользуемые, почему так происходит, ведь эти файлы используются в проекте?

Comments

[Ярослав Александров]

Как ускорить сайт на Битрикс

Это целый комплекс работ, который включает:
1) Работы по тестированию и подбору качественного и производительного хостинга. При относительно равных ценах можно разместить сайт на плохой по производительности хостинг и не знать об этом.
2) Работы с шаблоном - при тестировании пустой страницы сразу видно сколько теряется скорости из-за шаблона. Особенно это актуально для шаблонов из маркетплейс. Создание хорошего шаблона индивидуальной разработки решает большую часть проблем повышения скорости. Достаточно посмотреть данные по демо сайту и понять какой потолок скорости у шаблона.
3) Исправление ошибок разработки - настройка правильного кеширования, анализ и исправление тяжёлых запросов, которые садят производительность системы.
4) Работы по настройке композитного режима - это позволяет "приглушить" часть проблем и повысить скорость.
5) Работы по оптимизации содержимого сайта
Если выполнить этот комплекс работ можно достигнуть хороших показателей.

Answer 1

[Александр Маджугин]

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

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

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

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

Для ускорения загрузки страницы pagespeed предлагает использовать атрибут link rel=preload при подключении CSS.

Вообще-то шрифтов.

Пробовал следовать рекомендации pagespeed и подключать CSS стили такой конструкцией

Вы не правильно распарсили рекомендацию.
Если вы хотите добавить предзагрузку стилей вы должны добавить метатег прелойда:

<link rel="preload" href="/local/templates/.default/css/style.min.css">

А не заменить им загрузку стилей.

Eliminate render-blocking resources - здесь сервис рекомендует убрать блокирующие рендеринг страницы ресурсы, в моем случае он почему то таким ресурсом результирующий CSS файл сайта, куда Битрикс объединил CSS файл стилей шаблона сайта, CSS файлы шаблонов компонентов и системные файлы

Что значит "почему-то"? Потому что это блокирующий ресурс. Вынесете стили страницы и хедера в отдельный файл который вставляйте инлайном в html для пользователей заходящих на сайт впервые в head, и подключайте в конце страницы два файла css - этот (да стили будут дважды загружены) и общий.
А для пользователей заходящих повторно, подключайте только файлы, но уже в начале страницы.

Remove unused CSS - здесь сервис указывает системные CSS и стили шаблона сайта как неиспользуемые, почему так происходит, ведь эти файлы используются в проекте?

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

Comments

[Александр]

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


затем еще раз добавляем этот тег:

можете пояснить свой ответ детальнее?

[Александр Маджугин]

Вот что мы показываем в голове пользователю который первый раз зашел на сайт (главная):

Как видите прелойд для шрифтов, основных стилей и пары картинок.
Инлайном вставлен начальный стиль - это те стили которые влияют на отрисовку верха шаблона.

Вот низ страницы:

Здесь мы и подгружаем тот самый app.css который был в прелойде.

А вот начало страницы для уже посещавшего сайт пользователя:

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

А вот прелойд для первой картинки слайдера в шапке, мы оставляем - пользователь мог не быть на этой странице и проще держать preload, чем менджерить эти состояния.

К сожалению не могу дать ссылку на сайт - он пока в разработке внутри корпоративной сети.

Но вцелом соглашусь с первой частью коммента Антон Шаманов - в обычной жизни таке ухищрения не нужны. достаточно gzip и оптимизации картинок, а слепое следование всем требованиям гугла может ухудшить загрузку сайта.
CDN штука вообще спорная.

Answer 2

[Антон Шаманов]

забейте, единственное что Вы реально можете сделать это:
1.оптимизировать фото
2.использовать gzip сжатие
самый простой способ улучшить скорость загрузки это подключить CDN для js/css и изображений + ну и железо помощнее

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

Comments

[Александр Маджугин]

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

[Антон Шаманов]

Александр Маджугин, хз, в той версии с которой я пару лет назад работал ничего такого не было. Вы не путаете шаблоны темы с шаблонами конкретных плагинов?

[Александр Маджугин]

Антон Шаманов, нет - я не путаю.
Впрочем если вы говорите о шаблонах тем - дальше можно не продолжать - не работали вы с Битрикс, извините.

[Антон Шаманов]

Александр Маджугин,

не работали вы с Битрикс

Возможно у вас битриксойдов есть свой термин для тем дизайна, надо же как-то чсв потешить. Не знание терминологии никак не помешало мне в создании нескольких магазинов на нем) Возможно так будет понятнее о чем речь https://habr.com/ru/post/212163/

[Александр Маджугин]

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

Нет - вы правильно используете все термины.

Не знание терминологии никак не помешало мне в создании нескольких магазинов на нем

Я не придираюсь к терминам. Если вы использовали темы и стандартный подход к верстке шаблона это значит что вы использовали очень высокоуровневые фичи Битрикс. Естественно они не позволяют добиться никакой вменяемой гибкости.

Т.е. вы юзали БУС - CMS основанную на Битрикс, а не сам фреймворк.
Когда я говорю что вы не работали с Битрикс - я это и имею ввиду - вы не работали с фреймворком - вы работали с CMS на нем основанной и использовали его опосредовано.

[Антон Шаманов]

Александр Маджугин,

В случае cms вроде битрикса

вы юзали БУС - CMS основанную на Битрикс, а не сам фреймворк.

с этого и следовало начинать.

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

[Александр Маджугин]

Но я так и не нашел в фреймворке возможности переопределять контент плагинов

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

В целом да - код компонентов некоторых очень плох. Но это часть БУС, а не Bitrix Framework

Хуже того - есть компоненты и модули от сторонних разработчиков, код которых ещё хуже. Большая часть того что есть в Маркетплейс откровенный трэш и люди это покупают, потом разрабы смотрят в этот трэш, плачут и говорят какое же дерьмо ваш Битрикс, хотя вообще не ясно причем тут Битрикс если они смотря в код какого-нибудь Аспро (совершенно не стесняясь называю и могу мотивировано объяснить почему это лютейший мусор).