Скорость загрузки страниц

[Belikov]

По поводу страниц форума (их непотребного объёма) есть несколько мыслей, которые хочу оформить здесь, чтобы, по крайней мере, было где их искать. :) Сейчас код одной полной страницы сообщений занимает порядка 40-50 килобайт (это без учёта графики и стилевых описаний, которые в прочем, сидят в кэше и не загружаются повторно, поэтому мало меня волнуют). Проблема в том, что хороший сёрфинг по форуму запросто обходится в мегабайт трафика.

Посмотрим на страницу. Она содержит шапку, подвал и десяток повторяющихся блоков сообщений. Первая мысль, которая появляется у меня, состоит в оптимизации блоков сообщений, путём вёрстки, основанной на CSS, а не на таблицах.

Итак, как сейчас выглядит код одного сообщения и сколько места он занимает:

Код: Выделить всё

<tr>

  <td rowspan="2" class="row2" valign="top">

    <span class="name">

      <a id="4252" name="4252"></a>

      <strong>

        <a href="javascript:emoticon('[b]Belikov[/b], ')">

          Belikov

        </a>

      </strong>

    </span>

    <br/>

    <span class="postdetails">Администратор

      <br/>

      <img border="0" alt="" src="images/1234567890.jpg"/>

      <br/>

      <br/>

      Зарегистрирован: 31.10.1812<br>

      Сообщения: 1000000<br>

      Откуда: Смоленск</span><br>

      <img height="1" width="150" alt="" src="images/spacer.gif"/>

    </span>

  </td>

  <td valign="top" class="row2">

    <table cellpadding="0" cellspacing="0" border="0" width="100%">

     <tbody>

      <tr>

        <td class="postdetails">

          <a href="http://forum.smolensk.ws/viewtopic.php?p=">

            <img class="imgspace" height="9" width="12" 

              title="Новое сообщение" alt="Новое сообщение"

              src="images/icon_minipost_new.gif"/>

          </a>

          Добавлено: Чт Дек 11, 2003 11:55

        </td>

        <td nowrap="nowrap" valign="top" align="right">

          <a href="http://forum.smolensk.ws/posting.php?mode=">

            <img class="imgtopic" height="18" width="59" border="0"

              title="Ответить с цитатой" alt="Ответить с цитатой"

              src="images/icon_quote.gif"/>

          </a>

          <a href="http://forum.smolensk.ws/posting.php?mode=">

            <img class="imgtopic" height="18" width="59" border="0"

              title="Изменить/удалить это сообщение" alt="Изменить/удалить это сообщение"

              src="images/icon_edit.gif"/>

          </a>

          <a href="#top">

            <img class="imgtopic" height="18" width="16"

              title="Вернуться к началу" alt="Вернуться к началу"

              src="images/icon_up.gif"/>

          </a>

          <a href="http://forum.smolensk.ws/posting.php?mode=">

            <img class="imgtopic" height="18" width="16" border="0"

              title="Удалить сообщение" alt="Удалить сообщение"

              src="images/icon_delete.gif"/>

          </a>

        </td>

      </tr>

     </tbody>

    </table>

    <table cellspacing="0" cellpadding="0" border="0" width="100%">

     <tbody>

      <tr>

        <td class="postbody" valign="top">

          <hr/>

          Текст сообщения. Для большей точности я сделаю его размер

          похожим на нормальное сообщение. Для большей точности я сделаю

          его размер похожим на нормальное сообщение. Для большей точности

          я сделаю его размер похожим на нормальное сообщение.

        </td>

      </tr>

      <tr>

        <td class="genmed" valign="bottom" height="40">

          <br/>Моя подпись

          <span class="postdetails"></span>

        </td>

      </tr>

     </tbody>

    </table>

  </td>

</tr>

<tr>

  <td class="row2" nowrap="nowrap" valign="bottom">

    <a href="http://forum.smolensk.ws/profile.php?mode=viewprofile&u=1">

      <img class="imgtopic" height="18" width="59" border="0"

        title="Посмотреть профиль" alt="Посмотреть профиль"

        src="images/icon_profile.gif"/>

    </a>

    <a href="http://forum.smolensk.ws/privmsg.php?mode=post&u=1">

      <img class="imgtopic" height="18" width="59" border="0"

        title="Отправить личное сообщение" alt="Отправить личное сообщение"

        src="images/icon_pm.gif"/>

    </a>

    <a href="mailto:vladimir@belikov.ru">

      <img class="imgtopic" height="18" width="59" border="0"

        title="Отправить e-mail" alt="Отправить e-mail"

        src="images/icon_email.gif">

    </a>

    <a target="_userwww" href="http://www.belikov.ru/">

      <img class="imgtopic" height="18" width="59" border="0"

        title="Посетить сайт автора" alt="Посетить сайт автора"

        src="images/icon_www.gif"/>

    </a>

    <a href="http://wwp.icq.com/scripts/search.dll?to=1234567890">

      <img class="imgtopic" height="18" width="59" border="0"

         title="ICQ Number" alt="ICQ Number"

         src="images/icon_icq_add.gif"/>

    </a>

  </td>

</tr>

<tr>

  <td height="1" colspan="2" class="spacerow">

    <img height="1" width="1" alt="" src="images/spacer.gif"/>

  </td>

</tr>

Эта байда весит 4,17 кило, она содержит кучу пробелов и переводов строк (хотя некоторые я сейчас вставил сам для удобочитаемости). Если пройтись по шаблонам и удалить все лишние пробелы и переводы строк, объём сократится до 3,19 кило. Так что же даст CSS-вёрстка?

[Belikov]

При использовании CSS1 часть оформления уйдёт в отдельный файл, который будучи полученным один раз больше не будет закачиваться снова. Таким образом, его объём не скажется на трафике, а останется только что-то вроде следующего:

Код: Выделить всё

<div class="msg">

  <div class="author">

    <div class="name">Belikov</div>

    <div class="status">Администратор</div>

    <div class="reg">Зарегистрирован: 10.09.1812</div>

    <div class="act">Сообщения: 1000000</div>

    <div class="location">Смоленск</div>

	<div class="photo"><img border="0" alt="" src="images/1234567890.jpg"/></div>

  </div>

  <div class="date">Добавлено: Чт Дек 11, 2003 11:55</div>

  <div class="body">

    Текст сообщения. Для большей точности я сделаю его размер похожим

    на нормальное сообщение. Для большей точности я сделаю его размер

    похожим на нормальное сообщение. Для большей точности я сделаю его

    размер похожим на нормальное сообщение.

  <div>

  <div class="actions">

    <a href="http://forum.smolensk.ws/posting.php?mode=">

      <div class="new"></div></a>

    <a href="http://forum.smolensk.ws/posting.php?mode=">

      <div class="quote"></div></a>

    <a href="http://forum.smolensk.ws/posting.php?mode=">

      <div class="edit"></div></a>

    <a href="http://forum.smolensk.ws/posting.php?mode=">

      <div class="delete"></div></a>

  </div>

  <div class="contact">

    <a href="http://forum.smolensk.ws/profile.php?mode=viewprofile&u=1">

          <div class="profile"></div></a>

    <a href="http://forum.smolensk.ws/privmsg.php?mode=post&u=1">

      <div class="pm"></div></a>

    <a href="mailto:vladimir@belikov.ru">

      <div class="email"></div></a>

    <a target="_userwww" href="http://www.belikov.ru/">

      <div class="www"></div></a>

    <a href="http://wwp.icq.com/scripts/search.dll?to=1234567890">

      <div class="icq"></div></a>

    </div>

  </div>

</div>

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

Приведённый код занимает 1,64 кило, а без лишних пробелов и переводов строк остаётся всего 1,41 кило. Сравнивая последние значения, получаем, что код сообщений в страницах уменьшится на 55%! Примерно в таком же соотношении изменятся и шапка с подвалом. И если сейчас по мопеду 33.6 средняя страница загружается за 13 секунд, то станет загружатся всего за 6 секунд.

[alexander]

кстати, реальный размер страниц заметно меньше того что мы видим. Ибо страницы сжимаются gzip-ом и передаются в сжатом виде.

А в целом, конечно, симпатично. Но переделывать страницы... задолбаться можно, имхо.

[Belikov]

Причём это ещё далеко не всё! :twisted: Глядя на последний фрагмент код понимаешь, что очень много в нём может быть сгенерировано на стороне клиента. Возможности CSS2 по генерированию контента очень скудны, тем более что эту его часть не поддерживают IE 5+ и IE 6.0. :( За то они поддерживают XML-преобразования, как и Mozilla 1+, и Netscape 6+, и Opera 7+. Клиенту отдаётся XML-файл (он может иметь окончание .html, как XHTML-совместимый, хотя прокатывает и родное .xml). Внутри подлинкован XSL-файл описания стилей и принципов генерирования целых кусков кода, который также оседает в браузере и не загружается повторно. Вот пример кода:

Код: Выделить всё

<users>

  <user id="2">

    <creator>Belikov</creator>

    <status>Администратор</status>

    <email>vladimir@belikov.ru</email>

    <www>belikov.ru</www>

    <icq>1234567890</icq>

    <avatar>1234567890.gif</avatar>

    <location>Смоленск</location>

    <regdate>1812-11-26T11:55</regdate>

    <numsg>1000000</numsg>

  </user>

</users>



<item id="003812" user="2">

  <date>2003-11-26T11:55<date>

  <body>

    Текст сообщения. Для большей точности я сделаю его размер похожим

    на нормальное сообщение. Для большей точности я сделаю его размер

    похожим на нормальное сообщение. Для большей точности я сделаю его

    размер похожим на нормальное сообщение.

  </body>

</item>

Просто и понятно. Размер приведённого кода без пробелов и переводов строк составляет всего 600 байт. Это составляет 18% от первоначального размера страниц.

Более того, обратите внимание, что информация об авторе приводится один раз и не повторяется рядом с каждым его сообщением. То есть, если на странице несколько сообщений одного и того же автора, это существенно экономит трафик. И ещё: парсить текст (вставляя в него графические смайлики вместо текстовых, менять шрифт и делать акцентирование) можно также на стороне клиента. И ещё: шапка и подвал могут ВООБЩЕ отсутствовать в передаваемой странице и также добавляться на стороне клиента.

Последнее особенно важно, так как далеко не все страницы "наполнены" сообщениями, их часто бывает всего 1-3 штуки. Учитывая всё перечисленное, можно смело предположить, что реально добиться экономии трафика на 85-90%, хотя в это довольно сложно в это поверить, глядя на такую цифру.

Если я считал, что большая страница форума принимается по мопеду за 13 секунд, то та же информация может быть принята за 1,5 секунды. Каково? :roll:

[alexander]

У меня отчеты в одной проге сделаны на XML + XSL. Технология хорошая, спору нет, но шаблончики форума под нее переделывать... В странички с css проще :)

[Belikov]

Сейчас за кофе понял, что подчистив оформление в XSL (оставив только логику) появится возможность доступа с всяческих мобильных устройств.

Ко всему можно добавить, что поисковики уже индексируют XML-файлы, таким образом соотношение фраз к общему объёму будет намного больше, следовательно и вес индекса нехило повысится.

[Belikov]

Технология хорошая, спору нет, но шаблончики форума под нее переделывать... В странички с css проще :)

Тут надо продумать всё основательно и последовательно подойти. Наверное, когда весной выйдет phpBB 2.0, будет самое лучшее время.

[Belikov]

Что-то ты конкретно напутал. xsl-ки в браузерах поддерживает только IE и
то не w3c xsl, а какой-то свой

Ничего подобного! IE стал поддерживать XSLT ещё до того, как W3C выпустила стандарт, поэтому есть такое ошибочное мнение. Сейчас начиная с 5.5 полная поддержка и никаких противоречий. Мозилла начиная с 1.0 умеет XSLT-преобразования и тоже никаких противоречий. Опера... Опера ни фига не может. :( Она просто xml умеет деревом показать, а я почему-то решил....

Единственный вариант генерения в браузере -- это javascript.

Теоретически можно XML-парсер и на JavaScript написать, только это абсурдно. Или ты имел ввиду, чтобы встроенный парсер тремя командами JS вызвать? Оно и без этого хорошо работает.

Мне думается, что xml можно обрабатывать ccs

Можно, но CSS не позволяет изменять контент. Поэтому это только промежуточное решение.

[Belikov]

думаешь под win98 больше никто не сидит?

Сидят, к сожалению, и ещё как... Если смотреть по логам этого форума:

Windows 95 -- 0%
Windows 98 -- 19%
Windows Me -- 7%
Windows 2000 -- 18%
Windows XP -- 50%

А если конкретно по броузерам:

IE 4.0x -- 1%
IE 5.0x -- 12,2%
IE 5.5 -- 3.3%
IE 6.0 -- 53,5%
Opera -- 17%
Mozilla -- 10%

То есть в скине по умолчанию xslt-преобразования использовать рано. :(

Я имел в виду вообще не xml, а DHTML.

Ааа, я понял теперь. Хм. А ведь мысль, быть может даже и ещё проще, чем xslt. Даже странно, что нигде на форумах такая реализация не встречалась (мне). С другой стороны, мне и xml-реализация тоже не встречалась! :)

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

Мммм... Попробовал изменить content-type, но каких-то изменений в отображении страниц не увидел. :oops:

[alexander]

ты про xsl + xml ?

Вот так примерно надо внутри xsl:

<?xml version='1.0'?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:output method="html"/>
<xsl:template match="/">
....

главное - две перывх строки.

[alexander]

да, а вот что в xml (сам из php-кода вырежи уж):

ts.WriteLine("<?xml version=""1.0"" encoding=""" + CurrentEncoding + """ ?>")
ts.WriteLine("<?xml-stylesheet type=""text/xsl"" href=""" + TemplateFile + ".xsl""?>")