Нужны ли на страницах вашего сайта Java-скрипты? Например, часы, дата, снег и прочие бесполезные вещи. Или вы полагаете, что каждый Ваш посетитель зашёл на сайт с большого бодуна и не помнит, какой сегодня день недели, а вдобавок успел ещё и по снегу соскучится? Наверное, нет. Тоже убираем… Не рекомендую, кстати, использовать и меню, основанные на JavaScript – мало того, что объёмы кода обычно не маленькие, так еще и технология эта может быть у пользователя отключена, или вообще не поддерживаться. Знайте – он тогда помянет всех Ваших родственников, вплоть до седьмого колена.

Итак, оптимизация кода вроде закончена. Перейдем к оптимизации самой главной составляющей любого сайта – оптимизации дизайна.

Часть вторая: Оптимизация Дизайна

Начнём оптимизировать дизайн сайта. Это значит, что мы постараемся максимально его облегчить, убрав оттуда всё лишнее. Ведь ни для кого не секрет, что посетители на сайт ходят, прежде всего, за информацией, и им не очень интересно, сколько средств Вы вбухали в разработку логотипа, для них важен контент. Правда, очень многие об этом забывают. Я про web-мастеров, не про посетителей. Наша задача – сделать дизайн лёгким и быстрозагружающимся, или хотя бы создать у пользователя иллюзию скорости. Готовы?

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

Давайте рассмотрим стандартный трёхпанельный макет, на основе которого обычно верстаются страницы:

<table>
 <tr>
  <td colspan=2>
  Логотип и реклама
  </td>
 </tr>
 <tr>
  <td>
  Меню
  </td>
  <td>
  Основное содержимое
  </td>
 </tr>
</table> 

Выглядит он вот так:

В основе всего макета лежит одна большая таблица и именно это – его главный недостаток – пока браузер не загрузит всё содержимое таблицы, он не сможет её отобразить. Именно такую ситуацию мы чаще всего и наблюдаем, вернее, не наблюдаем…

Однако, данный недостаток довольно легко обойти. Для этого необходимо построить макет, используя не одну, а три таблицы – для верхней, левой и правой частей. Тогда браузер, загрузив одну из этих частей, сможет её отобразить. Вот необходимый код:

<table>
 <tr>
  <td>
  Логотип и реклама
  </td>
 </tr>
</table>

<table align=left>
 <tr>
  <td>
  Меню
  </td>
 </tr>
</table>

<table align=right>
 <tr>
  <td>
  Основное содержимое
  </td>
 </tr>
</table>

И вот как это выглядит:

Вы наверняка заметили некоторые визуальные несоответствия второго макета первому: большее количество рамок и разную высоту колонок «Меню» и «Основное содержимое». Если первое легко устраняется установкой невидимых рамок таблиц, то второго избежать сложнее, а этот момент весьма важен, если цвет фона таблицы меню отличается от цвета фона таблицы с основным содержимым. Здесь основной путь – установка цвета фона, совпадающего с цветом фона таблицы меню.

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

Не упускайте из вида положительных сторон, предоставляемых данной технологией. Её использование приводит к весомому преимуществу – пользователь не теряет интерес к странице, ожидая её загрузки, он уже после небольшого периода ожидания может начать знакомиться с содержимым страницы.

Ещё несколько советов.

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

Заключение

Оптимизация кода «ручками», безусловно, требует очень много времени. Но это того стоит. А не стоит пользоваться всякими различными программами, оптимизирующими Ваши страницы. Честно скажу – перепробовал много разных вариантов, и ни один мне не понравился. Одна программа компрессировала HTML-код, затем, используя скрипт для распаковки его на клиентской машине, что я считаю совершенно недопустимым; вторая тоже отличилась – подменила все логические стили физическими, третья потерла все скрипты, приняв их за комментарии…

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

Спонсор: PROTOPLEX

При копировании для дальнейшего размещения, пожалуйста, обеспечьте наличие активной ссылки www.tiptopyes.com