Оптимизация кода веб-страницы

Внутренняя оптимизация сайта подразумевает под собой ряд действий, направленных на изменение характеристик ресурса, например, оптимизацию кода.

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

Если использовать слишком много вложенных тегов, можно запутаться самому, забыв закрыть один из них, и запутать робота, правда, для этого надо хорошенько постараться. Но вот что существенно — это соблюсти баланс между кодом и содержанием страницы: чем меньше будет использоваться «лишних» тегов, устаревших элементов, смешения гипертекстовой разметки страницы с ее отображением, тем больше места на сайте будет занимать полезная информация, за которой «охотится» основной робот, сканирующий содержание страницы и помещающий ее в свой индекс. Четко организованная структура документа делает сайт доступным для индексирования поисковым машинам.

Совсем недавно веб-дизайнерам приходилось обходить подводные камни, используя нагромождение тегов и вложенных таблиц, чтобы хоть как-то гарантировать одинаковое отображение страниц в разных браузерах и их версиях. Теги <font> и <center>, атрибуты bgcolor, color, width, height и другие, пока, поддерживаются современными браузерами для совместимости с их прошлыми версиями, но сейчас использовать подобные элементы в html-коде может быть нецелесообразно, так как браузеры, со временем, могут начать их игнорировать.

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

До сих пор можно встретить сайты, в коде которых используется «каша» из html-разметки, CSS-стилей и навязчивых скриптов, что не только утяжеляет документ, но и превращает чтение кода и его изменение в сложную задачу.

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

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

Еще один момент, о котором стоит упомянуть — код сайтов, который написали «школьники», непонимающие, почему блочный элемент не может быть вставлен в строковый. Как часто на форумах задают вопросы: «А разве нельзя написать такой код: <a><h2> текст<⁄h2> <⁄a>

Стандарты допускают вложение тега <a> в тег <h2>, но не наоборот. В тоже время, прежде чем использовать подобную конструкцию, вам стоит понимать, что к такому усилению позиции ключевого слова поисковые машины могут отнестись не совсем так, как хотелось бы вам. Если поисковая система решит, что данная схема используется для обмана (поискового спама), можно быть уверенными, что следующий ваш вопрос будет: «Почему моего сайта нет в выдаче?»

Важно понимать, что:
HTML и XHTML — это языки разметки, они отвечают за структуру текстовых документов. Элементы (теги) должны использоваться для описания содержания документа (заголовков, абзацев, списков), а не для влияния на визуальное отображение в браузерах.

За визуальное представление документа отвечают каскадные таблицы стилей — CSS — их назначение состоит в визуальном отображении элементов.

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

Кроме того, существует такое понятие, как хорошо сформированный документ, где соблюдается корректное вложение элементов, нет повторяющихся атрибутов с одним и тем же именем и т.д.

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

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

Возможно, вам покажется странным, но посетители не будут дожидаться, пока загрузится страница, не подающая признаков жизни. И наиболее нетерпеливыми будут те, кто подключен к скоростному Интернету. В мире так много всего интересного, что посетитель не может позволить себе потратить более 27 секунд на беглый просмотр уже открытой страницы, а что говорить про ресурсы, которые просто «м-е-д-л-е-н-н-о грузятся»?

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

Хотите убедиться в достоверности этих слов, почитайте книгу Якоба Нильсена «Web-дизайн: удобство использования Web-сайтов».

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

К сожалению, большинство программистов предпочитает работать над интересными новыми проектами. Искать же ошибки, тем более в чужом коде, способны единицы. Если вам нужны подобные услуги, обращайтесь, будем рады помочь.

Вверх