1

Тема: Розбиття bootstrap.css

Всім привіт.

Така задачка крутиться в голові. Можливо вже хтось її вирішив.

Дано: сайт, який використовує bootstrap
Проблема: щоб клієнту при старті не показувалася фігня, css (bootstrap і custom css) стоїть на початку body
Але завантаження і обробка css блокує вивід. Google пише, що хороша практика, розбивати css (один спочатку завантажуєш інших в кінці).
Сходу дві ідеї:
1. Розбивати за призначенням, типу спочатку css основний (який дозволить браузеру притомно показати сторінку) і другий файл який можна запхати в кінці body з додатковими стилями (стилі діалогових вікон і т.п.).
2. Розбивати по атрибуту media, щоб завантажувалися тільки ті файли, які мають стиль пов'язані з відповідною шириною екрану.

Але не знайшов інформації на цю тему. Хтось, стикався з цією проблемою, як її вирішували?

2

Re: Розбиття bootstrap.css

дивно, як це "завантаження і обробка css" може блокувати вивід? Який у вас розмір css файлів?

Щодо ідей: жодного разу не бачив застосування таких варіантів. Зазвичай всі стилі мінімізуються і об'єднуються в один великий файл. Стилі підключаються в <head> і завантажуються паралельно з іншим контентом не блокуючи виведення контенту

3

Re: Розбиття bootstrap.css

Та він важить небагато 30КБ в gz.

Про саму проблему: https://developers.google.com/web/funda … ocking-css

Завантажується паралельно, але блокується візуалізація сторінки (за посиланням вище деталі).

Це не критична проблема, просто цікаво збільшити показник pagespeed.

4 Востаннє редагувалося BarsicPlus (02.04.2018 16:32:31)

Re: Розбиття bootstrap.css

Можеш попробувати на сайті bootstrap customize https://getbootstrap.com/docs/3.3/customize/ зробити дві збірки bootstrap. Перша дуже мініфікована, суто з грід системою і іншими життєво-важливими штуками лиш би сайт норм виглядав, і другу версію бутстрапа з усім іншим, що використовується на сайті, таке як каруселі, попапи, тощо.

Далі, маленьку версію bootstrap і основні файли стилів треба обєднати в один файл, мініфікувати його і засунути в inline стилі. https://developers.google.com/speed/doc … ry#example

А інші стилі, такі як повна версія bootstrap: підключати асинхронно.

Гарна стаття по цій темі: https://varvy.com/pagespeed/render-blocking-css.html

Подякували: leofun01, ailkiv2

5

Re: Розбиття bootstrap.css

karmeljuk написав:

дивно, як це "завантаження і обробка css" може блокувати вивід? Який у вас розмір css файлів?

Щодо ідей: жодного разу не бачив застосування таких варіантів. Зазвичай всі стилі мінімізуються і об'єднуються в один великий файл. Стилі підключаються в <head> і завантажуються паралельно з іншим контентом не блокуючи виведення контенту

Ні, так працювати не буде. Паралельності, про яку ви говорите, не існує. Стилі, підключені в Head все одно будуть блокувати рендер сторінки. Типу буде біла пейджа допоки стилі не загрузяться. Але це відбувається досить швидко, тож ми майже цього не замічаємо (поки стилі мало важать).

6

Re: Розбиття bootstrap.css

У мене 4 бутстрап, а у нього значно обмежені опції, навіть якщо все вимкнути, то він важитиме на 20-30% менше.

Поки не критично, думаю, що відкладу на часи, коли буде хоча б якась вигода з таких маніпуляцій

7 Востаннє редагувалося BarsicPlus (13.04.2018 12:41:16)

Re: Розбиття bootstrap.css

Можна ще спробувати за допомогою https://jonassebastianohlsson.com/criti … generator/
згенерувати для сайту critical css.

Типу там треба вказати адресу сайту, засунути весь CSS вашого сайту (але в нашому випадку доцільно туди запхати лише код Bootstrap 4) та натиснути кнопку для генерування :) Можливо це дозволить згенерувати маленьку версію bootstrap з лише критичним CSS, котрий використовується у Вас на сайті.

У випадку якщо ви робите проект локально, то є гарний плагін: https://www.npmjs.com/package/critical

А взагалі....

Прихований текст

те, що Bootstrap 4 оптимізований важить так багато, це, звичайно, капець.
До речі, на офіційному сайті сказано що не треба редагувати файли bootstrap напряму, а створювати ще один файл і імпортувати туди стилі bootstrap...

так вот, на мою скромну думку, такі штуки явно загроміздкі для вебу. Особливо для мобільного вебу.

http://www.zingdesign.com/wp-content/uploads/580-bootstraped1.jpg

Мало того, що це дуже обмежена хрінь, так ще й важить в кілька разів більше за норм оптимізований сайт без бутстрап :)

У своїй роботі я давно вже не використовую bootstrap, а надаю перевагу самописному коду. Проектуючи наперед послідовність загрузки сторінок і оприділення наперед критичного CSS, а також 100% чистий самописний код - тільки так можна побудувати дійсно 100% оптимізований та швидкий сайт. А якщо ще немає сторонніх скриптів, то можна накинути на нього AMP (https://www.ampproject.org/) і фапати від блискавичності загрузки сторінок :)

Подякували: leofun01, P.Y.2