@import @import. Оптимизация CSS-структуры. Оптимизация структуры веб-страниц
@import @import
link @import
link с @import
Блоки link с @import
Много @import
link link
Упрощаем CSS-селекторы
В приведенном ниже примере подключаются 2 файла стилей: a.css и b.css. Каждый файл по загрузке занимает ровно 2 секунды, чтобы было удобно отследить влияние на скорость загрузки в дальнейшем.
В первом примере используется @import для загрузки обоих файлов стилей. В этом примере HTML-документ содержит следующий блок стилей:
<style type='text/css'>
@import url('a.css');
@import url('b.css');
</style>
Если вы всегда будете использовать только @import для загрузки стилей, то проблем с производительностью не будет, хотя мы увидим ниже, это может привести к ошибке с JavaScript. Оба файла загружаются параллельно (рис. 5.1) Но проблемы начинают появляться, если использовать @import внутри файла стилей, либо вместе с <link>.
Рис. 5.1. Параллельная загрузка стилей. Источник getincss.ru