ПроХостер > блог > Администрација > Претходно учитавање, преузимање унапред и друге ознаке

Претходно учитавање, преузимање унапред и друге ознаке

Ту је много начина за побољшање перформанси веба. Један од њих је претходно учитавање садржаја који ће бити потребан касније. ЦСС претходна обрада, унапред приказивање целе странице или разрешавање имена домена. Радимо све унапред, а затим одмах приказујемо резултат! Звучи кул.

Оно што је још кул је то што се врло једноставно имплементира. Пет ознака дајте претраживачу команду да изврши прелиминарне радње:

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


Хајде да укратко објаснимо шта они раде и када их користити.

Скочи на: прелоад · унапред преузети · прецоннецт · днс-префетцх · пререндер

прелоад

<link rel= "preload"> говори претраживачу да учита и кешира ресурс (као што је скрипта или листа стилова) што је пре могуће. Ово је корисно када је потребан ресурс неколико секунди након што се страница учита - и желите да убрзате процес.

Прегледач не ради ништа са ресурсом након учитавања. Скрипте се не извршавају, стилски листови се не примењују. Ресурс се једноставно кешује и одмах ставља на располагање на захтев.

синтакса

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

href указује на ресурс који желите да преузмете.

as може бити било шта што се може преузети у претраживачу:

  • style за стилове,
  • script за скрипте,
  • font за фонтове,
  • fetch за ресурсе учитане помоћу fetch() или XMLHttpRequest,
  • погледајте пуну листу на МДН.

Важно је навести атрибут 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" />
  • Ако одвојите своје стилове према приступу Критички ЦСС на два дела, критичан (за тренутно приказивање) и некритичан: 
    <style>
/* Inlined critical styles */
</style>

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

    Са овим приступом, некритични стилови ће почети да се учитавају тек када се покрене ЈаваСцрипт, што се може догодити неколико секунди након рендеровања. Уместо чекања користите ЈС <link rel= "preload">да бисте почели да преузимате раније:

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

<link rel="preload" href="/sr/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. За Цхроме прегледач можете погледати пуна табела приоритета.

Претходно учитавање, преузимање унапред и друге ознаке

унапред преузети

<link rel= "prefetch"> тражи од претраживача да преузме и кешира ресурс (као што је скрипта или листа стилова) у позадини. Учитавање се дешава са ниским приоритетом тако да не омета важније ресурсе. Ово је корисно ако је ресурс потребан на следећој страници и желите да га унапред кеширате.

И овде прегледач не ради ништа са ресурсом након учитавања. Скрипте се не извршавају, стилски листови се не примењују. Ресурс се једноставно кешује и одмах ставља на располагање на захтев.

синтакса

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

href указује на ресурс који желите да преузмете.

as може бити било шта што се може преузети у претраживачу:

  • style за стилове,
  • script за скрипте,
  • font за фонтове,
  • fetch за ресурсе учитане помоћу fetch() или XMLHttpRequest,
  • погледајте пуну листу на МДН.

Важно је навести атрибут as - ово помаже претраживачу да правилно одреди приоритете и закаже преузимања.

Када користити

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

  • Имате онлајн продавницу, а 40% корисника напушта почетну страницу за страницу производа. Користите <link rel= "prefetch">, учитавање ЦСС и ЈС датотека за приказивање страница производа.
  • Имате апликацију на једној страници, а различите странице учитавају различите пакете. Када корисник посети страницу, пакети за све странице на које повезује могу бити унапред учитани.

Вероватно је да се ова ознака може безбедно користити у било којој мери.. Претраживачи обично заказују унапред преузимање са најнижим приоритетом, тако да то никоме не смета. Само имајте на уму да троши кориснички саобраћај, што може коштати новац.

Не за хитне захтеве. Немојте користити <link rel= "prefetch">, када је ресурс потребан за неколико секунди. У овом случају користите <link rel= "preload">.

Детаљи

Опциона ознака. Прегледач није обавезан да прати ово упутство; може га игнорисати, на пример, на спорој вези.

Приоритет у Цхроме-у. У Цхроме-у <link rel= "prefetch"> обично се извршава са минималним приоритетом (види пуна табела приоритета), односно након учитавања свега осталог.

прецоннецт

<link rel= "preconnect"> тражи од претраживача да се унапред повеже са доменом када желите да убрзате подешавање везе у будућности.

Прегледач мора да успостави везу ако преузима било какве ресурсе са новог домена треће стране. На пример, ако учитава Гоогле фонтове, Реацт фонтове са ЦДН-а или захтева ЈСОН одговор од АПИ сервера.

Успостављање нове везе обично траје неколико стотина милисекунди. То се ради једном, али ипак треба времена. Ако сте унапред успоставили везу, уштедећете време и брже преузимате ресурсе са овог домена.

синтакса

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

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

Када користити

Користите за домене који ће ускоро бити потребни да преузмете важан стил, скрипту или слику одатле, али још увек не знате УРЛ ресурса. На пример:

  • Ваша апликација је хостована на my-app.com и поставља АЈАКС захтеве за api.my-app.com: Не знате унапред конкретне упите јер се динамички праве из ЈС-а. Овде је сасвим прикладно користити ознаку за претходно повезивање са доменом.
  • Ваша апликација је хостована на my-app.com и користи Гоогле фонтове. Они се преузимају у два корака: прво се преузима ЦСС датотека са домена fonts.googleapis.com, онда ова датотека захтева фонтове са fonts.gstatic.com. Не можете знати из којих су специфичних датотека фонтова fonts.gstatic.com биће вам потребно док не учитате ЦСС датотеку, тако да можемо само да успоставимо прелиминарну везу унапред.

Користите ову ознаку да мало убрзате неки скрипт или стил треће стране због унапред успостављене везе.

Немојте претерано користити. Успостављање и одржавање везе је скупа операција и за клијента и за сервер. Користите ову ознаку за највише 4-6 домена.

Детаљи

Опциона ознака. Прегледач није обавезан да прати ово упутство и може га игнорисати, на пример, ако је већ успостављено много веза или у неком другом случају.

Шта укључује процес повезивања?. Да би се повезао са сваким сајтом, прегледач мора да уради следеће:

  • ДНС резолуција. Пронађите ИП адресу сервера (216.58.215.78) за наведено име домена (google.com).
  • ТЦП руковање. Размена пакета (клијент → сервер → клијент) за покретање ТЦП везе са сервером.
  • ТЛС руковање (само ХТТПС сајтови). Два круга размене пакета (клијент → сервер → клијент → сервер → клијент) за покретање безбедне ТЛС сесије.

Напомена: ХТТП/3 ће побољшати и убрзати механизам руковања, али је још увек далеко.

днс-префетцх

<link rel= "dns-prefetch"> тражи од претраживача да унапред изврши ДНС резолуцију за домен ако ћете се ускоро повезати са њим и желите да убрзате почетну везу.

Прегледач мора да одреди ИП адресу домена ако ће преузети ресурсе са новог домена треће стране. На пример, учитавање Гоогле фонтова, Реацт фонтова са ЦДН-а или захтевање ЈСОН одговора од АПИ сервера.

За сваки нови домен, резолуција ДНС записа обично траје око 20-120 мс. Ово утиче само на учитавање првог ресурса са датог домена, али и даље доводи до кашњења. Ако унапред извршимо ДНС резолуцију, уштедећемо време и брже учитати ресурс.

синтакса

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

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

Када користити

Користите за домене који ће ускоро бити потребни да одатле преузмете ресурсе за које прегледач не зна унапред. На пример:

  • Ваша апликација је хостована на my-app.com и поставља АЈАКС захтеве за api.my-app.com: Не знате унапред конкретне упите јер се динамички праве из ЈС-а. Овде је сасвим прикладно користити ознаку за претходно повезивање са доменом.
  • Ваша апликација је хостована на my-app.com, и користи Гоогле фонтове. Они се преузимају у два корака: прво се преузима ЦСС датотека са домена fonts.googleapis.com, онда ова датотека захтева фонтове са fonts.gstatic.com. Не можете знати из којих су специфичних датотека фонтова fonts.gstatic.com биће вам потребан док не учитате ЦСС датотеку, тако да можемо само унапред да успоставимо прелиминарну везу.

Користите ову ознаку да мало убрзате неки скрипт или стил треће стране због унапред успостављене везе.

Имајте на уму сличне карактеристике као <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Обично нема смисла користити их заједно за један домен: <link rel= "preconnect"> већ укључује <link rel= "dns-prefetch"/> и још много тога. Ово се може оправдати у два случаја:

  • Да ли желите да подржите старије прегледаче?. <link rel= "dns-prefetch" /> подржан од од ИЕ10 и Сафарија 5. <link rel= "preconnect"> је неко време подржан у Цхроме-у и Фирефок-у, али је додат у Сафари само у 11.1 и још увек није подржан у ИЕ/Едге. Ако треба да подржите ове претраживаче, користите <link rel= "dns-prefetch" /> као резервна опција за <link rel= "preconnect">.
  • Желите да убрзате везе са више од 4-6 домена. Таг <link rel= "preconnect"> Не препоручује се коришћење са више од 4-6 домена, пошто је успостављање и одржавање везе скупа операција. <link rel= "dns-prefetch" /> троши мање ресурса, па га користите ако је потребно.

Детаљи

Опциона ознака. Прегледач није обавезан да прати ово упутство, тако да можда неће извршити ДНС резолуцију, на пример, ако има много таквих ознака на страници или у неком другом случају.

Шта је ДНС. Сваки сервер на Интернету има јединствену ИП адресу, која изгледа као 216.58.215.78. Назив сајта се обично уноси у траку за адресу претраживача (нпр. google.com), а ДНС (систем имена домена) сервери га поклапају са ИП адресом сервера (216.58.215.78).

Да би одредио ИП адресу, претраживач мора да упита ДНС сервер. Потребно је 20−120 мс када се повезујете на нови домен треће стране.

ДНС је кеширан, мада не баш поуздано. Неки оперативни системи и претраживачи кеширају ДНС упите: ово ће уштедети време на поновљеним упитима, али се не може поуздати у кеширање. На Линук-у обично уопште не ради. Цхроме има ДНС кеш, али траје само један минут. Виндовс кешира ДНС одговоре пет дана.

пререндер

<link rel= "prerender"> тражи од претраживача да преузме УРЛ и прикаже га на невидљивој картици. Када корисник кликне на везу, страница би требало да се одмах прикаже. Ово је корисно ако сте сигурни да ће корисник посетити одређену страницу и желите да убрзате њен приказ.

Упркос (или због) изузетне ефикасности ове ознаке, 2019 <link rel= "prerender"> слабо подржан у главним претраживачима. Погледајте више детаља. доле.

синтакса

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

href указује на УРЛ адресу коју желите да почнете да приказујете у позадини.

Када користити

Када сте заиста сигурни да ће корисник отићи на одређену страницу. Ако имате „тунел“ кроз који 70% посетилаца странице А иде на страницу Б, онда <link rel= "prerender"> на страници А ће помоћи да се страница Б прикаже веома брзо.

Немојте претерано користити. Пре-рендеринг је изузетно скуп у смислу пропусног опсега и меморије. Немојте користити <link rel= "prerender"> за више од једне странице.

Детаљи

Опциона ознака. Прегледач није обавезан да прати ово упутство и може га игнорисати, на пример, када је веза спора или када нема довољно слободне меморије.

Да сачувате меморију Цхроме не врши потпуно приказивањеИ само унапред учитајте НоСтате. То значи да Цхроме учитава страницу и све њене ресурсе, али не приказује нити извршава ЈаваСцрипт.

Фирефок и Сафари уопште не подржавају ову ознаку. Ово не крши спецификацију, пошто прегледачи нису обавезни да прате ово упутство; али ипак тужно. Грешка у имплементацији Фајерфокс је отворен седам година. Постоје извештаји да Сафари не подржава ни ову ознаку.

Резиме

Користите:

  • <link rel= "preload"> - када вам затреба ресурс за неколико секунди
  • <link rel= "prefetch"> - када вам затреба ресурс на следећој страници
  • <link rel= "preconnect"> - када знате да ће вам ускоро требати ресурс, али још не знате његову пуну УРЛ адресу
  • <link rel= "dns-prefetch"> - слично, када знате да ће вам ускоро требати ресурс, али још не знате његову пуну УРЛ адресу (за старије прегледаче)
  • <link rel= "prerender"> — када сте сигурни да ће корисници отићи на одређену страницу и желите да убрзате њен приказ

Извор: ввв.хабр.цом

Додај коментар