Оптимизация кода

Оптимизация кода — еще одна составляющая внутренней оптимизации страниц сайта. Она не так заметна, как оптимизация контента, однако не менее важна при индексации. Я сейчас не буду говорить о мета-тегах и тегах логической разметки страницы (h1 — h6, strong, em и т.д.). Речь пойдет только о строении разметки кода страницы и о правильных формах его использования.

оптимизация html кода сайта

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

Чтобы было более понятно, взгляните на html код какого-нибудь сайта. Для этого, если вы пользуетесь браузером Google Chrome просто кликните правой кнопкой мыши и выберите пункт «Просмотр кода страницы». В Firefox — аналогично, пункт «Исходный код страницы». Я для примера взял один из случайных сайтов в сети, увидите примерно следующее:

Оптимизация кода

Этот кусочек почти в самом начале, но поверьте на слово, еще 2 прокрутки монитора заполнены той же самой ерундой — до основного контента еще крутить и крутить. Итак, здесь допущена куча ошибок, с которыми сейчас будем разбираться.

Оптимизация кода — главные ошибки

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

Неправильно:

<script language="javascript" type='text/javascript'>
var blockmodules = new switchcontent('switchblockmodules'); 
blockmodules.init();
</script>

Правильно:

<script type='text/javascript' src='includes/javascript/function.js'>

А уже в function.js вышеприведенный код.

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

Неправильно:

<style type='text/css'>
.rating{
color: #666666;
font-family: Tahoma, helvetica, sans-serif;
font-size: 11px; width: 85px;
height: 16px; margin: 0px;
}





Правильно:

<link rel="stylesheet" href="themes/hameleon/style.css"
type="text/css" />

Все стили отдельных элементов, таких как table, div, p, form, hr, h1, span, font и так далее, также должны бать прописаны в файле стилей, а не в коде html разметки страницы внутри тега.

Неправильно:

<span width="100px" color="#123" border="0">

Правильно:

<span class="content">

3. Избегать использования таблиц при разметке страницы
Лучше использовать теги <div>
Про верстку дивами написано много пособий, вы можете их найти в интернете и изучить, а здесь лишь скажу, что блочная верстка, в отличие от табличной, позволяет разместить блоки со смысловым контетом выше вспомогательных — навигации, меню, скриптов и других.

4. Не допускать перекрещивания тегов
То есть нельзя, чтобы была конструкция типа

<span><p><h2>Блаблабла</p></h2></span>

Правильно было бы так:

<h2>Заголовок</h2><span>Текст</span><p>Абзац</p>

5. Избегать пустых тегов
То есть если в установленном шаблоне есть что-то типа этого:

<p></p><p></p><span></span><em></em>

Значит это явный косяк, надо от него избавляться.
Не путайте (!) с конструкцией такого типа:

<div class="1"></div><span id="2"></span>

Здесь у элементов заданы класс и id, значит скорее всего они отвечают за разметку блоков на странице и несут смысловую нагрузку.

6. Не забывайте закрывать теги — если есть <p>, должен быть и </p>

Этот набор несложных правил, которые однако требуют внимательности как при первоначальной верстке psd макета, так и при редактировании шаблона и написании текстов, позволят сделать самостоятельно оптимизацию кода страниц вашего блога. Большинство бесплатных тем грешат всеми вышеперечисленными ошибками, поэтому настоятельно рекомендую его проверить.
Удачи в оптимизации кода!

Поделись этой статьей с друзьями!

Это будет интересно прочитать:

Один комментарий

  • Хоть код не намного уступает в важности контенту, его оптимизация — дело сложное, намного сложнее, чем оптимизация контента…

  • Хорошее фото с тегами на футболке! Я бы ещё добавил <NO LIFCHIK>. Без лифчика значит.
    Статья недописана, кажется. И фоток последних нет. Куда делись Правильно, Неправильно.

  • Это смотря какой JavaScript должен быть в отдельном файле. Гляньте код хороших новостных сайтов по Ctrl+U. Там много JavaScript в заголовке — и точно не 1-2. В подвале блога — 1-й раз слышу.

  • JavaScript специально был придуман для того, чтобы не гонять запросы лишний раз от клиента к серверу и обратно, а выполнять код на стороне клиента. Придуман для того, чтобы не перегружать и линию, и сервер. Можно и совсем убрать))

  • Для чего вот JavaScript помещать в отдельный файл. Я что, программу запускаю?! Откуда я знаю, что он там выполнит мне. Отсюда все и вирусы лезут. Недаром же про JavaScript говорят, придумали вторую ОС в первой ОС. Я страницу хочу открыть, а она мне ещё какую-то страницу закачивает.

      • По идее ненамного быстрее будет. Суть-то в обоих случаях одна — код исполняться будет на компе пользователя. Единственно, что контент ещё перегружаться будет, но он же в кэше находиться. Быстро перезагрузится.
        Да, хоть и ненамного быстрее будет, но быстрее. Согласен. Но не приветствую эту тенденцию.

  • Да-а уж, урок не для слабонервных. Сам черт ногу сломит в этих кодах. Я пока пас, потом как-нибудь соберусь с духом и попробую осилить эту премудрость. Пока статья побудет в закладках. Ну и конечно же спасибо!

Добавить комментарий