Меню

Оптимизация Кода HTML и CSS — 7 Главных Правил

Оптимизация кода HTML и CSS — еще одна составляющая внутренней оптимизации страниц сайта. Она не так заметна, как оптимизация контента, однако не менее важна при индексации. Я сейчас не буду говорить о мета-тегах и тегах логической разметки страницы (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" />
  3. Все стили отдельных элементов, таких как table, div, p, form, hr, h1, span, font и так далее, также должны бать прописаны в файле стилей, а не в коде html разметки страницы внутри тега.

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

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

    Правильно:

    <span class="content">
  4. Избегать использования таблиц при разметке страницы
    Лучше использовать теги <div>
    Про верстку дивами написано много пособий, вы можете их найти в интернете и изучить, а здесь лишь скажу, что блочная верстка, в отличие от табличной, позволяет разместить блоки со смысловым контетом выше вспомогательных — навигации, меню, скриптов и других.
  5. Не допускать перекрещивания тегов
    То есть нельзя, чтобы была конструкция типа

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

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

    <h2>Заголовок</h2><span>Текст</span><p>Абзац</p>
  6. Избегать пустых тегов
    То есть если в установленном шаблоне есть что-то типа этого:

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

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

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

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

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

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

Удачи в оптимизации кода!

Комментарии 11

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

  • См. рекомендации Google http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml

  • Мне особенно понравились промежутки между и , заманчивые скрипты!

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

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

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

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

    • Для того, чтобы не грузить код страницы

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *