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

d0bed0bfd182d0b8d0bcd0b8d0b7d0b0d186d0b8d18f-d0bad0bed0b4d0b0-html-d0b8-css-7-d0b3d0bbd0b0d0b2d0bdd18bd185-d0bfd180d0b0d0b2d0b8d0bb Без рубрики

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

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

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

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

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

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

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

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

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

    
    var blockmodules = new switchcontent('switchblockmodules'); 
    blockmodules.init();
    

    Правильно:

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

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

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

    .rating{
    color: #666666;
    font-family: Tahoma, helvetica, sans-serif;
    font-size: 11px; width: 85px;
    height: 16px; margin: 0px;
    }

    Правильно:

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

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

    Правильно:

  4. Избегать использования таблиц при разметке страницы Лучше использовать теги

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

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

    Блаблабла

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

    Заголовок

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



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

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

  7. Не забывайте закрывать теги — если есть

    , должен быть и

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

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

Оцените статью