Событие onload

Современная асинхронная загрузка CSS

Самый простой способ загрузить CSS в HTML-документ заключается в использовании тега link и атрибута rel=»stylesheet»:

Но есть и обратная сторона медали: это происходит синхронно. Другими словами, браузер останавливает рендеринг остальных частей страницы в процессе запроса, загрузки и парсинга файла. Это необходимо, чтобы браузер не начал отображать содержимое веб-страницы до того, как загрузится CSS. Но не все стили настолько критичны, чтобы задерживать доступ к контенту. Для этого необходимо загружать некритичные CSS файлы асинхронно, без блокировки рендеринга страницы.

Способы асинхронной загрузки CSS

Существует несколько способов заставить браузер загружать CSS асинхронно.

Первый способ (работает в современных браузерах) заключается в использовании JavaScript для создания и вставки ссылки на файл CSS в DOM:

// Создаем ссылку на таблицу стилей var myCSS = document.createElement( "link" ); myCSS.rel = "stylesheet"; myCSS.href = "mystyles.css"; // вставляем ее в конце блока head document.head.insertBefore( myCSS, document.head.childNodes[ document.head.childNodes.length - 1 ].nextSibling );

Второй способ заключается в том, чтобы задать атрибуту media в теге link значение, которое не соответствует устройству пользователя. Например, media=»print».

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

Но чтобы задействовать асинхронно загруженные стили, нужно использовать JavaScript-обработчик события onload. Это позволит изменить значение media на соответствующее браузеру и устройству пользователя. Например, screen или all:

Примечание: мы используем комбинацию перечисленных выше приемов в библиотеке loadCSS.js, предназначенной для обработки асинхронной загрузки CSS. А также обходные пути для устаревших версий браузеров, которые не поддерживают события onload в элементах link.

Также можно загружать CSS асинхронно, используя значение rel=»alternate stylesheet». Оно используется для того, чтобы предложить пользователю альтернативное представление сайта:

Методы, описанные выше, работают. Но у них есть один общий недостаток: они используют JavaScript.

Современный метод

Существует решение, созданное специально для асинхронной загрузки CSS файлов: rel=»preload» . Но даже этот вариант использует обработчик события onload.

Ниже приведен использования rel=»preload»:

Значение атрибута rel=»preload» заставляет браузеры (которые его поддерживают) загружать, но не применять указанный файл. Поэтому необходим обработчик события onload, чтобы установить атрибут rel в значение stylesheet после загрузки.

Вариант с rel=»preload» имеет одно важное преимущество: браузеры начнут загружать CSS раньше, чем при использовании подхода с несоответствующим значением атрибута media.

Использование rel=preload c loadCSS

Поддержка rel=»preload» браузерами , ну… спасибо, что хотя бы Google Chrome его поддерживает. Другие популярные браузеры находятся на пути к этому.

Но мы можем обеспечить поддержку rel = ‘preload’ с помощью полифиллов. Проект loadCSS предлагает скрипт cssrelpreload.js , который заставляет rel=»preload» работать в браузерах, которые не поддерживают его по умолчанию.

Пошаговое руководство по использованию cssrelpreload.js можно найти в readme проекта . Ниже приведен пример применения скрипта:

loadCSS можно найти на Github и NPM .

Ангелина Писанюк автор-переводчик статьи « Modern Asynchronous CSS Loading »

Пожалуйста, оставьте ваши комментарии по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки низкий вам поклон!

Источник

Отложенная загрузка стилей и встраивание критического CSS

Улучшить и ускорить отображение страницы сайта поможет отложенная загрузка стилей и встраивание критического CSS. По умолчанию браузер загружает все файлы стиля сразу и визуализация контента происходит с задержкой. Тестируя сайт инструментом PageSpeed Insights, мы получаем рекомендацию от Google: удалить ненужные правила из таблиц стилей и отложить загрузку кода CSS, который не используется в верхней части страницы.

Как известно, высокая производительность загрузки сайта снижает количество отказов. Эти три шага оптимизации рендеринга, помогут решить проблему с замедленным отображением контента.

1. Отложенная загрузка блокирующих стилей

Осуществляется заменой rel=«stylesheet» на rel=«preload». Сделать это можно вручную или с помощью LoadCSS. Содержимое тега будет выглядеть таким образом:

Preload (предварительная загрузка) — это новый веб-стандарт, направленный на повышение эффективности и обеспечение детального контроля загрузки сайта. Кроме того, есть и другие директивы (prefetch, subresource, prerender) помогающие веб-разработчикам регулировать те или иные процессы.

Иными словами, с помощью preload мы отложим загрузку некоторых ресурсов. Браузер загрузит все таблицы в фоновом режиме, что не повлияет на рендеринг. Атрибут as укажет браузеру, какой тип файла он будет обрабатывать. Возможные значения as: style, script, font, embed, image и т.д.

После того, как страница полностью загрузится сообщим браузеру, что теперь он может отобразить на экране все отложенные стили (шрифт, скрипт и т.д.), для этого в тег добавим событие Onload.

Чтобы добавить rel=«preload» на сайт WordPress без плагина, вставьте этот код в файл functions.php.

/** * Added preload for styles */ function add_rel_preload($html, $handle, $href, $media) < if (is_admin()) return $html; $html = EOT; return $html; > add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );

Обратите внимание, что в день написания этой статьи, предварительная загрузка (preload) не работает в браузерах Firefox и Safari. Выходом из этой ситуации может стать загрузка стилей в двух вариантах атрибута rel — с preload и stylesheet. Пример:

В WordPress дополнительный тег надо добавить в файл header.php после тега вручную или подключив нижеуказанный код в functions.php.

/** * Added styles for browsers that don't support preload */ function wp_head_extra_code() < echo '' ; > add_action('wp_head', 'wp_head_extra_code');

На самом деле все эти шаги оптимизации взаимосвязаны, так как выполнив первый шаг, страницы сайта могут выглядеть без стилей. Поэтому вы пока не добавляйте preload без создания критического CSS.

Критические стили необходимы для ускорения отрисовки страницы при ее загрузке в браузере.

2. Генерация критического стиля

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

Данный способ генерации может сделать неправильными относительные пути (Url) файлов. Поэтому скопируйте код в текстовый блокнот и поправьте все ссылки. Для многостраничных сайтов воспользуйтесь платным инструментом criticalcss.com. Если разрабатываете сайт с нуля, то проще всего автоматизировать процесс в Gulp пакетом Critical.

3. Встраивание критического CSS в

После того как критический CSS готов просто вставьте его в . Обратите внимание, что код должен быть обрамлён тегом .

Для WordPress применим функцию:

/** * Adding critical CSS */ function critical_css() < ?> add_action('wp_head', 'critical_css');

Также в WordPress есть несколько плагинов для осуществления отложенной загрузки стилей и автоматического создания критического CSS. Например: Autoptimize, Fast Velocity Minify, WP Critical CSS, WP Rocket ASYNC CSS или премиальный плагин WP Rocket. Плагин LiteSpeed совместно с CDN сервисом QUIC.cloud выделяет кредиты на асинхронную загрузку CSS. Этого лимита вполне достаточно для проведения теста.

И в заключение надо сказать, что отложенная загрузка стилей и встраивание критического CSS не улучшает время загрузки страницы, но имеет огромное значение для того, как пользователь воспримет загруженную страницу.

Источник

Событие onload

Событие onload используется как указатель, что веб-страница полностью загружена, включая содержание, изображения, стилевые файлы и внешние скрипты.

Синтаксис

Значения

Значение по умолчанию

Применяется к тегам

Пример

     @keyframes _transparent < from < opacity: 0; >to < opacity: 1;>> @-webkit-keyframes _transparent < from < opacity: 0; >to < opacity: 1;>> @-moz-keyframes _transparent < from < opacity: 0; >to < opacity: 1;>> #status function loadPage()  
 

В данном примере после загрузки страницы будет выведено сообщение «Страница загружена».

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

Источник