Користувач завжди хоче контент. Причому, як можна швидше. Він не звик чекати і не любить цього робити. Пошуковий робот, в чем-то, схожий на користувача. Він теж хоче контент. Правда, на час його видачі йому, напевно, наплювати, зате його дуже хвилює ставлення корисного контенту до загальної кількості інформації на сторінці.
У цій статті напишу як швидко і без проблем зробити довантаження контенту і зробити щось на кшталт SSI, але на клієнті, а не на сервері.
Що на сторінці важливо?
Перш за все, потрібно визначитися, що саме на сторінці є важливим і має бути завантажено першою хвилею. Думаю, що важливі:- Контент (основна частина сторінки)
- Навігація (якщо у користувача відключений JS або це бот, потрібно в будь-якому випадку, дати посилань)
- Логотип сайта (по-моєму, потрібен відразу. Але це спірно)
Куди довантажувати контент?
Для того, щоб довантажувати щось, потрібно спочатку визначитися куди ми будемо це щось вставляти. Пропоную зверстати сторінку, де позначимо місця, куди будуть завантажуватися додаткові дані, але залишимо їх порожніми. Ці місця забезпечимо id, за якими і будемо їх знаходити в тексті сторінки.
Ось така ось сторінка. Довантажувати я планую 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 ( '');
>
for (k in to_load) $ (k) .empty ();
$ (K) .load (to_load [k]);
>
>);
Усе! Наша сторінка готова! Спочатку, як ми і хотіли, швиденько завантажується потрібний контент, так улюблений пошуковими системами і так необхідний користувачеві, а потім довантажується все інше. Причому, якщо користувач натисне на Esc, завантаження припиниться, і він заощадить на трафіку.
Ось така ось штуковина. Ніби як просто і без зайвого шуму, ми оптимізували сторінку для пошукових систем і користувачів одночасно. Встають, звичайно, деякі питання. Наприклад, не забанити чи за таку турботу про користувачів Яндекс? Закешіруются чи картинки, завантажені таким чином? Та й взагалі, чи реально застосовувати таке на практиці, в звичайних сайтах, а не інтернет-додатках?
Спробуємо відповісти на деякі з питань, що виникли.
Відповіді на запитання
Чи будуть кешуватися шматочки, одержувані за допомогою Ajax?
Тут складно і залежить від реалізації. Якщо ви звертаєтеся до скрипту за шматочками, то все залежить від того, яку версію ви посилаєте браузеру.
Якщо ви робите як я, тобто, просто довантажувати html-ки, то тут складно все. Справа в тому, що IE кешируєт ці шматочки, причому досить чіпко за них хапається, так, що якщо ви натиснете Ctrl + R (перезавантаження сторінки в обхід кешування), шматочки все одно візьмуться з кешу.
Інші браузери не кешують отриманий таким чином контент, якщо інше не зазначено явно в заголовках відповіді сервера.
Забанити чи за таке яндекс?
Думаю ні. Яндекс банить, зазвичай, за підміну контенту. Тобто, коли боту годується одна сторінка, а користувач бачить іншу. В даному випадку, і бот і користувач бачать одне й те саме. Тільки у користувача є можливість побачити більше. У будь-якому випадку, поживемо-побачимо.
Чи реально застосовувати динамічну довантаження контенту на стороні клієнта на звичайних сайтах?
Думаю так. Тільки потрібно звикнути і пристосуватися. У будь-якому випадку, я думаю, правильніше буде завантажувати саме статичні шматочки, що повторюються на кожній сторінці. В цьому випадку, кешування зіграє нам на руку. Множинні звернення до серверних скриптів, таким чином, згенерує велике навантаження на сервер, що позначиться на його продуктивності. Тому я раджу вантажити саме статичні html-шматочки. Тобто, використовувати цей підхід як "клієнтський SSI".
Можна, звичайно, довантажувати таким чином шматочки, які генеруються серверним скриптом. Але якщо сервер почне гальмувати - не кажіть, що я вас не попереджав;)
Що буде, якщо у користувача відключений JS?
Нічого критичного не станеться. Просто юзер тоді не отримає додатковий контент, а отримає лише те, що спочатку було в коді сторінки. Це його повинно влаштувати, по ідеї, адже він свідомо обмежував функціональність свого браузера, ось і сайт обмежив його в можливостях якихось. Але це не важливо, тому що такий користувач, при правильному проектуванні сторінки, все одно буде мати доступ до контенту і навігації.