Як прискорити веб-сайт за допомогою тега

"Передбачення"Браузери - це майбутнє швидкого інтернет-серфінгу, приносить нам потрібні ресурси ще до того, як ми знаємо, що ми хочемо їх. Сьогоднішні браузери вже зробити дещо передбачення Подекуди, щоб прискорити отримання та надання документів. Щоб перейти до наступного кроку, ми звернемося до інших веб-розробників.

Розробники мають досить гарна ідея з як здійснюється навігація їхніх веб-сайтів, і які найчастіше запитуються ресурси і, таким чином, вони можуть передбачити деякі майбутні операції, які браузери повинні робити для сайтів. Зараз потрібно лише, щоб розробники знайшли шлях реле цих передбачення до браузерів і добре їх використовувати. Ось де приходять деякі спеціальні "HTML-посилання".

Оновлення запитів HTTP

Перш ніж ознайомитися з цими посиланнями, настав час оновити нашу пам'ять про те, як відбувається типова операція завантаження файлів, що запитується HTTP. Скажімо, хтось на ім'я Джо хоче відвідати веб-сайт.

Ось що відбувається далі:

1. Джо вписує адресу, яку можна пригадати людині, в адресному рядку веб-переглядача і натискає "Enter".
2. Отримавши цю адресу, браузер запитає DNS-сервер (компліменти ISP) за IP-адресу адреси, наданого Джо.
3. DNS-сервер зобов'язується.
4. Тепер, коли веб-переглядач знає IP-адресу, він надсилає повідомлення (у діалекті TCP) на сервер веб-сайту, запитуючи про з'єднання.
5. Якщо сервер живий і добре, він відправляє відповідь, що підтверджує запит браузера, і браузер відповідає і підтверджує повідомлення сервера. (Примітка: Так, це надзвичайно розведена версія рукостискання TCP між клієнтом і сервером.)
6. Коли рукостискання закінчено, між ними встановлюється з'єднання.
7. Тепер браузер змінює свій діалектний стиль на HTTP і запитує сервер для веб-сайту.
8. Сервер, знаючи домашню сторінку сайту, повертає саме те, що отримано браузером і показано Джо, який дуже терпляче чекає перед комп'ютером..

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

Відносини HTML посилання

W3C визначає 4 відносини HTML-посилання (rel для відносини) dns-prefetch, preconnect, prefetch, і prerender. Разом вони називаються (по W3C)Підказки щодо ресурсівТепер ми побачимо що вони можуть зробити і де вони можуть бути використані.

1. Попередня вибірка DNS

У DNS попередній вибір, доменне ім'я (він також отримує відповідну IP-адресу від DNS-сервера).

Припустімо, що на веб-сайті є довідкова сторінка з великою кількістю посилань на її сайт-сестру. Коли користувач відвідує довідкову сторінку, є a висока ймовірність що користувач перейде до сайту сестри. Отже, ранній пошук DNS для веб-сайту сестри може скоротити час, необхідний для відкриття сайту (таким чином покращуючи досвід користувачів).

Це скорочення затримки через попередню вибірку DNS можна зробити, додавши цей код до сторінки посилання.

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

Тому, коли користувач нарешті натискає одну з посилань, які переносять їх на сайт сестри, вирішення DNS цього сайту може бути вже завершено, і браузер може відразу розпочати встановлення TCP-з'єднання клієнт-сервер із сестринським сайтом. сервер, що робить завантаження сторінки швидше.

Ця функція доступна майже у всіх сучасних браузерах, крім Safari станом на березень 2016 року.

2. Preconnect

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

W3C перераховує ідеальний варіант використання для preconnect: перенаправлення. Розробники використовують перенаправлення з ряду причин.

У цьому випадку наступний запит браузера (перенаправлений сайт) - це 100% передбачуваний, і може бути підключеним до, до зменшити затримку навігації.

Уявіть собі, що на сайті є посередницька сторінка, яка перенаправляє на "xyzsite", наступна посилання HTML зробить браузер попередньо підключений до сервера xyzsite, коли він перейде на цю сторінку посередника.

Станом на березень 2016 року ця версія доступна в Chrome, Opera та Firefox.

3. Попередня вибірка

С prefetch, для ресурсу, браузера починає реалізацію дозволу DNS доменного імені ресурсу, потім виконує з'єднання TCP з сервером ресурсу, робить HTTP-запит і, нарешті, вибирає та зберігає попередньо завантажений ресурс в кеші браузера.

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

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

Попередню завантаження підтримується в Chrome, Firefox і Opera.

4. Пререндр

Тільки для сторінок HTML можна зробити попереднє відтворення. Передбачена сторінка HTML надано в автономному режимі, і пофарбований на екран, коли він дійсно необхідний користувачеві. Візуалізація Витрати на більш високу обчислювальну роботу і ресурс пам'яті; Крім того, для відображення сторінки браузер може знадобитися додаткові ресурси (наприклад, зображення, додані на сторінку), що призведе до більш послідовні запити за допомогою браузера.

Тому, prerender повинен бути з обережністю, і не використовуються. Додавання наступного коду попередньо відображатиме сторінку "Про програму".

Prerender вже доступний у Chrome, IE та Opera станом на березень 2016 року.

Кілька речей, які варто відзначити

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

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

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

(2) W3C вказує a Атрибут посилання HTML називається ймовірність натяку, pr (з значенням від 0 до 1) для цих підказок ресурсів, які можуть бути використані для забезпечення ймовірності запитів, які будуть зроблені в майбутньому. Проте я не бачив, щоб цей атрибут був реалізований будь-яким браузером. Наприклад, у наступному коді вказано, що шанс xyzsite на 80% буде запитуватися в майбутньому, а 30% - на сторінку about.

Ми також можемо додати до підказки ресурсів додатковий атрибут crossorigin, щоб повідомити веб-переглядачу облікові дані CORS зв'язаного запиту.