Главная Библиотека Оптимизация работы сайта CSS Расположение таблиц стилей в Заголовке

Расположение таблиц стилей в Заголовке

В статье "Put Stylesheets at the Top" автор рекомендует располагать таблицы стилей в заголовке документа, чтобы страницы загружались быстрее.

При исследовании производительности на Yahoo!, мы обнаружили, что при перемещении таблиц стилей в Заголовок документа страницы загружаются быстрее.  Это происходит потому, что перемещение таблиц стилей в Заголовок позволяет странице визуализироваться постепенно.

Интерфейсные инженеры, отвечающие за производительность, хотят, чтобы страница загружалась постепенно; т. е. мы хотим, чтобы браузер отображал любое количество контента как можно быстрее. Это особенно важно для страниц с большим количеством контента и для пользователей с медленной скоростью интернет-соединения. Важность предоставления пользователям визуального ориентира, в виде индикаторов хода процесса, была хорошо исследована и документирована. В нашем случае индикатором хода процесса является страница HTML! Когда браузер загружает страницу постепенно, заголовок, навигационная панель, логотип в верхней части, и т. д., всё служит визуальным ориентиром для пользователя, который ожидает загрузку страницы. Это улучшает работу пользователя.

Проблема с расположением таблиц в конце документа состоит в том, что это мешает постепенной визуализации страниц во многих браузерах, включая Internet Explorer. Эти браузеры блокируют визуализацию, чтобы избежать необходимости перезагружать элементы страницы при изменении их стилей. И пользователь ожидает загрузку, наблюдая пустую страницу.

В описании HTML ясно сказано, что таблицы стилей необходимо размещать в Заголовке страницы: "В отличие от A, [ССЫЛКА] может располагаться только в верхнем разделе документа, хотя она может повторяться любое количество раз. "Ни одна из альтернатив не стоит рассмотрения. Оптимальное решение состоит в том, чтобы следовать описанию HTML и загружать таблицы стилей в Заголовок документа.

 

Оригинал статьи на developer.yahoo.com

Перевод КОМТЕТ komtet.ru