Загрузка втростепенного контента Ajax-ом
Пользователь всегда хочет контент. Причем, как можно скорее. Он не привык ждать и не любит этого делать. Поисковый робот, в чем-то, похож на пользователя. Он тоже хочет контент. Правда, на время его выдачи ему, наверное, наплевать, зато его очень волнует отношение полезного контента к общему количеству инфы на странице.
Я подумал, что было бы неплохо совместить выполнение желаний посетителя и поискового бота. Придумалась мне модель, при которой загружается только нужный контент, CSS и JS. А остальные, необязательные части страниц, типа рекламных блоков, дополнительных функций страницы, тяжеловесного дизайна, догружаются при помощи Ajax.
В этой статье напишу как быстро и без проблем сделать догрузку контента и сделать что-то на подобие SSI, но на клиенте, а не на сервере.
Идея догрузки контента на клиенте, не нова, она применяется уже давно. Счетчики типа LiveInternet догружаются при помощи JS, как и блоки контекстной рекламы, типа AdSence или Директ. Но я хочу поговорить о том, чтобы загружать таким образом, все элементы страницы, не важные для пользователя, или, имеющие второстепенное значение.
Что на странице важно?
Сначала, нужно определиться, что именно на странице является важным и должно быть загружено первой волной. Думаю, что важны:- Контент (основная часть страницы)
- Навигация (если у юзера отключен JS или это бот, нужно в любом случае, дать ссылок)
- Логотип сайта (по-моему, нужен сразу. Но это спорно)
Куда догружать контент?
Для того, чтобы догружать что-то, нужно сначала определиться куда мы будем это что-то вставлять. Предлагаю сверстать страничку, где обозначим места, куда будут загружаться дополнительные данные, но оставим их пустыми. Эти места снабдим id, по которым и будем их находить в тексте страницы.
<html>
<head>
<title>Догрузка второстепенного контента с помощью Ajax</title>
</head>
<body>
<h1 style="margin: 0px auto 20px auto; text-align: center;">Страница с догружаемым контентом</h1>
<table style="width: 100%">
<tr>
<td style="width: 20%; vertical-align: top;" >
<a href="http://dayte2.com">Наши блоги</a><br/>
<a href="http://google.ru">Русский гугл</a>
<div id="left"></div>
</td>
<td style="width: 65%; border: 1px solid silver; vertical-align: top; padding: 10px;">
<h1>Об этой странице и Ajax</h1>
<div id="img" style="float: left;"></div>
<p>Здесь контент</p>
</td>
<td id="right" style="width: 15%; vertical-align: top; padding: 10px;" ></td>
</tr>
</table>
</body>
</html>
Вот такая вот страница. Догружать я планирую id="left", id="right", id="img".
Что догружать будем?
Сейчас нужно создать тестовые файлики, которые будем догружать. Я решил ограничиться именно файлами, а не результатами работы скриптов. Почему? Об этом позже.
- left.html — Это левый текст
- right.html — Это правый текст
- img.html — Это картинка
Чтобы не было проблем с аяксом, я предлагаю сразу делать все в utf-8. Так правильней и удобней.
Движок загрузчика
Я предлагаю использовать библиотеку jQuery. Она маленькая, быстрая и удобная. Подключив ее один раз, все скрипты на странице можно писать с ее помощью, сокращая работу и количество кода. Но на самом деле, то же самое можно делать и на чистом JS, или используя другие библиотеки.
Для начала, нужно поставить в соответствие блокам на нашей странице, файлы, загружаемые в них. В JS для этого, удобно использовать объекты. Итак, создаем объект.
/*DATA TO LOAD*/
var to_load = {
'#left':'left1.html',
'#right':'right.html',
'#img':'img.html'
}
Теперь нам нужно поймать момент, когда основной контент уже загрузился. В этот самый момент, нужно начинать грузить наши дополнительные блоки. Ловим событие:
/*LOADING ADDITIONAL CONTENT*/
$(document).ready(function(){
alert('Пора грузить дополнительный контент');
});
Переделаем нашу функцию, чтобы она приносила пользу. Для этого, нам нужно прогуляться по ключам нашего хэша полям нашего объекта и загрузить в соответствующие блоки нужный контент.
/*LOADING ADDITIONAL CONTENT*/
$(document).ready(function(){
for(k in to_load) {
$(k).load(to_load[k]);
}
});
В принципе, уже все работает. Но хочется эстетики. Нужно дать пользователю знать, что мы что-то там еще загружаем. Обычно, для этого используется gif-изображение. Не будем отступать от традиции. Итак, выведем во все блоки gif-изображение загрузки.
/*LOADING ADDITIONAL CONTENT*/
$(document).ready(function(){
for(k in to_load) {
$(k).append('<img src="loading.gif"/>');
}
for(k in to_load) {
$(k).empty();
$(k).load(to_load[k]);
}
});
Все! Наша страница готова! Сначала, как мы и хотели, быстренько загружается нужный контент, так любимый поисковиками и так необходимый юзеру, а потом догружается все остальное. Причем, если юзер нажмет на Esc, загрузка прекратится, и он сэкономит на трафике.
Вот такая вот штуковина. Вроде как просто и без лишнего шума, мы оптимизировали страницу для поисковиков и юзеров одновременно. Встают, конечно, некоторые вопросы. Например, не забанит ли за такую заботу о пользователях яндекс? Закэшируются ли картинки, загруженные таким образом? Да и вообще, реально ли применять такое на практике, в обычных сайтах, а не интернет-приложениях?
Попробуем ответить на некоторые из возникших вопросов.
Ответы на вопросы
Будут ли кэшироваться кусочки, получаемые с помощью Ajax?
Тут сложно и зависит от реализации. Если вы обращаетесь к скрипту за кусочками, то все зависит от того, какие заголовки вы посылаете браузеру.
Если вы делаете как я, то есть, просто подгружаете html-ки, то тут сложно все. Дело в том, что IE кэширует эти кусочки, причем довольно цепко за них хватается, так, что если вы нажмете Ctrl+R (перезагрузка страницы в обход кэширования), кусочки все равно возьмутся из кэша.
Другие браузеры не кэшируют полученный таким образом контент, если иное не указано явно в заголовках ответа сервера.
Забанит ли за такое яндекс?
Думаю, нет. Яндекс банит, обычно, за подмену контента. То есть, когда боту кормится одна страница, а пользователь видит другую. В данном случае, и бот и пользователь видят одно и то же. Только у юзера есть возможность увидеть больше. В любом случае, поживем-увидим.
Реально ли применять динамическую догрузку контента на стороне клиента на обычных сайтах?
Думаю, да. Только нужно привыкнуть и приспособиться. В любом случае, я думаю, правильней будет загружать именно статические кусочки, повторяющиеся на каждой странице. В этом случае, кэширование сыграет нам на руку. Множественные обращения к серверным скриптам, таким образом, сгенерирует большую нагрузку на сервер, что скажется на его производительности. Поэтому я советую грузить именно статические html-кусочки. То есть, использовать этот подход как "клиентский SSI".
Можно, конечно, догружать таким образом кусочки, генерируемые серверным скриптом. Но если сервер начнет тормозить — не говорите, что я вас не предупреждал;)
Что будет, если у пользователя отключен JS?
Ничего критичного не случится. Просто юзер тогда не получит дополнительный контент, а получит лишь то, что изначально было в коде страницы. Это его должно устроить, по идее, ведь он сознательно ограничивал функциональность своего браузера, вот и сайт ограничил его в возможностях каких-то. Но это не важно, потому что такой пользователь, при правильном проектировании странички, все равно будет иметь доступ к контенту и навигации.
Кстати, если кому нужно - вот "собранная" страница, без аякса.
Категорически приветствуются комментарии SEO и usability-специалистов.
![[Valid RSS]](/img/valid-rss-rogers.png)
by SHAman