Коллеги, в связи с подготовкой к выпуску в одном из ближайших обновлений Главного модуля, встроенного механизма оптимизации CSS файлов, решил опубликовать краткий анонс данного функционала.
Скорость отображения страницы браузером пользователя зависит, как непосредственно от времени генерации на сервере, так и от скорости загрузки браузером пользователя. Тут возникает ряд проблем, которые и призван решить новый функционал главного модуля.
С этого момента ядро начнет собирать объединенный файл стилей сайта, по мере открытия пользователями разных страниц сайта. При этом для каждого шаблона сайта создается следующие файлы стилей:
результат объединения сss стилей (print.css и colors.css не объединялись, так как явно прописаны в шаблоне)
Дополнительным бонусом является возможность формировать уже сжатую копию объединенного файла стилей. Данная возможность позволяет отдавать файлы стилей в сжатом виде (например при помощи nginx и mod_gzip_static) не сжимая их на лету. Для этого необходимо в настройках главного модуля включить «Создавать сжатую копию объединенного файла CSS » а также настроить nginx:
в результате скорость отдачи файлов стилей увеличивается на порядок:
без сжатия
с сжатием
Важно!
Включая данный функционал на своем проекте вы должны понимать, что в виду того что все стили используемых шаблонов компонент объединяются, возможно возникновение ситуации пересечения стилей из разных шаблонов. Учитывая это вы должны для всех шаблонов создавать уникальное название стилей, при соблюдение этого правила верстка вашего сайта не пострадает.
Скорость отображения страницы браузером пользователя зависит, как непосредственно от времени генерации на сервере, так и от скорости загрузки браузером пользователя. Тут возникает ряд проблем, которые и призван решить новый функционал главного модуля.
- браузеры создают ограниченное количество параллельных запросов к одному хосту
- при разработке продукта в идеологии Битрикса, создается большое количество мелких css файлов
- IE имеет ограничение на количество подключаемых внешних CSS файлов
- теряется целостность компонентов/шаблонов компонентов, что усложняет перенос компонент/шаблонов между сайтами или разными проектами
- усложняется работа с компонентами и их шаблонами
С этого момента ядро начнет собирать объединенный файл стилей сайта, по мере открытия пользователями разных страниц сайта. При этом для каждого шаблона сайта создается следующие файлы стилей:
- объединенный файл стилей шаблонов компонент
- объединенные файлы стилей шаблонов компонент для IE (с учетом ограничения на количество селекторов в одном файле)
- объединенный файл стилей для шаблонов сайта (styles.css, template_styles.css)
результат объединения сss стилей (print.css и colors.css не объединялись, так как явно прописаны в шаблоне)
Дополнительным бонусом является возможность формировать уже сжатую копию объединенного файла стилей. Данная возможность позволяет отдавать файлы стилей в сжатом виде (например при помощи nginx и mod_gzip_static) не сжимая их на лету. Для этого необходимо в настройках главного модуля включить «Создавать сжатую копию объединенного файла CSS » а также настроить nginx:
gzip_static on; gzip_http_version 1.0; |
без сжатия
Server Software: nginx/0.7.67 Document Path: /bitrix/cache/css/s1/light_red_styles.css?1307718092 Document Length: 199325 bytes Time taken for tests: 27.775 seconds Requests per second: 36.00 [#/sec] (mean) Transfer rate: 7017.45 [Kbytes/sec] received |
Server Software: nginx/0.7.67 Document Path: /bitrix/cache/css/s1/light_red_styles.css?1307718092 Document Length: 153107 bytes Time taken for tests: 2.236 seconds Requests per second: 447.29 [#/sec] (mean) Transfer rate: 67002.39 [Kbytes/sec] received |
Включая данный функционал на своем проекте вы должны понимать, что в виду того что все стили используемых шаблонов компонент объединяются, возможно возникновение ситуации пересечения стилей из разных шаблонов. Учитывая это вы должны для всех шаблонов создавать уникальное название стилей, при соблюдение этого правила верстка вашего сайта не пострадает.