Оптимизация JS и CSS - Веб мастер | БД - Каталог статей - Сообщество ИТ молодежи Ингушетии

Поисковые системы используют ряд критериев, чтобы определить, о чем идет речь на данной веб-странице. Все эти критерии могут быть разными и могут изменяться с течением времени. Они направлены на определение степени "релевантности" страницы, т.е. соответствия данному запросу. Цель поисковой системы - предоставить пользователю результаты, наиболее отвечающие его запросу.

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

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

Когда поисковая система отправляет своего робота взглянуть на вашу страницу, вам хотелось бы быть уверенным, что робот найдет нужную информацию в верхней части страницы и что плотность ключевых слов на странице достаточно высока (в пределах разумного). Иногда возникают затруднения, даже если на видном месте вашей страницы расположено достаточное количество текста, насыщенного ключевыми словами. Два таких затруднения - позиционный код JavaScript и позиционный код каскадной таблицы стилей (Style Sheet) - можно легко устранить.

Затруднения с JavaScript

Большие объемы кода JavaScript могут быть препятствием. Обычно на веб-странице больше всего кода JavaScript содержится в разделе HEAD. Здесь обычно определяются переменные и функции и т.п. К сожалению, большой объем кода JavaScript на странице может очень навредить рейтингу страницы в поисковых системах.

Так как поисковые системы склонны обращать больше внимания на текст в начале веб-страницы, чем на последующий текст, очевидно, что наличие нескольких десятков строк кода JavaScript в верхней части страницы отодвигает действительное содержание от начала. А то, что находится на странице ниже, менее важно для поисковой системы.

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

Устранение затруднений с JavaScript

Так как же сохранить функциональность JavaScript, но при этом сделать вашу страницу как можно более удобной для поисковой системы? Поместите код JavaScript в отдельный файл, а затем присоедините его обратно к веб-странице.
Оригинальная страница, "mypage.html", может выглядеть примерно так:

 <html> 
<head> 
<title>My Title</title> 
<script> 
function helloWorld(){ 
alert("Hello, World!"); 
return; 
} 
</script> 
</head> 
<body onLoad="helloWorld()"> 
...body of page... 
</body> 
</html>

Пример 1 - mypage.html с кодом JavaScript

Заменяем код JavaScript командой для браузера извлечь код из отдельного файла. Новая страница будет выглядеть так:

<html> 
<head> 
<title>My Title</title> 
<script src="codepage.js"></script> 
</head> 
<body onLoad="helloWorld()"> 
...body of page... 
</body> 
</html>

Пример 2 - mypage.html после перенесения кода JavaScript в другой файл

Обратите внимание, что тег SCRIPT пополнился атрибутом "src". Значение, присвоенное этому атрибуту, - это имя внешнего файла, содержащего код JavaScript. Как правило, такие внешние файлы получают расширение ".js", показывающее, что они содержат код JavaScript. Отметьте также, что здесь присутствуют оба тега <script> и </script>, хотя между ними ничего нет.
Затем создается новая страница, содержащая код, ранее содержавшийся в тегах SCRIPT. Назовем ее "codepage.js", а выглядеть она будет вот так:

 function helloWorld(){ 
alert("Hello, World!"); 
return; 
}

Пример 3 - codepage.js содержит только код JavaScript

Для этого нового файла не требуется HTML-разметка. Он содержит только код, который первоначально находился между тегами SCRIPT.

Затруднения с каскадными таблицами стилей

Помимо кода JavaScript, причиной осложнения работы поисковых систем может быть код Style Sheet, когда он помещен на веб-страницу. Этот код необходимо удалить со страницы по тем же причинам, что и JavaScript - поскольку он сдвигает основное содержание и уменьшает плотность ключевых слов.

Устранение затруднений со Style Sheet

Идея удаления информации Style Sheet со страницы подобна идее "перегрузки" JavaScript в другой файл; что же касается синтаксиса - имеют местo некоторые отличия.

Оригинальная страница - "mypage.html" - может иметь такой вид:

 <HTML> 
<HEAD> 
<TITLE>My Title</TITLE> 
<style> 
body{ 
background:white; 
color:red; 
} 
</style> 
</HEAD> 
<BODY> 
...body of page... 
</BODY> 
</HTML>

Пример 4 - mypage.html с кодом Style Sheet

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

<HTML> 
<HEAD> 
<TITLE>My Title</TITLE> 
<link rel='stylesheet' href='style.css' type='text/css'> 
</HEAD> 
<BODY> 
...body of page... 
</BODY> 
</HTML>

Пример 5 - mypage.html после удаления кода Style Sheet

Обратите внимание на добавившийся тег LINK. Он содержит информацию трех типов, которая понадобится браузеру для восстановления страницы на время посещения пользователями. Атрибут/пара значений "rel='stylesheet'" показывает, что мы смотрим на файл Style Sheet. Атрибут/пара значений "href='style.css'" указывает на внешний файл, содержащий информацию Style Sheet. Типичное расширение этих файлов - ".css", показывающее, что они содержат код Cascading Style Sheet. Вы замените имя файла "style.css" именем файла, в который поместите код Style Sheet. Наконец, нужно определить MIME тип этого файла в атрибуте/паре значений "type='text/css'".

Затем создается новая страница, содержащая код, ранее содержавшийся в тегах STYLE. Называем ее "style.css" и смотрим, как она выглядит:

 body{ 
background:white; 
color:red; 
}

Пример 6 - style.css содержит только код Style Sheet
Для этого нового файла не требуется HTML-разметка. Он содержит только код, который первоначально находился между тегами STYLE.

Заключение

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

Дейл Гетч - технический консультант Search Innovation - компании по продвижению поисковых систем, обслуживающей предприятия малого бизнеса и неприбыльные организации. Более 12 лет работал в направлении развития программного обеспечения. Наряду с программированием в Perl, JavaScript, ASP и VB, он является специалистом по написанию и редактированию технических текстов, с упором на доступное изложение технических вопросов читателям, неискушенным в этой области.