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

Однако

более высокая интегральная оценка, которую дадут эти дополнения, будет в

большинстве случаев соответствовать более оптимизированному сайту.

———————— Page 19————————

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

Рис. 1.7. Панель анализа страницы дополнения YSlow для Firefox

Веб-сервисы

Существует целый ряд веб-сервисов, позволяющих получить ком-

плексную оценку клиентской производительности тестируемого сайта.

http://webo.in/ — По результату проверки предоставляется деталь-

ный план возможных действий по оптимизации со ссылками на тематиче-

ские статьи, строятся диаграмма компонентов страницы и диаграмма за-

грузки. Для объектов тестируемой страницы подсчитывается возможный

выигрыш за счет сжатия, минимизации и устранения дублирующихся фай-

лов. Сервис является русскоязычным.

http://webpagetest.org/ — Сайт вычисляет время всех стадий за-

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

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

телем параметрами. История тестирования сохраняется.

http://site-perf.com/ — Этот сервис позволяет эмулировать боль-

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

скную способность канала и многие другие, включая даже процент поте-

рянных пакетов. Отображается детальная статистика по всем серверам, с

которых производилась загрузка.

1.2.4. AI‡IEA ?‡?‡IUA?EOUEI ·?‡UAA?O‚

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

боре известных свойств распространенных браузеров. К этим свойствам

относится порядок загрузки браузером объектов, вызываемых на страни-

———————— Page 20————————

9

Обзор методов клиентской оптимизации 1

це, возможность параллельной загрузки этих объектов, максимальное

число соединений, поддержка различных алгоритмов сжатия и пр. Для то-

го чтобы узнать значения этих свойств в конкретном браузере, существу-

ет несколько приведенных ниже веб-сервисов.

Browserscope (http://www.browserscope.org/)

Этот сервис при помощи специально разработанных тестов позволя-

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

зации, характеристики вашего браузера. Кроме того, на веб-сайте сохра-

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

годаря чему можно найти информацию о поддержке тех или иных харак-

теристик почти для любой версии любого браузера.

Рис. 1.8. Отчет о характеристиках наиболее распространенных браузеров

сервиса Browserscope

Cuzillion (http://stevesouders.com/cuzillion/)

Этот сервис позволяет сконструировать, а затем загрузить в вашем

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

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

шение каждой предпринятой попытки Cuzillion отображает время, затра-

ченное на загрузку созданной страницы. Благодаря этому сервису легко

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

их загрузки в каждом конкретном браузере.

———————— Page 21————————

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

Рис. 1.9. Пример веб-страницы, созданной сервисом Cuzillion

1.3. iIAI??AIEA ?‡AIA?‡ A‡„?UE‡AI?? O·?AIUO‚

Очевидный способ увеличения скорости загрузки страницы —

уменьшение размера загружаемых объектов. В ряде ситуаций можно без

потерь содержания изменить состав HTML-документа, файлов CSS и

JavaScript и тем самым уменьшить суммарный размер загружаемых поль-

зователями страниц.

———————— Page 22————————

1

Обзор методов клиентской оптимизации 2

На высоконагруженных страницах, какими являются, например, глав-

ные страницы поисковых систем Google, Yahoo, Яндекс, возникают ситуа-

ции, когда каждый лишний байт страницы критичен для быстродействия.

1.3.1. aEIEIEA‡?E?, O·UUOI‡?E? E OE‡UEA IO‰‡

Минимизация

Этим термином именуется процесс уменьшения объема кода за счет

следующих операций:

? удаление избыточных пробелов, табуляций и переносов строк;

? удаление комментариев;

? удаление дублирующегося кода.

Минимизация применима к коду HTML, CSS и JS и в зависимости от

размера и содержимого кода позволяет достичь результатов, близких к

gzip-сжатию, уменьшать файлы до 30% от исходного размера, а иногда и

более.