Критический CSS - это слепок правил первого экрана, который печатается прямо в HTML, а весь остальной файл стилей сайт подгружает не блокируя показ страницы. У нас на этом попался градиентный заголовок: автоматический сборщик слепка стёр правило с переменной цвета внутри, и текст на нём стал прозрачным. С тех пор мы знаем, где технология ломается и как собирать её без таких сюрпризов. Критический CSS - это слепок правил первого экрана, который печатается прямо в HTML, а весь остальной файл стилей сайт подгружает не блокируя показ страницы...

Мы сверстали страницу, выбрали шрифт, открыли сайт на своём компьютере — красота. Опубликовали, открыли с телефона, а заголовок выглядит иначе. Первое желание — дописать !important. Но шрифт мог вообще не загрузиться, и !important здесь поможет примерно как повышение громкости при отключённых колонках. Разберём пять причин и научимся быстро находить нужную. Такой код не загружает шрифт на сайт: Браузер попробует найти My Beautiful Font на устройстве посетителя. Не найдёт — покажет sans-serif. На вашем компьютере всё может выглядеть правильно просто потому, что шрифт установлен локально...