Коли ми говоримо про Front end продуктивність (performance), в більшості випадків, маємо на увазі конкатенацію, мініфікацію, кеш або зжимання ресурсів (gzipping assets) на сервері. Це дозволить завантажити сторінку швидше і користувач досягне своєї цілі настільки швидко на скільки це можливо.
Попереднє завантаження ресурсів являється новою технікою для підвищення продуктивності. Ми можемо підказати браузеру що йому потрібно буде завантажити для використання в майбутньому до того як ці ресурси кимось будуть запрошені. Як розробники, ми краще знаємо наший додаток ніж браузер. Ми можемо вказувати браузеру про необхідні ресурси.
Розглянемо наступні техніки: dns-prefetch, subresource, preconnect і prerender.
dns-prefetch
Дана команда повідомляє клієнту що якісь ресурси потрібні будуть в майбутньому з конкретного URL і браузер може зробити DNS запит заздалегідь. Якщо нам потрібний ресурс типу картинки або аудіо файлу з URL example.com. В <head> документу потрібно записати:
<link rel="dns-prefetch" href="//example.com">Тепер коли ми робимо запит на файл з даного URL, ми більше не будемо очікувати доки браузер зробить DNS пошук. Це дуже корисно коли ми використовуємо код з третіх ресурсів або з соціальних мереж за допомогою тегу <script>.
Розглянемо більш знайомий приклад. Одним із загальновизнаних зовнішніх ресурсів є скрипт Google Analytics, який використовується для відстеження поведінки відвідувачів на вашому сайті. Виклик скрипта зазвичай розміщують в самому початку (дехто в кінці) сторінки:
<script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','http://google-analytics.com/analytics.js','ga'); ga('create', 'UA-9896842-2', 'auto'); ga('send', 'pageview'); </script>Ми бачимо, що скрипт звертається до google-analytics.com. Замість того, щоб намагатися отримати це доменне ім’я в момент виявлення скрипта, ми можемо дати браузеру підказку, що буде використовуватися URL, і що він повинен перевірити, чи знає він, як зв’язатися з цим сайтом, поки інша частина сторінки буде відмальовуватись. Додайте у ваший документ наступне:
<link rel="dns-prefetch" href="//google-analytics.com/">Зверніть увагу, що значення href не містить протоколу, тобто воно не починається з http: або https :. Це чудовий варіант для нашої мети. Це значення ефективне в даному випадку, так як воно забезпечує максимальну гнучкість для отримання доступу до сервісу Google Analytics.
Потенційно це прискорює завантаження сторінки по частинах для кожного URL, зазначеного в dns-prefetch, так як браузер вже «знає», куди йому потрібно піти, щоб дістати ресурс, поки до нього дійде парсер.
Preconnect
Метод дуже схожий до попереднього, але, окрім, DNS запиту браузер зробить ще і TCP handshake, і опціональий TLS negotiation.
<link rel="preconnect" href="http://travelscode.com">Зверніть увагу, що в коді не вказується певний файл для preconnect, а замість цього повідомляється розташування, де можна знайти ресурси, які можливо будуть використовуватися на даній сторінці.
Prefetching
Якщо ми точно впевнені що конкретний ресурс буде потрібний в майбутньому, ми можемо сказати браузеру завантажити його і зберегти в кеш. Для прикладу, картинка або скрипт, або будь що що може буде закешоване браузером.
<link rel="prefetch" href="image.png">На відміну від DNS prefetching, ми дійсно завантажуємо цей ресурс і зберігаємо його в кеші. Однак, це залежить від великої кількості умов, prefetching може бути проігнорованим браузером. Наприклад, браузер може відмовитись завантажувати великий файл шрифтів при повільній мережі. Firefox завантажуватиме ресурси лише якщо “the browser is idle”.
Ще один приклад, prefetch (попередня вибірка), призначена для завантаження ресурсу, який, швидше за все, буде використовуватися в наступній навігації користувача. Як правило, це сторінка, на яку, швидше за все, перейде користувач після тієї, на яку він дивиться в даний момент.
Prefetch найбільш схожий на rel = «previous» і next, і в більшості випадків буде використовуватися таким же чином:
<link rel="prefetch" href="/190/Using-link-rel-to-preload-web-content-and-aid-accessibility">Subresources
Іншою prefetching технікою яка допомагає ідентифікувати ресурс з високим пріоритетом і який повинен бути запрошений до prefetched ресурсів:
<link rel="subresource" href="styles.css">Відповідно до Chromium документації, повинно працювати наступним чином:
“LINK rel=subresource” provides a new link relation type with different semantics from LINK rel=prefetch. While rel=prefetch provides a low-priority download of resources to be used on subsequent pages, rel=subresource enables early loading of resources within the current page.
Що ж, якщо ресурс потрібний для поточної сторінки, або він потрібний якомога швидше, то краще використовувати subresource ніж prefetch.
Перевірив актуальність цього методу на Can I Use і він підтримується останніми версіями Chrome, але десь бачив інформацію що він може бути видаленим з Хрома.
Prerendering сторінок
Даний методи дозволяє попередньо завантажити всі ресурси з вказаного документу:
<link rel="prerender" href="http://travelscode.com">Ця фіча працює наче відкриття URL в прихованій табі – всі ресурси будуть завантаженні, DOM побудований, сторінка відмальована, CSS примінений і JavaScript виконаний. Якщо користувач перейде на вказану сторінку, прихована сторінка просто миттєво появиться.
Будьте уважними! Вам потрібно бути точно впевненими що користувач клікне на потрібне посилання, інакше браузер безкорисно завантажить всі ресурси. Це може викликати додаткові витрати трафіку у користувачів.
Preloading
Запустити попередню, високопріоритетну, не блокуючу отрисовку вибраного ресурсу, який використовується на поточній сторінці можна за допомогою ключового слова preload.
Хорошим прикладом використання preload є веб-шрифти: як правило, шрифти завантажуються тільки тоді, коли вони будуть визначені в CSS, що часто призводить до страшного «збіговиська контенту без оформлення», так як сторінка відмальовується спочатку за допомогою стандартних типів шрифтів, і тільки потім , при завантаженні, перемальовує сторінку за допомогою веб-шрифту. Щоб уникнути цього, ми можемо вказати, щоб шрифт завантажувався до того, як ми досягнемо CSS. У випадку з даним сайтом, це буде шрифт Libertad, який використовується для оформлення тексту тіла сторінки:
<link rel="preload" href="libertad.woff2" as="font">Почитати
https://css-tricks.com/prefetching-preloading-prebrowsing/
http://www.stevesouders.com/blog/2013/11/07/prebrowsing/
https://habrahabr.ru/company/paysto/blog/266495/
Slides from a talk by Ilya Grigorik called Preconnect, prerender, prefetch
