1 Тема від ailkiv

  • ailkiv
  • ailkiv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 03.09.2013
  • Повідомлень: 102
    • Репутація: 70

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

Всім привіт.

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

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

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

2 Відповідь від karmeljuk

  • karmeljuk
  • karmeljuk
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 28.01.2014
  • Повідомлень: 1 497
    • Репутація: 816

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

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

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

karmeljuk вебсайт

3 Відповідь від ailkiv

  • ailkiv
  • ailkiv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 03.09.2013
  • Повідомлень: 102
    • Репутація: 70

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

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

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

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

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

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

  • BarsicPlus
  • BarsicPlus
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 17.03.2015
  • Повідомлень: 147
    • Репутація: 86

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

BarsicPlus вебсайт

5 Відповідь від BarsicPlus

  • BarsicPlus
  • BarsicPlus
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 17.03.2015
  • Повідомлень: 147
    • Репутація: 86

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

karmeljuk написав:

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

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

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

BarsicPlus вебсайт

6 Відповідь від ailkiv

  • ailkiv
  • ailkiv
  • Користувач
  • Поза форумом
  • Дата реєстрації: 03.09.2013
  • Повідомлень: 102
    • Репутація: 70

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

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

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

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

  • BarsicPlus
  • BarsicPlus
  • Користувач
  • Поза форумом
  • Звідки: Львів
  • Дата реєстрації: 17.03.2015
  • Повідомлень: 147
    • Репутація: 86

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

BarsicPlus вебсайт