Примечание: ниже находится перевод статьи "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КБ ВО, даже после полной оптимизации и сжатия ваших текстовых данных. Как вы можете видеть, комплексная оптимизация всей веб-страницы весьма важна, в том числе, не нужно забыть про мультимедийные файлы. Только все меры в совокупности позволят добиться большого выигрыша в производительности.
За последний календарный год (с декабря 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.
В 2007 году на 84,8% страниц был обнаружен элемент script. Средний размер внешних файлов скриптов при этом составил 8845 байтов в несжатом виде и 6302 байтов в сжатом. Общий размер скриптов на странице составил, соответственно, 68812 и 49738 байтов. На странице, в среднем, использовалось 7 внешних файлов скриптов, 6 из которых были уникальными.
В 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 |
|---|---|---|
| GIF | 77.9% | 84.6% |
| JPEG | 55.8% | 64.5% |
| PNG | 7.2% | 32.2% |
| BMP | 0.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% семей в США по-прежнему пользуются коммутируемым доступом, как мы установили в своем последнем отчете о пропускной способности канала. Ниже приведены некоторые решения данной проблемы:
В течение последних пяти лет размер средней веб-страницы увеличился в размере более чем втрое. Число объектов на ней при этом возросло примерно в два раза. При том, что для пользователей широкополосного доступа ситуация скорее улучшилась, пользователи с модемным доступом остаются далеко позади поезда. Издержки на загрузку внешних объектов доминируют над всеми остальными, при текущем положении вещей на страницу, в среднем, приходится 50 внешних объектов. Уменьшение числа HTTP-запросов путем создания CSS sprites, объединения CSS- и JavaScript-файлов способно существенно уменьшить количество ВО. Также в том должен помочь перевод графических эффектов в CSS-правила при сохранении внешней привлекательности. Все описанные методы являются должны входить в «курс молодого бойца» любого грамотного вебмастера, занимающегося оптимизацией производительности вебсайта.
После такого обзора, практически, нечего добавить, кроме собственного исследования, подтверждающего заявленные цифры. По адресу webo.in/about/statistics/ выложена сводная статистика по всем заявленным критериям. Она анонимно собирается на основе всех анализируемых сервисом webo.in сайтов. Если кому-то будут интересны более детальные отчеты, это можно обсудить в комментариях.
TABLE, при этом 85,1% использовали DIV. Средняя глубина вложенности таблиц составила 1,47, при этом на странице их было, в среднем, 12,57. Средняя максимальная глубина вложенности HTML-тегов составила 15,35, что показывает, как DIV вытесняют таблицы в разметке странице.