ProHoster > Блог > администрация > Предварително зареждане, предварително извличане и други тагове

Предварително зареждане, предварително извличане и други тагове

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

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

<link rel="prefetch" href="/bg/style.css" as="style" />
<link rel="preload" href="/bg/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" />


Нека накратко обясним какво правят и кога да ги използвате.

Прескочи към: натоварването · предварително изваждане · предварително свързване · dns-предварително извличане · предварително изобразяване

натоварването

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

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

синтаксис

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

href сочи към ресурса, който искате да изтеглите.

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

  • style за листове със стилове,
  • script за скриптове,
  • font за шрифтове,
  • fetch за ресурси, заредени с помощта fetch() или XMLHttpRequest,
  • вижте пълния списък на MDN.

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

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

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

  • Нестандартни шрифтове от външен файл: 
    <!-- index.html -->
<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" />
  • Ако разделите стиловете си според подхода Критичен 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">за да започнете изтеглянето по-рано:

    <style>
/* Inlined critical styles */
</style>

<link rel="preload" href="/bg/app/non-critical.css" as="style" />

<script>
/* Custom JS that starts downloading non-critical styles */
loadCSS('/app/non-critical.css');
</script>

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

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

Детайли

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

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

Предварително зареждане, предварително извличане и други тагове

предварително изваждане

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

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

синтаксис

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

href сочи към ресурса, който искате да изтеглите.

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

  • style за листове със стилове,
  • script за скриптове,
  • font за шрифтове,
  • fetch за ресурси, заредени с помощта fetch() или XMLHttpRequest,
  • вижте пълния списък на MDN.

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

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

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

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

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

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

Детайли

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

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

предварително свързване

<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-предварително извличане

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

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

За всеки нов домейн резолюцията на DNS запис обикновено отнема около 20-120 ms. Това засяга само зареждането на първия ресурс от даден домейн, но все пак въвежда забавяне. Ако извършим 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 (система за имена на домейни) сървърите го съпоставят с IP адреса на сървъра (216.58.215.78).

За да определи IP адрес, браузърът трябва да направи заявка към DNS сървъра. Отнема 20−120 ms при свързване към нов домейн на трета страна.

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

предварително изобразяване

<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"> — когато сте сигурни, че потребителите ще отидат на определена страница и искате да ускорите показването й

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

Добавяне на нов коментар