Блискавично швидкі сайти з допомогою попередньо завантажувати

14

Від автора: у цій статті ми обговоримо предзагрузку, що це, і як з її допомогою розробники можуть здивувати відвідувачів високою продуктивністю.

Що таке предзагрузка?

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

А що якби браузер знав, за якою посиланню користувач клацне, або на яку сторінку він збирається перейти далі, а контент б автоматично з’являвся на екрані зі швидкістю світла?

Браузери вже зараз так вміють. Деякі основні браузери досить розумні, щоб робити передбачення подібного роду за шаблонами перегляду користувача, розмітки документа та його структуру пристрою, зв’язку і т. д. Тому браузери вже зараз намагаються передбачити, які ресурси їм знадобляться для створення сторінки, на яку збирається перейти користувач, щоб завантажити їх відображення сторінок на максимальній швидкості, коли користувач зайде на неї. Розробники з допомогою своїх знань сайту або програми можуть допомогти браузерам точніше виділити ці необхідні ресурси.

Це і є предзагрузка, підказка браузеру для передбачення бажань користувача, щоб потім з легкістю здійснити їх.

Предзагрузка описана в специфікації Resource Hints, за авторством Ilya Grigorik. Нижче ми поговоримо про:

DNS-предзагрузке;

предзагрузке посилань/ресурсів;

пререндеринге (предзагрузке сторінки).

DNS-предзагрузка

Інтернет – мережа комп’ютерних IP-адрес (наприклад, 87.87.87.87), пов’язаних з людськими хостами (наприклад, yoursite.com). DNS – протокол, конвертирующий хостів в IP-адреси.

Кожен раз, коли браузер посилає запит HTTP ресурсу на інший домен, кілька мілісекунд може витрачатися на зіставлення домену з відповідною IP-адресою.

Якщо на сайті є віджети Twitter або Facebook, Google Analytics і парочка користувальницьких веб-шрифтів, значить, є посилання на інші домени. Це робить пошук DNS неминучим.

DNS-предзагрузка допомагає знизити час очікування користувачів, так як браузер виконує пошук DNS перед надсиланням запиту на ресурси, розташовані на інших доменах.

Скажімо, розробники знають, що сайт надішле запит на somewidget.example.com. Вони можуть дати браузеру підказку, щоб той виконав предзагрузку DNS хоста, додавши атрибут rel у посилання зі значенням dns-prefetch. Ось так:

Тепер коли буде посланий запит на somewidget.example.com, браузер попередньо зробить пошук DNS, і користувачі отримує результат трошки швидше.

В даний час DNS-предзагрузка підтримується у всіх основних десктопних браузерах. Якщо підтримки немає, браузери просто витягують ресурси за старою схемою.

А що якщо браузер ніколи не запросить попередньо завантажений DNS ресурс? На щастя, DNS-предзагрузка – не витратна операція, так як надсилається не більше пари сотні байт. Вона не сповільнить ваш сайт.

Предзагрузка посилань

Специфікації про предзагрузке посилань: «… використовується для визначення ресурсу, який може знадобитися для наступного переходу, і який юзер агент ПОВИНЕН завантажити, щоб надати швидку відповідь, коли ресурс буде запитано.»

Іншими словами, якщо розробники вважають, що користувачі далі перейдуть на певну сторінку, а браузеру для неї потрібні якісь критичні ресурси, то вони можуть використовувати директиву prefetch. Вона вказує браузеру на ресурси, які необхідно предзагрузить ще до переходу користувачів на сторінку.

Пам’ятайте, що предзагрузка працює тільки з кешованими ресурсами, тобто JS, зображеннями і т. д. Код може бути таким:

Тепер браузер знає, що зображення future-image.jpg скоро знадобиться, і він може предзагрузить його і зберігати в кеші. Так як браузер виконає всю витратну за часом роботу по завантаженню ресурсів у фоновому режимі, користувачі отримають перевагу у вигляді супер швидкої візуалізації сторінки з зображенням future-image.jpg відразу після кліка.

Предзагрузка посилань створює у користувачів відчуття того, що сайт швидко завантажується, але ця операція більш затратна порівняно з DNS-предзагрузкой. Якщо користувач так і не зайде на сторінку, для якої необхідно предзагрузить файли, то браузер завантажить необов’язкові дані і заб’є кеш.

На момент написання статті предзагрузка посилань підтримується в останніх версіях Chrome, Firefox, IE/Edge і Opera. Браузери без підтримки просто проігнорують підказку.

Предзагрузка сторінок/пререндеринг

Для попередньо завантажувати сторінок або пререндеринга необхідно просто додати директиву prerender всередину атрибуту rel у ссылке:

Відбувається повний пререндиринг, буквально створюється невидима версія цілої сторінки, на яку збираються перейти користувачі, у тому числі застосовується CSS і JS. Після кліка сторінка-привид миттєво матеріалізується, замінюючи старий контент.

Предзагрузка посилань – витратна операція, але пререндеринг ще сильніше навантажує браузер. Браузер завантажує всю сторінку і всі її ресурси, очікуючи, що користувачі перейдуть на неї, що може статися, а може і ні.

На момент написання статті пререндеринг підтримується IE/Edge, Chrome і Opera.

Кейси використання для попередньо завантажувати посилання і пререндеринга

Предзагрузка посилань і пререндеринг дорого обходяться браузеру, тому важливо мати чіткі умови, коли їх застосовувати.

Розробники, які планують давати підказки по ресурсів, повинні мати вагомі підстави, чому ці ресурси необхідно предзагрузить або зробити пререндер, грунтуючись на контенті сайту, поведінці користувача, аналітики і т. д.

Специфікація Resource Hints виділяє ряд кейсів використання попередньо завантажувати посилання:

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

Посторінковий контент – якщо користувач читає першу сторінку багатосторінкового статті, то можна з упевненістю припустити, що він клацне по посиланню, що веде на наступну сторінку.

Галерея зображень – розробники Google використовують предзагрузку на Picasa Web Albums. Якщо користувачі переглядають фото, розробники цілком можуть припустити, що вони відкриють і наступне фото, і вони дають інструкцію браузеру завантажити його як можна швидше.

Також Santiago Valdarrama пропонує кілька корисних порад щодо того, коли розробники можуть виправдано робити пререндеринг на сайті: «Коли будете думати, треба робити пререндеринг повних сторінок, врахуйте, що Google робить пререндер ТОП-результатів пошукової видачі, а Chrome робить пререндер на основі історичних шаблонів навігації користувачів. За цими ж принципами ви можете визначати загальні шаблони використання і робити пререндер цільових сторінок. Також можна зробити, як з предзагрузкой ресурсів, в опитуваннях, де ви знаєте, що користувачі виконають дії в певному порядку.»

Висновок

DNS-предзагрузка, предзагрузка посилань і пререндеринг – потужні техніки оптимізації. Якщо підійти до них відповідально, використовуючи знання розробників про вміст і поведінку користувачів, то предзагрузка може значно поліпшити UX. А ви б порадили зробити предзагрузку для прискорення сайту? Пишіть в коментарях!