Има много начини за повишаване на производителността на уебсайта. Един от тях е предварителното зареждане на съдържание, което ще бъде необходимо по-късно. Префетчване на 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"> казва на браузъра да зареди и кешира ресурса (например, скрипт или CSS файл) възможно най-скоро. Това е полезно, когато ресурсът ще бъде необходим след няколко секунди след зареждане на страницата — и искате да ускорите процеса.

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

Синтаксис

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

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

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

style за CSS файлове,
script за скриптове,
font за шрифтове,
fetch за ресурси, изтеглени с fetch() или XMLHttpRequest,
пълен списък вижте в MDN.

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

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

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

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

<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>
/* Включени критични стилове */
</style>

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

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

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

Подробности

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

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

prefetch

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

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

Синтаксис

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

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

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

style за CSS файлове,
script за скриптове,
font за шрифтове,
fetch за ресурси, изтеглени с fetch() или XMLHttpRequest,
пълен списък вижте в MDN.

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

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

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

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

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

Не за спешни запитвания. Не използвайте <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 преминават към страница Б, то <link rel= "prerender"> на страница A ще помогне много бързо да се визуализира страница Б.

Не злоупотребявайте. Предварителното рендериране е изключително скъпо по отношение на трафика и паметта. Не използвайте <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