[ главная ]   [ рейтинг статей ]   [ справочник радиолюбителя ]   [ новости мира ИТ ]



Ответов: 0
25-02-12 07:01







   Web - программирование
PHP


ASP






XML



CSS

SSI





   Программирование под ОС











   Web - технологии








   Базы Данных









   Графика






Данные




Web - технологии / Web Design /

Оптимизация HTML-страниц

Для того чтобы оптимизировать HTML-код, нужно сесть и подумать

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

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

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


<font face="Verdana, Arial, Helvetica, sans-serif"><font size="2">Главная</font></font> 
<font face="Verdana, Arial, Helvetica, sans-serif"><font size="2">Резюме</font></font> 
<font face="Verdana, Arial, Helvetica, sans-serif"><font size="2">Друзья</font></font> 
<font face="Verdana, Arial, Helvetica, sans-serif"><font size="2">Ссылки</font></font>

FrontPage

Ну и как, нравится вам такое? Занимает это маленькое простое меню из четырех пунктов 369 байт. Между тем его можно значительно сократить, упростив одновременно понимание кода и уменьшив создаваемый интернет-трафик. Как? Да очень просто. Во-первых, непонятно, почему визуальные редакторы так часто разбивают на два или даже больше тегов то, что можно записать в одном. То есть в данном примере параметр size можно занести внутрь первого тега font. Во-вторых, зачем было нужно указывать все параметры шрифта перед каждым пунктом меню? Ведь это, фактически, одна строка. Поэтому вполне достаточно вставить один открывающий тег в начале и один закрывающий в конце, чтобы получить абсолютно тот же самый результат в любом браузере. Ниже приведен оптимизированный код, который занимает всего 110 байт. Таким образом, мы смогли уменьшить объем кусочка веб-страницы, предложенной визуальным редактором, более чем в 3 раза!


<font face="Verdana, Arial, Helvetica, sans-serif" size="2">
Главная Резюме Друзья Ссылки</font>

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

Что ж, давайте для примера проведем небольшое исследование. Итак, открываем Word, пишем в трех абзацах строку "Мама мыла раму" и выделяем одну из них жирным шрифтом. После этого сохраняем получившийся документ в качестве веб-страницы и открываем его в браузере. Все выглядит так, как и должно. А теперь открываем HTML-файл в "Блокноте" и смотрим на сгенерированный код. Первое, что сразу же бросается в глаза - это его объем. Три строчки, написанные одним шрифтом на одном языке, занимают в представлении HTML-представлении Word'а... больше 4 килобайт! Давайте попробуем разобраться, как же получилась такая внушительная цифра.

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

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

Для начала поговорим о форматировании кода. У многих веб-мастеров принято использовать при написании веб-страниц правила, используемые в программировании. Речь идет о максимально возможном разбиении текста по строкам. Причем каждая строка предваряется определенным числом пробелов или символов табуляции, в зависимости от "блока", в который она входит. С одной стороны, такой подход очень удобен. Понимание кода действительно очень сильно упрощается. Однако нужно учитывать, что файл в формате HTML - это не программа. Он гораздо проще. Поэтому структурировать HTML-код до мельчайших подробностей не нужно. Помните, что символы переноса строки и табуляции, хоть и не отображаются в браузере, тоже увеличивают объем веб-страницы. Хотя, в принципе, с ними можно смириться. Гораздо хуже, когда веб-мастера или некоторые редакторы (есть и такие) вместо символов табуляции предваряют строки определенным числом пробелов. Для примера попробуйте представить, на сколько увеличится объем HTML-файла, если большинство строк в нем будет содержать от пяти до десяти "лишних" пробелов. Конечно же, никто не призывает вас при создании веб-страницы записывать весь код в одну строку. Однако излишней структурированности тоже лучше избегать.

Форматирование кода, принятое в программировании

Второй момент, о котором пойдет речь - комментарии. Многие начинающие веб-мастера, для того чтобы в будущем не запутаться в HTML-файле, оставляют в них целую кучу своих напоминаний и замечаний. Нет, конечно же, в использовании комментариев нет ничего плохого. Однако все хорошо в меру. Необходимо помнить, что комментарий - это очень краткое пояснение. Совсем не обязательно делать из него подробное описание вроде такого: "В этой строке располагается открывающий тег таблицы, в которой я буду каждый месяц записывать рост и вес моего любимого кота".

Вообще, говорить об оптимизации HTML-файлов можно очень и очень долго. Просматривая странички начинающих веб-мастеров, иногда просто диву даешься, что творится у них внутри. Так, некоторые умудряются "впихнуть" на страницу сотни ключевых слов в надежде увеличить посещаемость сайта. На самом же деле, они добиваются обратного эффекта - "вес" действительно подходящих слов снижается, а объем файла существенно увеличивается. И можно привести еще немало подобных примеров. Между тем, секрет написания оптимального кода очень прост. Достаточно просто помнить об этом и всегда проверять, как выглядит веб-страница не только в браузере, но и в "Блокноте".

Автор: Марат Давлетханов
Источник: www.hostinfo.ru




Комментарии

 Ваш комментарий к данному материалу будет интересен нам и нашим читателям!



Последние статьи: Web - технологии / Web Design /

Как увеличить эффективность сайта с помощью поисковой формы
12-10-2009   

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

Кол. просмотров: общее - 3151 сегодня - 0

Идеальная навигация
12-10-2009   

Все идеальное недостижимо. Но представив себе идеальную навигацию по сайту и выделив ее основные свойства, можно сделать интересные выводы... подробнее

Кол. просмотров: общее - 3048 сегодня - 0

Web-дизайн и кодировки
08-10-2009   

Кодировкой веб-страницы называется способ кодирования текстовой информации для передачи в сети Интернет. Определяющим параметром при кодировании данных считается количество битов, с помощью которых передается один символ (значение)... подробнее

Кол. просмотров: общее - 3184 сегодня - 0

Графика: советы для начинающих
20-09-2009   

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

Кол. просмотров: общее - 2935 сегодня - 0

Точечные и векторные изображения: сравнительный анализ
20-09-2009   

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

Кол. просмотров: общее - 3066 сегодня - 1



  WWW.COMPROG.RU - 2009-2012 | Designed and Powered by Zaipov Renat | Projects