ProHoster > блог > адміністраванне > Preload, prefetch і іншыя тэгі

Preload, prefetch і іншыя тэгі

Ёсць шмат спосабаў павышэння вэб-прадукцыйнасці. Адзін з іх - перадзагрузка кантэнту, які спатрэбіцца пазней. Прэфтэчынг CSS, папярэдні рэндэрынг поўнай старонкі або рэзалінг даменнага імя. Які робіцца ўсё загадзя, а потым імгненна адлюстроўваем вынік! Гучыць крута.

Яшчэ страмчэй, што гэта вельмі проста рэалізавана. Пяць тэгаў даюць браўзэру каманду на папярэднія дзеянні:

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

папярэдняя нагрузка

<link rel= "preload"> кажа браўзэру як мага хутчэй загрузіць і кэшаваць рэсурс (напрыклад, скрыпт ці табліцу стыляў). Гэта карысна, калі рэсурс спатрэбіцца праз некалькі секунд пасля загрузкі старонкі - і вы хочаце паскорыць працэс.

Браўзэр нічога не робіць з рэсурсам пасля загрузкі. Скрыпты не выконваюцца, табліцы стыляў не прымяняюцца. Рэсурс проста кэшуецца і неадкладна падаецца па запыце.

сінтаксіс

<link rel="preload" href="/be/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="/be/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 можаце паглядзець поўную табліцу прыярытэтаў.

Preload, prefetch і іншыя тэгі

папярэдняя выбарка

<link rel= "prefetch"> просіць браўзэр загрузіць і кэшаваць рэсурс (напрыклад, скрыпт ці табліцу стыляў) у фонавым рэжыме. Загрузка адбываецца з нізкім прыярытэтам, таму не перашкаджае важнейшым рэсурсам. Гэта карысна, калі рэсурс спатрэбіцца на наступнай старонцы, а вы хочаце загадзя яго кэшаваць.

Тут таксама браўзэр нічога не робіць з рэсурсам пасля загрузкі. Скрыпты не выконваюцца, табліцы стыляў не прымяняюцца. Рэсурс проста кэшуецца і неадкладна падаецца па запыце.

сінтаксіс

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

href паказвае на рэсурс, які вы хочаце спампаваць.

as можа быць чым заўгодна, што можна спампаваць у браўзэры:

  • style для табліц стыляў,
  • 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"> звычайна выконваецца з мінімальным прыярытэтам (гл. поўную табліцу прыярытэтаў), гэта значыць пасля загрузкі ўсяго астатняга.

папярэдняе падключэнне

<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/XNUMX і па-ранейшаму не падтрымліваецца ў 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"> на старонцы А дапаможа вельмі хутка адлюстраваць старонку Б.

не злоўжывайце. Папярэдні рэндэрынг надзвычай дорага абыходзіцца з пункту гледжання трафіку і памяці. Не выкарыстоўвайце <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

Дадаць каментар