Если вы серьезно относитесь к ускорению вашего сайта, и для работы ваших веб-страниц требуются большие CSS скрипты, то для оптимизации доставки CSS пользователю вам придется использовать технику отложенной загрузки CSS файлов. Отложенная загрузка позволяет загрузить файлы CSS после того, как ваша веб-страница (DOM) полностью сформирована.
Какие файлы CSS нужно загружать в отложенном режиме?
Вы должны отложить загрузку всех CSS файлов, которые блокируют отображение вашей страницы. Чтобы увидеть, какие файлы блокируют рендеринг, вы можете проверить свой сайт при помощи специальных сервисов, например, https://www.giftofspeed.com/.
Как определить, какую часть CSS скрипта следует перевести в отложенную загрузку?
Прежде чем вы решите воспользоваться отложенной загрузкой CSS скриптов, вы должны разобраться в том, как оптимизировать доставку CSS. После извлечения критического для рендеринга CSS у вас должен остаться CSS скрипт меньших размеров. Вставьте этот CSS скрипт в заголовок вашей веб-страницы и отложите загрузку оставшейся части оригинального CSS скрипта.
При составлении плана любых работ серьезную помощь может оказать составление алгоритма действий. Сделать это помогут онлайн-сервисы для создания блок-схем алгоритмов и диаграмм. Блок-схема алгоритмов наглядно покажет с чего начать и как оптимизировать свою работу.
Не переводите в отложенную загрузку небольшие скрипты CSS
Не стоит беспокоиться об отложенной загрузке, когда дело доходит до небольших скриптов CSS. Гораздо больший выигрыш в скорости вам даст перенос таких стилей в код самой HTML страницы.
Отложенная загрузка должна применяться только с большими CSS
Когда дело касается скорости загрузки страниц, отложенная загрузка наиболее полезна, когда приходится загружать большие файлы CSS. Однако отложенная загрузка всех CSS может пагубно сказаться на первом впечатлении пользователя. Потому что в этом случае при первом просмотре ваши посетители (особенно те, у кого медленное подключение к Интернету или которые используют мобильные устройства) вместо сайта могут увидеть пустую страницу, либо ее стиль будет ужасным. Причина этого заключается в том, что CSS еще не загружен. Вот поэтому применять отложенную загрузку для всех файлов CSS является не лучшим вариантом. Как было сказано выше, одним из способов решить эту проблему, может стать выделение тех стилей CSS, которые критичны для начального просмотра страницы. Выяснив это, вы должны вставить эти CSS стили в заголовок HTML, а оставшуюся часть вашего CSS перевести в режим отложенной загрузки.
Как сделать отложенную загрузку CSS при помощи небольшой программы Javascript
Для отложенной и асинхронной загрузки Javascript файлов есть особые HTML-инструменты, а именно атрибуты defer и async тега script. К сожалению, эти атрибуты не работают с CSS файлами. Но не стоит переживать, нам на помощь придет следующий код Javascript. Он позволяет осуществить отложенную загрузку любого файла CSS:
<script type="text/javascript">
/* CSS #1 */
var giftofspeed = document.createElement('link');
giftofspeed.rel = 'stylesheet';
giftofspeed.href = '../css/yourcssfile.css';
giftofspeed.type = 'text/css';
var godefer = document.getElementsByTagName('link')[0];
godefer.parentNode.insertBefore(giftofspeed, godefer);
/* CSS #2 */
var giftofspeed2 = document.createElement('link');
giftofspeed2.rel = 'stylesheet';
giftofspeed2.href = '../css/yourcssfile2.css';
giftofspeed2.type = 'text/css';
var godefer2 = document.getElementsByTagName('link')[0];
godefer2.parentNode.insertBefore(giftofspeed2, godefer2);
</script>
Вставьте этот скрипт в HTML код вашей страницы (лучше всего в футер) и замените строку "../css/yourcssfile.css" на путь к CSS файлу, загрузку которого вы хотите отложить. Если отложенная загрузка применяется только к одному файлу, то удалите секцию, относящуюся к файлу CSS #2. Если же вам нужно сделать отложенную загрузку более чем для двух файлов, то скопируйте секцию для CSS #2 и вставьте ее столько раз, сколько файлов вам нужно загрузить. При этом не забудьте заменить цифру 2 в именах переменных так, чтобы сделать их уникальными.
Обязательно в HTML теге head вставьте следующий код:
<noscript>
<link rel="stylesheet" type="text/css" href="//msiter.ru/../css/yourcssfile.css" />
<link rel="stylesheet" type="text/css" href="//msiter.ru/../css/yourcssfile2.css" />
</noscript>
Это нужно на тот случай, если устройство или браузер пользователя не поддерживает Javascript. При этом CSS файлы все равно будут загружены.
