Чем нас "грузят"? - BESTSELLER.Yaroslavl.ru

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

Я задался целью определить, какова же реальная доля ценной текстовой информации в загружаемых из Интернета страницах и сколько денег уходит у среднего посетителя сайта на оплату лени и низкой квалификации создателей сайтов. Для этого я написал небольшую программку, анализирующую исходный код HTML-страниц и разделяющую все содержащиеся в нем символы на три группы:

Лишние пробелы и символы табуляции, которые игнорируются браузерами и просто увеличивают объем файлов, не неся никакой полезной нагрузки.
Форматирование, включающее в себя все HTML-коды и переводы строк. Без форматирования не обойтись, но именно на этой части наиболее заметна разница в квалификации программистов и применяемых инструментах.
Полезная информация, то есть те тексты, которые мы видим на экранах, и ради которых всё и затевается.

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

Давайте посмотрим, как выглядит HTML-код в простейшем примере. Ниже приведена простейшая таблица,

Уважайте посетителей!

которая в оптимальном HTML-коде выглядит примерно так (не забудьте про цветовую кодировку):

<table width=50% border=1>  
<tr>  
<td align=center>Уважайте посетителей!</td>  
</tr>  
</table>

Как видите, присуствует только форматирование и полезная информация. В самом экстремальном варианте верстки вы не увидите лишних переходов на новые строки, но это снизит читаемость кода и затруднит ручную работу с ним, а самый качественный код всегда является результатом ручной работы, поэтому этот код можно считать оптимальным.

В том случае, если код верстается не руками в текстовом редакторе, а с помощью специализированных редакторов, в нем могут появиться символы второй группы, создающие отступ некоторых строк. Здесь же в качестве примера приведен сдвоенный пробел между словами текста - он тоже не отображается браузером. Ошибки такого рода могут возникать из-за небрежности программиста.

<table width=50% border=1>  
  <tr>  
    <td align=center>Уважайте  посетителей!</td>  
  </tr>  
</table>

Самый жуткий результат обычно дают редакторы класса WYSIWYG (What You See Is What You Get - что видите, то и получаете). Несомненно, использование подобных редакторов - самый простой путь создания HTML-документов, так как при этом даже не требуется знания HTML, но возможность контроля качества кода практически отсутствует, и в него попадает огромное количество избыточной информации, что приводит к неадекватному "распуханию" страниц. Ниже приведен типичный пример, полученный после загрузки оптимального кода в MS Word и сохраненный им после минимального редактирования:

<TABLE BORDER CELLSPACING=1 BORDERCOLOR="#000000" WIDTH=519>  
<TR><TD VALIGN="MIDDLE">  
<P ALIGN="CENTER">Уважайте посетителей!</TD>  
</TR>  
</TABLE>

Как можно видеть, уже появился некоторый лишний код, а ведь MS Word - не самый страшный пример, а примененная в примере верстка - не самая сложная...

В целом можно сказать, что в идеале красного цвета не должно быть совсем, а желтый должен быть в пределах 60-90% в зависимости от сложности верстки и объема текстов, таким образом, зеленый цвет (полезная текстовая информация) должен занимать от 10% до 40% текстовой части трафика. Даже если принять, что графика занимает такой же объем, что и текст (что, конечно же, занижено), то в этом случае мы cможем "прочесть" всего от 5% до 20% трафика. Эти цифры справедливы только для качественно закодированных HTML-страниц, в реальной жизни можно встретить страницы, где объем полезной текстовой информации не превышает 1%. Добавьте к общему объему текстовой части страниц графические файлы, Flash-вставки, скрипты, и в итоге получится, что посещение некоторых сайтов могло бы быть на пару порядков дешевле, если бы можно было отсечь все ненужное вам уже на стороне веб-сервера.

Для того, чтобы подтвердить свои слова конкретными примерами, я протестировал главные страницы сайтов студий из категорий "лучшие" и "хорошие" и сравнил их по качеству HTML-кода, которое, как я уже говорил, может косвенно свидетельствовать как о квалификации персонала студий, так и о степени уважения к посетителю. Результаты получились весьма любопытные. Советую ознакомиться.

Mick