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
9Май/100

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

Уменьшение объема передаваемых cookie данных

Разобравшись с ускорением за счет уменьшения количества HTTP запросов поразмыслим, как ещё можно оптимизировать структуру страницы дабы увеличить скорость её загрузки.
Согласно этапам процесса загрузки страницы, на стадии передачи данных браузером отправляются cookie с каждым запросом к внешнему файлу, будь то css, js или даже изображение. Таким образом по проводам гоняются лишние данные без особой на то причины. Способ избежать этого прост:

Выносить всю статику на домены не связанные с cookie

Это может быть сабдомен или вообще другой домен. И вы часто можете наблюдать это на больших ресурсах, когда изображения и скрипты подгружаются с чего-то вроде i.yandex.st, farm1.static.flickr.com, st.deviantart.net, l.yimg.com/g/css, l.yimg.com/g/javascript, ytimg.com.

Тут есть тонкость. Куки, установленные на домене верхнего уровня osfonder.ru будут передаваться на все поддомены js.osfonder.ru, css.osfonder.ru и т.п. Если вы хотите использовать поддомены для статичных файлов, то следует устанавливать куки на сабдомене www — www.osfonder.ru.
Другой способ — это купить отдельный домен для передачи через него всех статичных файлов для вашего сайта. Например у Yandex это yandex.st, у Yahoo! — yimg.com, у youtube.com — ytimg.com.

http://i.yandex.st/weather/i/1april/ruchka.gif


Знакомо ? )

Посты по теме

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