Има много начини за повишаване на уеб производителността. Един от тях е предварителното зареждане на съдържание, което ще е необходимо по-късно. Префетчинг на CSS, предварително рендиране на цялата страница или разрешаване на домейнното име. Правим всичко предварително, а след това мигновено показваме резултата! Звучи страхотно.

Още по-добре, че това е много просто за реализиране. Пет тагa <link rel> дават на браузъра указание за предварителни действия:

<link rel="prefetch" href="/style.css" as="style" />
<link rel="preload" href="/style.css" as="style" />

<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />

<link rel="prerender" href="https://example.com/about.html" />

Накратко ще разкажем какво правят и кога да ги използвате.

Премини към: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel="preload"> казва на браузъра да зареди и кешира ресурса (например, скрипт или таблица със стилове) колкото се може по-скоро. Това е полезно, когато ресурсът ще е необходим след няколко секунди след зареждане на страницата — и искате да ускорите процеса.

Браузърът нищо не прави с ресурса след зареждане. Скриптовете не се изпълняват, таблиците със стилове не се прилагат. Ресурсът просто се кешира и незабавно се предоставя при поискване.

Синтаксис

<link rel="preload" href="/style.css" as="style" />

href указва на ресурса, който искате да изтеглите.

като може да бъде всичко, което може да се изтегли в браузъра:

style за таблици със стилове,
скрипт за скриптове,
font за шрифтове,
fetch за ресурси, изтеглени чрез fetch() или XMLHttpRequest,
пълен списък см. на MDN.

Важно е да укажете атрибута като – това помага на браузъра да приоритизира правилно и да планира зареждането.

Кога да използвате

Използвайте предварително зареждане, когато ресурсът ще е необходим в най-скоро време. Например:

Нестандартни шрифтове от външен файл:
```

<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
По подразбиране comic-sans.woff2 ще започне да се зарежда само след зареждане и разбиране на index.css. За да не чакате толкова дълго, можете да заредите шрифта по-рано с помощта на <link rel="preload">:
```
<link rel="preload" href="comic-sans.woff2" as="font" />
```
Ако разделяте стиловете си според подхода Critical CSS на две части, критична (за незабавно рендиране) и некритична:
```
<style>
/* Inlined critical styles */
</style>

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>
```
При този подход некритичните стилове ще започнат да се зареждат само при стартиране на JavaScript, което може да се случи след няколко секунди след рендериране. Вместо да чакате JS, използвайте <link rel="preload">, за да започнете зареждането по-рано:
```
/* Inlined critical styles */
```

Не злоупотребявайте с предзареждане. Ако зареждате всичко наред, сайтът няма да се ускори по магически начин, а напротив, това ще попречи на браузера да планира работата си правилно.

Не бъркайте с предизтегляне. Не използвайте <link rel="preload">, ако не ви е нужен ресурс веднага след зареждането на страницата. Ако ви трябва по-късно, например, за следващата страница, използвайте <link rel= "prefetch">.

Подробности

Това е задължителен таг за изпълнение от браузера (ако го поддържа), в противен случай всички други тагове , свързани с предварително зареждане. Браузерът е длъжен да зареди ресурса, посочен в <link rel="preload">. В другите случаи той може да игнорира предварителното зареждане, например, ако работи на бавно свързване.

Приоритети. Различни ресурси (стилове, скриптове, шрифтове и т.н.) получават различни приоритети от браузърите, за да зареждат най-важните ресурси на първо място. В този случай браузерът определя приоритета по атрибута като. За браузера Chrome можете да видите пълната таблица с приоритети.

prefetch

<link rel= "prefetch"> моли браузера да зареди и кешира ресурса (например, скрипт или стилова таблица) на заден план. Зареждането става с нисък приоритет, така че не пречи на по-важни ресурси. Това е полезно, ако ресурсът ще ви е нужен на следващата страница, а искате да го кеширате предварително.

Тук също браузерът не прави нищо с ресурса след зареждане. Скриптовете не се изпълняват, стиловите таблици не се прилагат. Ресурсът просто се кешира и незабавно се предоставя при поискване.

Синтаксис

<link rel="prefetch" href="/style.css" as="style" />

href указва на ресурса, който искате да изтеглите.

като може да бъде всичко, което може да се изтегли в браузъра:

style за таблици със стилове,
скрипт за скриптове,
font за шрифтове,
fetch за ресурси, изтеглени чрез fetch() или XMLHttpRequest,
пълен списък см. на MDN.

Важно е да укажете атрибута като — това помага на браузера да подрежда правилно приоритетите и да планира зареждането.

Кога да използвате

За зареждане на ресурси от други страници, ако ви е нужен ресурс от друга страница и искате да го предзаредите, за да ускорите рендеринга на тази страница. Например:

Имате онлайн магазин и 40% от потребителите напускат основната страница към страницата на продукта. Използвайте <link rel= "prefetch">, като зареждате CSS и JS файлове за рендериране на страници с продукта.
Имате единичнофункционално приложение, а различните страници зареждат различни пакети. Когато потребителят посети страница, можете предварително да заредите пакетите за всички страници, на които тя се позовава.

Вероятно можете безопасно да използвате този таг в какъвто и да е обем. Браузърите обикновено планират предварително зареждане с най-нисък приоритет, така че то не пречи на никого. Просто имайте предвид, че потребителският трафик се изразходва, което може да струва пари.

Не за спешни заявки. Не използвайте <link rel= "prefetch">, когато ресурсът ще е необходим след няколко секунди. В този случай използвайте <link rel="preload">.

Подробности

Необязателен таг. Браузерът не е задължен да следва тази инструкция, той може да я игнорира, например, при бавна връзка.

Приоритет в Chrome. В Chrome <link rel= "prefetch"> обикновено се изпълнява с минимален приоритет (вижте пълната таблица с приоритети), тоест след зареждането на всичко останало.

preconnect

<link rel= "preconnect"> казва на браузъра да се свърже предварително с домейна, когато искате да ускорите установяването на връзката в бъдеще.

Браузерът трябва да установи връзка, ако извлича ресурси от нов външен домейн. Например, ако зарежда шрифтове от Google Fonts, React от CDN или иска JSON от API сървър.

Установяването на нова връзка обикновено отнема няколко стотин милисекунди. То се извършва веднъж, но все пак отнема време. Ако сте установили предварително връзка, спестявате време и зареждате ресурси от този домейн по-бързо.

Синтаксис

<link rel= "preconnect" href="https://api.my-app.com" />

href показва домейн името, за което трябва да се определи IP адрес. Можете да го зададете с префикс (https://domain.com) или без него (//domain.com).

Кога да използвате

Използвайте за домейни, които скоро ще са необходими за зареждане на важен стил, скрипт или изображение оттам, но все още не знаете URL адреса на ресурса. Например:

Вашето приложение е хоствано на my-app.com и прави AJAX заявки към api.my-app.com: не знаете предварително конкретните заявки, защото те се извършват динамично от JS. Тук е напълно уместно използването на таг за предварително свързване с домена.
Вашето приложение е хоствано на my-app.com и използва шрифтовете на Google Fonts. Те се зареждат на два етапа: първо се зарежда CSS файл от домейна fonts.googleapis.com, след което този файл поиска шрифтове от fonts.gstatic.com. Не можете да знаете кои конкретни файлове със шрифтове от fonts.gstatic.com ще ви трябват, докато не заредите CSS файла, така че предварително можем само да установим предварително свързване.

Използвайте този таг, за да ускорите малко някакъв външен скрипт или стил. чрез предварително установяване на свързване.

Не злоупотребявайте.Установяването и поддържането на връзка е скъпа операция и за клиента, и за сървъра. Използвайте този таг максимум за 4-6 домейна.

Подробности

Необязателен тагБраузърът не е задължен да следва тази инструкция и може да я игнорира, например, ако вече са установени много връзки или в друг случай.

Какво включва процесът на свързванеЗа да се свърже с всеки сайт, браузърът трябва да извърши следните действия:

Резолвиране на DNS.Намиране на IP адреса на сървера (216.58.215.78) за посоченото доменно име (google.com).
TCP ръкостискане.Обмен на пакети (клиент → сървър → клиент), за да инициира TCP свързване със сървера.
TLS ръкостискане (само за HTTPS сайтове).Два рунда обмен на пакети (клиент → сървър → клиент → сървър → клиент), за да инициира сигурна TLS сесия.

Забележка: HTTP/3 ще подобри и ускори механизма на ръкостискане, но е все още далеч.

dns-prefetch

<link rel= "dns-prefetch"> моли браузъра предварително да извърши резолвиране на DNS за домейна, ако скоро ще се свързвате с него и искате да ускорите началната връзка.

Браузърът трябва да определи IP адреса на домейна, ако ще извлича някакви ресурси от нов външен домейн. Например, да зарежда шрифтове от Google Fonts, React от CDN или да изисква JSON от API сървър.

За всеки нов домейн разрешаването на DNS запис обикновено отнема около 20−120 мс. Това влияе само на зареждането на първия ресурс от този домейн, но все пак представлява забавяне. Ако извършим разрешаването на DNS предварително, ще спестим време и ще заредим ресурса по-бързо.

Синтаксис

<link rel= "dns-prefetch" href="https://api.my-app.com" />

href посочва доменното име, за което трябва да установите IP адрес. Може да се указва с префикс (https://domain.com) или без него (//domain.com).

Кога да използвате

Използвайте за домейни, които скоро ще са необходими за зареждане на ресурси оттам, за които браузърът не знае предварително. Например:

Вашето приложение е хоствано на my-app.com и прави AJAX заявки към api.my-app.com: не знаете предварително конкретните заявки, защото те се извършват динамично от JS. Тук е напълно уместно използването на таг за предварително свързване с домена.
Вашето приложение е хоствано на my-app.com, и използва шрифтове от Google Fonts. Те се зареждат в два етапа: първо се зарежда CSS файл от домейна. fonts.googleapis.com, след което този файл поиска шрифтове от fonts.gstatic.com. Не можете да знаете кои конкретни файлове със шрифтове от fonts.gstatic.com ще ви трябва, докато не заредите CSS файла, така че предварително можем само да установим предварително свързване.

Обърнете внимание на сходните характеристики на <link rel= "dns-prefetch"/> и <link rel= "preconnect">Обикновено няма смисъл да ги използвате за един и съща домейн: <link rel= "preconnect"> вече включва <link rel= "dns-prefetch"/> и много други. Това може да бъде оправдано в два случая:

Искате да поддържате стари браузъри. <link rel= "dns-prefetch" /> поддерживается започвайки от IE10 и Safari 5. <link rel= "preconnect"> няколко време беше поддържан в Chrome и Firefox, но беше добавен в Safari едва в 11.1 и все още не се поддържа в IE/Edge. Ако трябва да поддържате тези браузъри, използвайте <link rel= "dns-prefetch" /> като резервен вариант за <link rel= "preconnect">.

Искате да ускорите свързването с повече от 4-6 домейна. Тагът <link rel= "preconnect"> не се препоръчва да се използва с повече от 4-6 домейна, тъй като установяването и поддържането на връзката е скъпа операция. <link rel= "dns-prefetch" /> изразходва по-малко ресурси, така че, ако е необходимо, използвайте го.

Подробности

Необязателен таг. Браузърът не е задължен да следва тази инструкция, така че може да не извърши резолвинг на DNS, например, ако на страницата има много такива тагове или в някакъв друг случай.

Какво е DNS. На всеки сървър в интернет съответства уникален IP-адрес, който изглежда като 216.58.215.78. В адресната лента на браузъра обикновено се въвежда името на сайта (например, google.com), а DNS сървърите (Domain Name System) го съпоставят с IP-адреса на сървъра (216.58.215.78).

За да определи IP-адреса, браузърът трябва да изпрати запитване до DNS сървъра. Това отнема 20-120 мс при свързване с нов външен домейн.

DNS се кешира, въпреки че не много надеждно. Някои операционни системи и браузъри кешират DNS запитвания: това спестява време при повторни запитвания, но на кеширането не може да се разчита. В Linux обикновено изобщо не работи. Chrome има кеш за DNS, но той съществува само в рамките на минута. Windows кешира отговорите на DNS за пет дни.

prerender

<link rel= "prerender"> моли браузъра да зареди URL адреса и да го представи на невидим таб. Когато потребителят кликне върху връзката, страницата трябва да се покаже незабавно. Това е полезно, ако сте сигурни, че потребителят ще посети определена страница и искате да ускорите нейното показване.

Въпреки изключителната ефективност на този таг (или заради нея), през 2019 г. <link rel= "prerender"> се поддържа слабо от основните браузъри. Повече информация вижте по-долу.

Синтаксис

<link rel="prerender" href="https://my-app.com/pricing" />

href посочва URL адреса, за който искате да се извърши рендериране на фона.

Кога да използвате

Когато сте наистина сигурни, че потребителят ще премине към определена страница. Ако имате „тунел“, в който 70% от посетителите на страница A преминават на страница B, то <link rel= "prerender"> на страница A ще помогне много бързо да се покаже страница B.

Не злоупотребявайте.. Предварителното зареждане е изключително скъпо по отношение на трафика и паметта. Не използвайте <link rel= "prerender"> повече от една страница.

Подробности

Необязателен таг. Браузърът не е задължен да следва тази инструкция и може да я игнорира, например, при бавна интернет връзка или при недостатъчно свободно пространство в паметта.

С цел икономия на памет Chrome не изпълнява пълно зареждане, а само предзареждане NoState. Това означава, че Chrome зарежда страницата и всички нейни ресурси, но не извършва рендеринг и не изпълнява JavaScript.

Firefox и Safari изобщо не поддържат този таг. Това не нарушава спецификацията, тъй като браузърите не са задължени да изпълняват тази инструкция; все пак е жалко. Бъг в изпълнението в Firefox е открит в продължение на седем години. Има съобщения, че Safari също не поддържа този таг.

Резюме

Използвайте:

<link rel="preload"> — когато ще ви е необходим ресурс след няколко секунди
<link rel= "prefetch"> — когато ще ви е необходим ресурс на следващата страница
<link rel= "preconnect"> — когато знаете, че скоро ще ви е нужен ресурс, но все още не знаете пълния му URL
<link rel= "dns-prefetch"> — подобно, когато знаете, че скоро ще ви е нужен ресурс, но все още не знаете пълния му URL (за стари браузъри)
<link rel= "prerender"> — когато сте сигурни, че потребителите ще преминат на определена страница и искате да ускорите нейното показване

Източник: habr.com