Реактивные веб-сайты

uU‡O ?AU‚A?U?E: O?AU?EI ‚?AIAIE A‡„?UAIE

Для более точного анализа реальной картины можно воспользовать-

ся счетчиком времени загрузки (более подробно он описан в практичес-

Рис. 8.6. Скорость загрузки страниц на четвертом этапе клиентской

оптимизации для www.vaclavak.ru, источник: webo.in

———————— Page 333————————

332 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

ком приложении в книге «Разгони свой сайт»), который замеряет полное

время загрузки у всех посетителей сайта для произвольной страницы. Ус-

тановка его чрезвычайно проста: нужно получить код, установить его мак-

симально близко к началу страницы в шаблоне (идеально — сразу после

title) и пару дней собирать статистику (зависит от числа хитов; если на

сайт заходит несколько десятков тысяч ежедневно, то хватит и дня или

пары часов).

После установки счетчика обнаружилась следующая картина: сред-

нее время загрузки (уже оптимизированного) сайта составило 16 секунд,

за 4 секунды страницы загружались у 58% пользователей.

8.8.5. uU‡O O?U?E: «IAI‡‚?A?E‚‡?» ?AII‡I‡

Было решено существенно переработать логику загрузки страницы:

вынести рекламные блоки в пост-загрузку, а загрузку самого JavaScript

«отложить». Все это было сделано в лучших традициях «ненавязчивого»

JavaScript, которые описаны в седьмой главе книги «Разгони свой сайт».

Google Analytics был вынесен на событие OnDOMReady (для точности изме-

рения посещений), остальные — на window.onload.

В результате на странице сразу загружалось только основное содер-

жание. Сразу после него — Google Analytics и дополнительные библиоте-

ки для галереи изображений (но только на тех страницах, где это было

Рис. 8.7. Скорость загрузки страниц на пятом этапе клиентской

оптимизации для www.vaclavak.ru, источник: webo.in

———————— Page 334————————

3

3

Практическое приложение 3

нужно: в частности, это не требовалось для главной страницы). Затем шла

загрузка рекламных банеров, информера с курсом валют и погоды. В са-

мом конце на страницу (в самый низ) вставлялся блок с остальными счет-

чиками. Загрузка почти всего (99% кода) JavaScript была переделана на

«ненавязчивый» манер.

Единственная сложность возникла с блоком валют — он вызывался

через внешний JavaScript-файл, который в свою очередь содержал docu-

ment.write. Его пришлось вставлять через динамический iframe, который

получал данные, а потом отправлял родительской странице. Поскольку

информер этот загружается достаточно медленно, получился значитель-

ный выигрыш во времени загрузки страницы после его вынесения в пост-

загрузку.

После очередных замеров с помощью счетчика времени загрузки по-

лучилась следующая картина: среднее время загрузки — 7,3 секунды (ус-

корение более 100% от уже оптимизированного варианта), за 4 секунды

сайт загрузился у 82% посетителей.

8.8.6. a‡II??AIEA

Благодаря существованию большого количества удобных инструмен-

тов для клиентской оптимизации (на http://webo.in/) удалось очень опе-

ративно проработать клиентскую составляющую обычного в общем-то

сайта. Только для широкополосного подключения скорость загрузки уве-

Рис. 8.8. История применения клиентской оптимизации для www.vaclavak.ru

———————— Page 335————————

334 РЕАКТИВНЫЕ ВЕБ-САЙТЫ

личилась в 7 раз (для коммутируемого доступа это число еще более зна-

чительно в связи с существенным уменьшением числа запросов, необхо-

димых для первичного отображения страницы).

Сам процесс оптимизации относительно оценки самого webo.in мож-

но представить следующим образом (в этом уже может помочь история

проверок сайта, http://webo.in/my/action/history/):

Возможно, не все из описанных шагов необходимы для среднестати-

стического сайта, рассчитанного на рядовых пользователей Интернета, но

сам процесс оптимизации (от простого к сложному, от более эффективно-

го — к менее эффективному) должен, по-видимому, протекать именно та-

ким образом.

———————— Page 336————————

5

3

Заключение 3

a‡II??AIEA

C I‡?AOU‚A OOOIAOIO‚E?

В последние годы мир веб-разработки стал существенно тяготеть к кли-

ентским приложениям.