Увеличение быстродействия сайта. Правило 5: Размещайте таблицы стилей вверху страницы

Благодаря исследованиям производительности сайта было обнаружено, что размещение таблиц стилей внутри тэга HEAD создаёт видимость быстрой загрузки страницы. Это происходит потому что размещение таблиц стилей в тэге HEAD позволяет странице загружаться постепенно.

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

Ещё одной проблемой размещения таблиц стилей внизу страницы делает невозможным для многих браузеров, включая Internet Explorer, постепенное отображение страницы. Эти браузеры блокируют постепенное отображение страницы во избежание повторной перерисовки страницы, если стили будут изменены. В конечном итоге посетитель сайта видит пустую страницу сайта и вынужден ожидать пока не загрузятся все таблицы стилей.
Спецификация HTML явно декларирует, что таблицы стилей должны размещаться внутри тэга HEAD страницы: “В отличие от A, [тэг ссылки] таблицы стилей могут размещаться только внутри секции HEAD документа, также они могут декларироваться сколько угодно раз.” Ничего хорошего нет как в ожидании загрузки страницы видя пустое окно браузера так и загрузки содержимого страницы без стилей и дальнейшем ожидании их загрузки. Так что оптимальным решением будет следовать спецификации HTML и размещать таблицы стилей в секции HEAD документа.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>