Интернетовские забавы (часть II)

Интернетовские забавы (часть II)

В предыдущей статье мы немного поговорили об использовании картинок и таблиц для оптимизации скорости загрузки интернетовских сайтов. А в этой статье мы начнем разговор про JavaScript. Большинство разработчиков считает, что использование скриптов на странице не снижает скорости загрузки. Как же они ошибаются! JavaScript – это язык, требующий интерпретации (parsing) в отличие от скомпилированных программ. Обратите внимание на сайт HotBot. Там используется всего одна функция, устанавливающая фокус на строке ввода текста. Сделайте копию этой страницы на вашем компьютере и уберите эту функцию. Ну вот. Теперь-то вы мне верите?

Прежде чем использовать JavaScript или dHTML, внимательно читайте инструкции. Весьма возможно, что программа из двадцати строк может быть заменена каким-то компонентом или встроенной функцией, которая будет быстрее загружаться и исполняться.

Вы будете удивлены, но большинству людей совершенно не интересно знать, сколько посетителей было на вашей странице. Поэтому стоит убрать с нее все счетчики. Вернее скрыть их глубоко внутри. Чтоб не мешали. Не все счетчики это позволяют. Приведу пример одного из них, который не слишком назойлив – www. fxweb. com. Использование Java апплета для прокрутки текста на странице просто не стоит ожиданий. Сайт CNN сэкономил полминуты на загрузке начальной странице, после того как убрал бегущую строку с новостями. А как вы думаете, число посетителей этого сайта уменьшается или увеличивается?

Вы не должны задавать себе вопрос: «Насколько быстро загружается мой сайт сейчас и что можно сделать, чтобы он загружался быстрее?». Должна быть совершенно другая формулировка: «Насколько быстро мой сайт должен загружаться и что я могу использовать для его создания, чтобы загрузка происходила именно за это время?». Или уменьшите время загрузки, или сделайте свои страницы такими, чтобы стоило ждать. Установите для себя стандарты – максимум допустимого времени на загрузку страницы.

Впрочем, оптимизация уже имеющихся страниц – вещь стоящая. Давайте рассмотрим Ultimate HTML Optimizer (www. paully. com). Помимо того, что эта утилита в 50 килобайт делает HTML код практически нечитаемым, она еще и оптимизирует сам код, благодаря хитрому алгоритму распознавания тэгов. Итак, что включается в процесс оптимизации. Из исходного файла стираются пустые строки и лишние пробелы. Символы CR и LF убираются, а закрывающие тэги </P> и </LI> убираются как ненужные. Символы табуляции также стираются. В результате текст файла music. html, расположенного по адресу listen. to/grusla, принимает приблизительно такой вид – <a href=http://www. geocities. com/SoHo/Studios/2514/Grundik_And_Slava-Smoking. mp3><font size=4 face=Arial><b>Smoking<img src=audio. gif alt=audio border=0 hspace=5 width=25 height=30 align=absbottom></b></font></a></div></td>, зато сам файл вместо семи килобайт занимает пять. Представьте себе ускорение времени загрузки на 30 процентов.

Давайте рассмотрим синтаксис работы с программой, чтобы вам потом время на это не тратить. У программы нет красивого интерфейса. Да ей это и не нужно. Запускается она из командной строки и делается это вот как – HTMLo. exe file. html [-command] [--options]

HTMLo. exe <directory> [-command] [--options]

File. html – это файл для оптимизации, а <directory> – это рекурсивное задание целой директории, содержащий сколь угодно большое количество файлов. Сейчас я опишу команды: b - оптимизация и сохранение страховочной копии, r – восстановление из страховочной копии, d – стереть страховочные копии, m – заменить оригинальные файлы файлами сохраненными. А теперь перечисление опций: r – замена тэгов <(/) STRONG> тэгами <(/) B> и тэгов <(/) EM> тэгами <(/) I>, d – стирает закрывающие </P> и </LI>, c – стирание ненужных комментариев (программа отличает их от скриптов и SSI), t – отображение всех тэгов заглавными буквами, m – стирает <META HTTP-EQUIV=«Content-Type»…

Наиболее частым является использование программы вот в каком виде: HTMLo. exe. - b –rdc (оптимизация всех файлов в текущей директории с сохранением страховочных копий). Очень скоро ожидается появление версий для Linux, FreeBSD, AIX, а также версии с графическим интерфейсом, специально предназначенной для оптимизации XML. Очевидно, что с появлением такой серьезной программы возникнет необходимость написания модулей для различных серверов.

Почаще сравнивайте скорость вашего сайта и сайтов, предоставляющих подобную информацию, со схожим дизайном. Используйте разыгрывание ролей (role-playing) при анализе скорости. Чаще заходите на свой сайт со стороны, словно вы обычный пользователь.

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

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

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

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

Старайтесь избегать редиректоров, так как с ними время ожидания между тем моментом, когда пользователь кликает на линк, и тем, когда он, наконец, видит желаемую страницу, увеличивается вдвое. Давайте в завершение статьи рассмотрим несколько сайтов, облегчающих нашу жизнь NetMechanic – Online Link Testing, HTML Validation и Web Site Garage.

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

Из инструкций на сайте следует, что тестирование может проводиться по одному из восьми стандартов: HTML Version 2.0 Standard, HTML Version 3.0 Standard, HTML Version 3.2 Standard, HTML Version 4.0 Standard, NCSA MOSAIC Support HTML 3.2 with Microsoft Internet Explorer Extensions, HTML 3.2 with Netscape Extensions, Supported by both MSIE and Netscape, Supported by either MSIE or Netscape. Описания различий можно найти на сайте. Здесь я их приводить не буду. Вот как выглядит найденная ошибка -

<FRAMESET rows=«100%,*» border=0 frameborder=0 framespacing=0 framecolor="#000000»>

= = = = = = = = = = = = ^Error: «BORDER» is not a supported attribute for «FRAMESET».

= = = = = = = = = = = = ^Tip: This attribute is supported by Netscape Navigator.

Все ошибки весьма красиво подчеркиваются, а их описание выглядит очень понятно. Программа проверяет также и сайты с паролями. В этом случае URL указывается в виде username:password@www. domainname. com. Помимо столь ценных услуг, сайт предлагает вам регистрацию в сотне лучших поисковых систем мира, усиленную проверку вашего сервера и оптимизацию графики. Но большинство этих услуг предоставляется за деньги.

Web Site Garage отличается от рассмотренного немногим. Та же проверка HTML синтаксиса, та же оптимизация графики. Но здесь есть и еще одна опция – Hitometer – проверка посещаемости. В общем, используя эти два сайта, можно отладить вашу домашнюю страницу лучше, чем когда бы то ни было. Хотя, конечно, лучшему предела нет. Вот мы и рассмотрим в следующей статье самый качественный HTML редактор Macromedia Dreamweaver 3, а также ответим на наиболее часто задаваемые вопросы по его использованию.


Карта сайта


Информационный сайт Webavtocat.ru