Critical CSS

У меня книжка по оптмизации 2017-го года.
Там сказано, что после получения html браузер сделает запрос на CSS. И пока он его не получит, отображение чего-либо блокируется. Это логично: браузеру нужно что-то рисовать, но он не знает, что именно. Чтобы такого не происходило можно сделать critical CSS. Это один из вариантов решения проблемы.

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

Я попробовал: сделал тысячу пагаргафов. Вверху один абзац выделен красным. А внизу один абзац - зеленым.
http://h105667446.nichost.ru/critical/
http://h105667446.nichost.ru/ordinary/


И сделал замеры скорости:

https://www.webpagetest.org/re... view_step1
https://www.webpagetest.org/re... view_step1

Проблема в том, что я не вижу разницы: в обоих случаях в момент начала рендинга у браузера уже был CSS.
Может, я неправильно сделал critical css? Я браузеру сказал: вот про класс .red тебе в critical css. А про остальное браузер не узнал. Т.е. он не узнал ни про шрифт, ни про цвет фона. И не мог начать отрисовку быстрее.

В общем, был бы очень признателен за комментарий. И подскажите, пожалуйста. как мне critical css переписать так, чтобы был рендеринг сразу, не дожидаясь получения CSS,

0

Сообщение от shvyrevvg поэтому предлагают еще такой вариант

Блин, это вообще какое-то колдунство получается. Разработчики браузеров сами хоть понимают как оно работает?
Или это основной принцип программирования:- "Работает? Ничего не трогай!"

1

Сообщение от AlexZaw Блин, это вообще какое-то колдунство получается.

Есть такое. Если media не матчится, то браузер стили все равно загрузит, но с низким приоритетом и не блокируя рендеренинг.

0