CSS – асинхронно? Как это?

CSS – асинхронно? Как это?

В одном из недавних постов я рассказал об асинхронной загрузке JavaScript. Сегодня речь пойдет снова об асинхронной загрузке, но асинхронно грузить будем CSS. Потребность в таком методе загрузки стилевых файлов диктуется развитием Интернета.

В последнее время владельцы сайтов жестко усвоили, что CSS подключается в начале кода html в теге head, а весь JavaScript код по возможности подключается как можно ниже (идеально перед закрытием тега body). Целью такого поведения является показ сайта по мере загрузки html. Т.е. браузер сначала загружает все содержимое CSS, и, зная описания всех классов, отрисовывает страницу по мере загрузки html. При этом пользователь, как бы сразу, видит появляющийся контент в красивом виде. А JavaScript добавляется в самом конце, когда пользователь уже знакомиться с содержанием страницы.

Долгое время такой подход отлично работал. Но… Новый тренд – мобильность. Чаще всего мобильные приложения имеют сравнительно небольшую скорость, а CSS имеет тенденцию к росту. Поэтому время загрузки CSS для мобильных пользователей может оказаться критичным. Кому хочется смотреть 20-30 секунд на пустой экран?

Поэтому возникает соблазн: А как бы подгружать CSS код асинхронно? Сразу оговоримся, какой-то минимальный CSS код все равно нужно подгрузить в теге head. Вы спросите почему? Очень просто, без задания этого минимума пользователь увидит html без стилей, в котором ему будет достаточно тяжело разобраться.

К «минимальному набору» я бы отнес общий layout (формирующий форму) и минимальные стили для заголовков и текста. А вот все дополнительные украшательства и излишества – после загрузки основного контент. В этом случае пользователь получает возможность ознакомиться с текстом документа уже до полной загрузки JavaScript и CSS, которые могут занимать довольно большой объем.

Я покажу, как реализовать такую асинхронную загрузку при помощи jQuery.

Чтобы наш CSS начал загружаться асинхронно – нужный файл требуется подключать с использованием jQuery. Например, таким образом:

Естественно ожидать, что данный код будет выполнен после основного тела документа, а в идеале после загрузки всего html. Поэтому загружать будем по событию ready в jQuery примерно так:

При таком подключении CSS для быстрой загрузки html никаких преград не будет. В целом же структуру html страницы можно представить примерно так:

Такой подход благотворно скажется на ваших посетителях. На мой взгляд, единственным недостатком такого подхода является – подключение стилей через JavaScript. Нет JavaScript – нет стилей. Пусть доля браузеров с отключенным JavaScript мала, но пользователям все равно будет не очень приятно. Поэтому перед применение данного метода, стоит взвесить все аргументы за и против.

Данный метод очень удобно использовать вместе с асинхронной загрузкой Javascript, т.к. в этом случае пользователь очень быстро получает часть документа для ознакомления.

Комментарии (4)
  • 4X_Pro Понедельник 01 Декабрь 2014
    Вообще, проблема "нет JavaScript -- нет CSS" обходится достаточно легко: тег link для подключения CSS не удаляем вообще, а берем в тег noscript. В этом случае при включенном JS он будет грузиться скриптом, а при выключенном -- нормальным образом. Но лично я попробовав асинхронную загрузку CSS, все же от нее отказался. Потери времени на загрузку и разбор того же jQuery оказываются значительно больше, чем задержка, вызванная загрузкой основного CSS (но он у меня небольшой: всего 7 Кб). А вот вспомогательные (для разных скриптов и т.п.) подгружаю асинхронно.
  • бокс Понедельник 12 Октябрь 2015
    Подключение асинхронной загрузки css дает отличную скорость загрузки. И позиции сайта ползут вверх!
  • Среда 20 Июль 2016
    Спасибо
  • Яроослав Понедельник 01 Август 2016
    Для неадекватов с отключённым JS добавьте основные стили в тег ))
Добавить комментарий
Вам необходимо включить показ изображений в браузере для того чтобы увидеть код

Дайте нам знать, что вы - живой человек. Для нас это важно!
Кликните, если плохо видно

Прежде чем высказать свое мнение, прочитайте пожалуйста: правила

Рейтинг@Mail.ru