Osfonder's blog Just another wd weblog

10Май/100

Способы ускорения загрузки страницы часть 3

Оптимизация структуры страницы

Внутреннюю структуру страницы можно бодро и весело разделить на три части: CSS стили, JavaScript код, HTML код. Точнее разделить ту часть, которая учавствует в генерации внешнего вида браузером.
И ничего удивительного в том, что от того как эти три составляющие организованны зависит то, как быстро пользователь увидит ваш сайт.
На удачу тут все канонично.

Размещайте CSS стили вверху

Проведенные исследования говорят о том, что размещение CSS стилей в теге <HEAD> позволяет браузерам прогрессивный рендеринг, то есть отображение HTML элементов по ходу их загрузки. Помещая CSS стили не в начало документа вы рискуете оставить посетителя наблюдать пустой экран пока не будут загружены стили. Дело в том, что многие браузеры не рендарят элементы пока не получат CSS во избежание двойной их отрисовки(без стилей и с ними).

Размещайте JavaScript код внизу

Внизу значит буквально перед закрывающим тэгом </BODY>. Браузеры согласно HTTP/1.1 спецификации не должны осуществлять более двух параллельных загрузок(картинки, CSS, JS) на доменное имя. Но они так же не будут начинать ни одну из внешних загрузок пока не будет загружен скрипт. Все изображения, стили и т.п. будут буквально ждать очереди пока не загрузиться JavaScript код.

Посты по теме

  1. Разработка сайтов: Процесс загрузки страницы
  2. Способы ускорения загрузки страницы часть 1
  3. Способы ускорения загрузки страницы часть 2
Комментарии (0) Пинги (0)

Пока нет комментариев.


Оставить комментарий


Нет обратных ссылок на эту запись.