Статьи

Перевод: Мациевский Николай aka sunnybear
Опубликована: 2 июня 2008

Средний размер веб-страницы увеличился втрое с 2003 года

Примечание: ниже находится перевод статьи "Average Web Page Size Triples Since 2003", в которой автор рассуждает о тенденциях, происшедших за последние 5 лет, касающихся размера веб-страницы и числа объектов на ней. Очень интересно сравнить полученные данные с ростом пропускной способности интернета, по моему мнению, последняя увеличилась примерно так же. Отсюда можно сделать вывод, что клиентская оптимизация ни разу не потеряла своей актуальности за последние 10—15 лет. Мои комментарии далее курсивом.

Размер средней веб-страницы увеличился более чем втрое с 2003 года. С 2003 по 2008 годы она увеличилась в размере с 93,7Кб до более 312Кб (см. рисунок 1), почти на 233% (Domenech и др. 2007, Flinn & Betcher 2008). За тот же пятилетний период число объектов на такой странице примерно удвоилось: с 25,7 до 49,9 объектов на страницу. Если взять статистику за более длительный период, то окажется, что с 1995 года размер средней веб-страницы увеличился в 22 раза, а число объектов на страницу в 21,7 раза.

Рисунок 1. Рост размера средней веб-страницы

Анатомия веб-страницы

Каждая веб-страница представляет собой набор объекта-контейнера (ОК) и ряда внешних объектов (ВО). ОК обычно представлен в виде (X)HTML-файла, который содержит ссылки на ВО, являющиеся картинками, аудио- или видео-файлами, а также внешними CSS- и JavaScript-файлами. Большая часть нетекстовых ВО обычно изначально сжата, поэтому выигрыш от сжатия может быть получен только для самого (X)HTML-файа и некоторых CSS- и JavaScript-файлов. Для более 60% веб-страниц ОК занимает менее 50% общего (по данным webo.in, эта цифра составляет 10%) объема всей страницы. В среднем, ОК «весит» 44% (Yuan, Li, & Chi 2005).

Из этого следует, что методы оптимизации (X)HTML и HTTP-сжатия не являются наиболее перспективными (авторы не учли сжатия стилей и скриптов, но их учет не сильно меняет картину). Самое большее, чего можно ожидать от (X)HTML-оптимизации, будет меньше 50% от общего размера страницы. В среднем, для главной страницы в 300Кб вам придется загрузить, по крайней мере, еще 150КБ ВО, даже после полной оптимизации и сжатия ваших текстовых данных. Как вы можете видеть, комплексная оптимизация всей веб-страницы весьма важна, в том числе, не нужно забыть про мультимедийные файлы. Только все меры в совокупности позволят добиться большого выигрыша в производительности.

Рост Top 1000 веб-страниц в 2007

За последний календарный год (с декабря 2006 по декабрь 2007) средний размер тысячи наиболее популярных веб-страниц вырос на 24,2%. В цифрах это составляет 310,4КБ против 250Кб (см. рисунок 2). Если продолжить этот график, то средняя главная страница в конце 2008 превысит 385КБ в своем размере.

Рисунок 2. Рост среднего размера top 1000 главныx страниц в 2007 году

Общее число объектов на страницу в 2007 года выросло на 14,5% с 44,2 в декабре 2006 до 50,6 в декабре 2007. В октябрьском опросе 2007 года 50 независимых ритейлеров было установлено, что среднее число объектов у них на страницах составляет 60,5 (Flinn & Betcher 2007). Учитывая то, что среднее число объектов превысило 50, можно с уверенностью сказать, что задержки при загрузке страницы, ими вызванные, превышают любые другие.

Изменение времени ответа — канал сужается

За время с 2003 по 2008 годы веб-страница более чем утроилась в размере, число объектов при этом почти удвоилось. Из-за этого для пользователей с низкой пропускной способностью канала (56Кб и ISDN) с течением времени время ответа (открытия) сайта увеличивается. Для пользователей высокоскоростных каналов, напротив, среднее время ответа уменьшилось. Для таких пользователей среднее время загрузки по индексу интернет производительности Keynote Business 40 (KB40) уменьшилось с 2,8 до 2,33 секунд с февраля 2006 до февраля 2008 (см. рисунок 3 и Berkowitz & Gonzalez 2008).

Рисунок 3. Средний индекс производительности вебсайтов KB40 по отношению к пропускной способности канала с февраля 2006 по февраль 2008 (источник: Keynote Systems, Inc.)

Таким образом, рост пропускной способности канала все еще опережает скорость увеличения размера и сложности средних веб-страниц (однако, всего на 17%). Именно поэтому пользователи быстрых интернет-соединений ожидают от сайтов более быстрой скорости загрузки, хотя при этом все остальные пользователи чувствуют, что Интернет стал медленнее из-за увеличившегося размера страницы.

Характеристики средней веб-страницы

В исследовании, проведенном в 2006 году и охватившем более 21500 веб-страниц без фреймов, Ryan Levering и Michal Cutler установили, что на средней веб-странице содержится 474 слов, 281 HTML-тегов и 41 ссылка, 10 из которых указывают за пределы текущего домена (Levering & Cutler 2006). Они также обнаружили, что средняя веб-страница имеет 1440 пикселей в высоту, что примерно в 2 раза больше, чем размер экрана. И когда веб-страница открыта, то пользователь видит больше графики нежели текста. Графические объекты доминируют на средней веб-странице, вызывая при этом значительную часть задержек, связанных с числом объектов.

Изменения в средней веб-странице с течением времени

Следующее исследование, проведенное авторов в 2007, выявило изменения в структуре среднестатистической веб-страницы. Несмотря на широкое распространение CSS, в 2007 году было установлено, что 62,6% всех веб-страниц по-прежнему используют таблицы для разметки страницы, а 32,8% используют тег font для стилизации элементов (Levering 2007). Хорошей новостью стало то, что средняя глубина вложенности таблиц уменьшилась при этом наполовину, по сравнению с 2006 годом, — с 2,95 до 1,47. Сложные вложенные таблицы могут вызвать существенные задержки в браузерах при отображении страницы, потому что сложные таблицы должны быть проанализированы целиком перед своим отображением. Среднее число элементов на странице выросло более чем вдвое с 2006 по 2007 год, с 281 до 592,6.

Использование JavaScript

В 2007 году на 84,8% страниц был обнаружен элемент script. Средний размер внешних файлов скриптов при этом составил 8845 байтов в несжатом виде и 6302 байтов в сжатом. Общий размер скриптов на странице составил, соответственно, 68812 и 49738 байтов. На странице, в среднем, использовалось 7 внешних файлов скриптов, 6 из которых были уникальными.

Использование CSS

В 2007 году 82,4% страниц использовали тег link, а 54,5% — тег style (при этом средне число внутренних тегов style составило 2,27). Средний размер внешнего файла стилей составил в 6575 байтов в несжатом виде и 4457 байтов в сжатом. Общий размер всех файлов стилей на среднестатистической странице при этом был 15175 и 10347 байтов соответственно.

Использование картинок

Картинки использовались на 91,6% всех веб-страниц в исследовании 2007 года. GIF-формат при этом встречался на 84,6% веб-страниц, при этом только на 77,9% в 2006 году (см. Таблицу 1). Использование JPEG было замечено на 64,5% веб-страниц, против 55,8% в 2006 году. а PNG использовали в 32,2% случаев. При этом заметен существенный рост по сравнению с 2006 годом и 7,2%. BMP, однако, встречались на 0,8% веб-страниц в 2006 году. Стоит заметить, что изображения в BMP-формате довольно велики по размеру, и данный формат не подразумевает их сжатие. В вебе стоит избегать его использования.

Форматы картинокЧастота в 2006Частота в 2007
GIF77.9%84.6%
JPEG55.8%64.5%
PNG7.2%32.2%
BMP0.8%-

Таблица 1. Использование форматов картинок на средней веб-странице (исследования 2006 и 2007 годов)

Если сложить вместе все картинки на странице, то получится область в 49144 пикселей или картинка размером 221 на 221 пикселей (см. Рисунок 4).

Рисунок 4. Средний совокупный размер картинок на веб-странице

Крупномасштабное исследование подтвердило эти выводы тем фактом, что более 75% HTTP-запросов приходится на долю картинок (Gonzalez-Canete, Casilari, & Trivino-Cabrera 2007).

Рост размера мультимедиа

Использование потокового видео в Интернете растет более чем на 100% ежегодно (Li и др. 2005). С 2000 по 2005 годы общий размер потоковых видео-файлов, размещенных в Интернете, вырос более чем на 600%. Примерно 87% всех показов прерываются пользователями в первые 10 секунд, однако, расходуя при этом 20% серверного канала (Guo и др. 2005). Хотя видео-файлы составляют только 3% всех запросов на сервер, они занимают более 98,6% всей переданной информации (Gill и др. 2007). Следуя закону Pareto, просмотры 10% наиболее популярных видео-роликов на YouTube составляют 80% всех просмотров, серьезно увеличивая роль кеширования как основного инструмента производительности (Cha и др. 2007).

В конечном счете, для роликов длиннее 30 секунд около 13% домашних и 40% корпоративных пользователей ощущают ухудшение качества для потокового видео, вызванное дополнительной буферизацией, сменой потока и остановками просмотра. Для роликов более 300 секунд приведенные цифры еще выше. По мере проникновения широкополосного доступа в массы растет размер видео-файлов, их битрейт и продолжительность (см. рисунок 5).

Рисунок 5. Рост продолжительности видео-роликов

В 1997 году 90% всех видео-роликов продолжались менее 45 секунд (Acharya & Smith 1998). В 2005 средняя продолжительность составила 120 секунд (Li и др. 2005). В 2007 она же была уже 192,6 секунд (Gill и др. 2007). Средний битрейт видео в Интернете вырос с 200Кбит/с в 2005 до 328Кбит/с на YouTube в 2007 году. Поэтому в конце 2007 средний размер видео-файла составил более 63Мб. На YouTube средний роик занимает 10Мб, при этом ежедневно туда добавляется более 65000 новых видео-файлов.

Почему настолько важен рост размера средней веб-страницы?

Целью данной статьи является обозначить текущие тенденции в изменении размера и состава средней веб-страницы. Некоторые читатели спрашивали меня, почему так происходит. Отвечаю. Веб 2.0 технологии, например, AJAX, очевидно, существенно повлияли на число объектов на странице в большую сторону, при этом также увеличился размер JavaScript-файлов. Страницы, которые генерируются автоматически, обычно не так сильно оптимизированы, как сайты, заточенные вручную. При этом на первых очень большие CSS- и JavaScript-файлы, а также другие компоненты страницы, которые присутствуют по всему сайту.

По мере того как пропускная способность канала становится больше, веб-дизайнеры создают все более сложные и детальные макеты страниц, предполагая, что у всех высокоскоростной доступ в Интернет, или вообще игнорируя пользователей коммутируемого доступа. ВО время написания данной статьи, однако, 43% семей в США по-прежнему пользуются коммутируемым доступом, как мы установили в своем последнем отчете о пропускной способности канала. Ниже приведены некоторые решения данной проблемы:

  • Используйте последовательное улучшение (progressive enhancement), чтобы отдавать пользователям универсальную HTML-страницу, на которой будет добавлена дополнительная функциональность для тех браузеров, которые ее понимают (такой подход еще называют Grace Degradation).
  • Предлагайте две версии вашего сайта: для пользователей выделенной линии и коммутируемого доступа (мы выбрали первое решение)
  • Создавайте ваш сайт, ориентируясь на максимально широкую аудиторию (как мне кажется, такой подход не очень уместен: мы таким образом ограничим «продвинутых» пользователей, которые составляют большинство аудитории, по сравнению с пользователями медленных каналов)

Заключение

В течение последних пяти лет размер средней веб-страницы увеличился в размере более чем втрое. Число объектов на ней при этом возросло примерно в два раза. При том, что для пользователей широкополосного доступа ситуация скорее улучшилась, пользователи с модемным доступом остаются далеко позади поезда. Издержки на загрузку внешних объектов доминируют над всеми остальными, при текущем положении вещей на страницу, в среднем, приходится 50 внешних объектов. Уменьшение числа HTTP-запросов путем создания CSS sprites, объединения CSS- и JavaScript-файлов способно существенно уменьшить количество ВО. Также в том должен помочь перевод графических эффектов в CSS-правила при сохранении внешней привлекательности. Все описанные методы являются должны входить в «курс молодого бойца» любого грамотного вебмастера, занимающегося оптимизацией производительности вебсайта.

После такого обзора, практически, нечего добавить, кроме собственного исследования, подтверждающего заявленные цифры. По адресу webo.in/about/statistics/ выложена сводная статистика по всем заявленным критериям. Она анонимно собирается на основе всех анализируемых сервисом webo.in сайтов. Если кому-то будут интересны более детальные отчеты, это можно обсудить в комментариях.

Использованный материал

  1. Acharya, S. и B. Smith, "An Experiment to Characterize Videos Stored On the Web," в MMCN 1998 (San Jose, CA: Jan. 1998), 166-178.
  2. Berkowitz, D. и A. Gonzalez, "Andy: Keynote data for your use," (8 февраля 2008). Keynote Systems, Inc. обеспечила график изменения времени ответа KB40 с февраля 2006 по февраль 2008. Среднее время загрузки веб-страницы по KB40 уменьшилось с 2,8 до 2,33 секунд с февраля 2006 по февраль 2008.
  3. Cha, M., Kwak, H., Rodriguez, P., Ahn, Y.-Y. и S. Moon, "I Tube, You Tube, Everybody Tubes: Analyzing the World's Largest User Generated Content Video System," в IMC 2007 (San Diego, CA: 24–26 октября 2007), 1-13. По-видимому, YouTube отвечает за 60% всех показов онлайн-видео, обслуживая более 100 видео-роликов ежедневно. Простое кеширование наиболее популярных роликов способно до 50% уменьшить исходящий трафик с серверов.
  4. Domenech, J., Pont, A., Sahuquillo, J. и J. Gil, "A user-focused evaluation of web prefetching algorithms," Computer Communications 30, номер 10 (2007): 2213-2224. В 1995 году на веб-странице, в среднем, присутствовало лишь 2,3 объекта, а в 2003 году их стало 25,7 (среднее по двум трендам).
  5. Flinn, D. и B. Betcher of Gomez.com, "Re: latest top 1000 website data?", 8 января 2008. В январе 2008 средний размер всех файлов на стартовой странице из top 1000 составил 312КБ, при этом всего запрашивалось 49,92 объектов.
  6. Flinn, D. и B. Betcher, "Re: mockup of section in book about slower pages vs higher,", 16 ноября 2007. Gomez исследовал время загрузки, целостность и внешние объекты для вебсайтов top 50 ритейлеров.
  7. Gill, P., Arlitt, M., Li., Z. и A. Mahanti, "YouTube Traffic Characterization: A View From the Edge," в IMC 2007 (San Diego, California: 24–26 октября 2007), 20. Около 24% всех видео-роликов прерываются пользователями по причине медленной производительности или плохого качества.
  8. Gonzalez-Canete, F., Casilari, E. и A. Trivino-Cabrera, "Characterizing Document Types to Evaluate Web Cache Replacement Policies," в ECUMN 2007 (Toulouse, France: 14–16 февраля 2007), 3-11.
  9. Guo, L., Chen, S., Xiao, Z. и X. Zhang, "Analysis of Multimedia Workloads with Implications for Internet Streaming,", WWW 2005 (Chiba, Japan: 10–14 мая 2005), 519–528.
  10. King, A., "CSS Sprites: How Yahoo.com and AOL.com Improve Web Performance,". Посмотрите, как AOL и Yahoo! использовали CSS sprites для улучшения производительности их сильно загруженных главных страниц. CSS sprites уменьшают число HTTP-запросов за счет CSS-позиционирования выбранных картинок, которые находятся в одном ресурсном файле. Для улучшения доступности и удобства использования CSS sprites обычно используются для иконок ии декоративных эффектов. Website Optimization, 26 сентября 2007.
  11. King, A., "HTTP Compression,". HTTP-сжатие использует в своей основе стандартные алгоритмы gzip- и deflate-сжатия для ваших XHTML-, CSS- и JavaScript-файлов, чтобы ускорить загрузку веб-страницы и уменьшить трафик. Website Optimization, 4 декабря 2003.
  12. King, A., "Minimize HTTP Requests,". Объединяя внешние файлы в один и встраивая CSS и JavaScript внутрь HTML-файлов вы можете значительно уменьшить число HTTP-запросов, требуемых для отрисовки вашей страницы. Каждый отдельный HTTP-запрос влечет за собой определенные сетевые издержки, в том числе, со стороны сервера, что ведет к непредсказуемым задержкам. Website Optimization, 17 декабря 2003.
  13. King, A., "Оптимизация параллельных загрузок для минимизации издержек,". При том, что для средней веб-страницы требуется более 50 объектов, издержки на их доставку клиентам доминируют над другими видами задержек при загрузке веб-страницы. Увеличивая число параллельных потоков при загрузке страницы, используя для этого несколько хостов, можно добиться выигрыша в уменьшении заержки при открытии веб-страницы до 40%. Website Optimization, 26 декабря 2007.
  14. King, A., "Suture CSS or JavaScript Files to Reduce HTTP Requests,". Узнайте, как можно объединить CSS- или JavaScript-файлы вместе на сервере перед отправкой пользователям для уменьшения числа HTTP-запросов. Стоит рассмотреть этот серверный подход по объединению статических файлов. Website Optimization, 31 октября 2007.
  15. King, A., "The Average Web Page - Preliminary Results,". Предварительные результаты исследования веб-страниц в 2006 году, проведенные Ryan Levering. OptimizationWeek.com, 26 октября 2006.
  16. King, A., "Use Server Cache Control to Improve Performance,". Настройте веб-сервер Apache для более эффективного кеширования, которое позволит уменьшить трафик и увеличит производительность веб-сайта. Кеширование веб-страниц уменьшает задержки при загрузке страницы. Website Optimization, 23 октября 2004.
  17. Levering, R., "RE: revised web page survey," (27 июля 2007). В исследовании, коснувшемся 500 случайных страниц найденных автором через Google, 62,6% всех страниц использовали тег TABLE, при этом 85,1% использовали DIV. Средняя глубина вложенности таблиц составила 1,47, при этом на странице их было, в среднем, 12,57. Средняя максимальная глубина вложенности HTML-тегов составила 15,35, что показывает, как DIV вытесняют таблицы в разметке странице.
  18. Levering, R. и M. Cutler, "The Portrait of a Common HTML Web Page," в DocEng 2006 (Amsterdam, The Netherlands: 10–13 октября 2006), 198–204. Установлено, что средняя веб-страница содержит 474 слова, 281 HTML-тег и 41 ссылку, 10 из которых являются внешними (ведут за пределы домена). Также установлено, что средняя высота веб-страницы составляет 1440 пикселей. Средняя вложенность таблиц составила 2,95.
  19. Li, M., Claypool, M., Kinicki, R. и J. Nichols, "Characteristics of Streaming Media Stored on the Web,", ACM Transactions в Internet Technology 5, #4 (2005): 601–626.
  20. Yuan, J.-L., Li, X. и C.-H. Chi, "Understanding the Impact of Compression on Web Retrieval Performance," в AusWeb05 (Royal Pines Resort, Australia: 2–6 мая 2005), ausweb.scu.edu.au/aw05/papers/refereed/yuan/paper.html (10 февраля 2008).

Читать дальше

Все комментарии (habrahabr.ru)