3 принципа оптимизации кода HTML

ADMIN

Administrator
Регистрация
18.07.2018
Сообщения
1 447
Реакции
174
Баллы
130
Так же, как весенняя уборка дома, HTML-код ваших веб-страниц также должен периодически очищаться. Со временем, по мере внесения изменений и обновлений в веб-страницу, код может быть завален ненужным загромождением, замедляя время загрузки страницы и снижая эффективность вашей веб-страницы. Загроможденный HTML также может серьезно повлиять на ваш рейтинг в поисковых системах.


Это особенно верно, если вы используете пакет веб-дизайна WYSIWYG («Что видишь, то и получаешь»), например FrontPage или Dreamweaver. Эти программы ускорят создание вашего веб-сайта, но они не настолько эффективны при написании чистого HTML-кода.

Мы сосредоточим эту дискуссию на фактическом HTML-кодировании, игнорируя другие языки программирования, которые могут использоваться на странице, такие как Java-Script.

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

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

Со временем HTML изменился, и теперь у нас есть много разных способов сделать то же самое. Примером может служить код, используемый для отображения жирного шрифта. В HTML у нас есть два основных варианта:<Сильный> тег и <Б>тег. Как вы можете видеть <Сильный> тег использует на 5 символов больше, чем <Б> тег, и если мы рассмотрим закрывающие теги, мы увидим, что с помощью <Сильный> </ STRONG>пара тегов использует на 10 символов больше, чем уборщик <B> </ B> пара тегов.

Это наш первый принцип чистого HTML-кода:

Используйте самый простой из доступных методов кодирования.
HTML имеет возможность вложения кода в другой код. Например, у нас может быть строка из трех слов, где среднее слово выделено жирным шрифтом. Это может быть достигнуто путем полного изменения форматирования каждый раз, когда видимые изменения форматирования. Рассмотрим этот код:


Код:
<font face="times">This</font>
<font face="times"><strong>BOLD</strong></font>

<font face="times">Word</font> This takes up 90 characters.
Это очень плохо написанный HTML и это то, что вы иногда получаете при использовании редактора WYSIWYG. Поскольку теги <font> повторяют одну и ту же информацию, мы можем просто вложить теги <strong> в теги <font> и, что еще лучше, использовать тег <b> вместо тега <strong>. Это дало бы нам этот код<font face = "times> Это <b> жирное </ b> слово </ font>, занимая всего 46 символов.

Это наш второй принцип чистого HTML-кода:

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

Большая проблема с использованием тегов HTML заключается в том, что нам нужно повторять кодирование тегов всякий раз, когда мы меняем форматирование. Появление CSS дает нам большое преимущество в чистом кодировании, позволяя нам размещать форматирование один раз в документе, а затем просто обращаться к нему снова и снова.

Если бы у нас было шесть абзацев на странице, которые переключаются между двумя различными типами форматирования, такими как заголовки синим, жирным шрифтом, Ariel, размер 4 и текст абзаца черным, Times, размер 2, с использованием тегов, мы должны были бы перечислить это полное форматирование каждый раз, когда мы вносим изменения.

Код:
<font face="Ariel" color="blue" size="4"><b>Our heading</b></font>
<font face="Times color="black" size="2">Our paragraph</font>

<font face="Ariel" color="blue" size="4"><b>Our next heading</b></font>

<font face="Times color="black" size="2">Our next paragraph</font>
Затем мы повторим это для каждого заголовка и абзаца, много HTML-кода.

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

Код:
<head>
<style type="text/css">

<!--

.style1 {

font-family: Arial, Helvetica, sans-serif;

font-weight: bold;

font-size: 24px;

}

.style2 {

font-family: "Times New Roman", Times, serif;

font-size: 12px;

}

-->

</style>

</head>

<body>

<p class="style1">Heading</p>

<p class="style2">Paragraph Text</p>

</body>
Обратите внимание, что стили создаются в разделе «Голова» страницы, а затем просто ссылаются в разделе «Тело». Когда мы добавим больше форматирования, мы просто продолжим ссылаться на ранее созданные стили.

Это наш третий принцип чистого HTML-кода:

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

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