ProHoster > Blog > Идораи > Пешакӣ, пешакӣ ва барчаспҳои дигар

Пешакӣ, пешакӣ ва барчаспҳои дигар

вуҷуд доранд роҳҳои зиёде барои беҳтар кардани кори веб. Яке аз онҳо боркунии мундариҷаест, ки баъдтар лозим мешавад. Коркарди пешакии CSS, пешакии саҳифаи пурра ё ҳалли номи домейн. Мо ҳама чизро пешакӣ анҷом медиҳем ва сипас натиҷаро фавран нишон медиҳем! Хуб садо медиҳад.

Чизи боз ҳам сардтар он аст, ки он хеле содда амалӣ карда мешавад. Панҷ тег ба браузер фармон диҳед, то амалҳои пешакиро иҷро кунад:

<link rel="prefetch" href="/tg/style.css" as="style" />
<link rel="preload" href="/tg/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 · пешакй кардан

пешакӣ

<link rel= "preload"> ба браузер мегӯяд, ки ҳарчи зудтар захираро (ба монанди скрипт ё ҷадвали услуб) бор ва кэш кунад. Ин вақте муфид аст, ки захира чанд сония пас аз боркунии саҳифа лозим мешавад ва шумо мехоҳед ин равандро суръат диҳед.

Браузер пас аз боркунӣ бо захира ҳеҷ кор намекунад. Скриптҳо иҷро намешаванд, варақаҳои услубҳо истифода намешаванд. Манбаъ танҳо кэш карда мешавад ва дарҳол бо дархост дастрас карда мешавад.

наҳвӣ

<link rel="preload" href="/tg/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="/tg/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="/tg/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-ро бор кунад, шрифтҳои 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, 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 (Системаи номи доменӣ) онро бо суроғаи IP-и сервер (216.58.215.78).

Барои муайян кардани суроғаи IP, браузер бояд сервери DNS-ро пурсад. Ҳангоми пайваст шудан ба домени нави тарафи сеюм 20−120 мс вақт мегирад.

DNS кэш карда шудааст, гарчанде он қадар боэътимод нест. Баъзе OS ва браузерҳо дархостҳои 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% меҳмонони саҳифаи А ба саҳифаи В мераванд, пас <link rel= "prerender"> дар саҳифаи А барои зуд намоиш додани саҳифаи B кӯмак мекунад.

Аз ҳад зиёд истифода набаред. Пешниҳод аз ҷиҳати фарохмаҷро ва хотира хеле гарон аст. истифода набаред <link rel= "prerender"> барои зиёда аз як саҳифа.

Дидани тафсилот

Теги ихтиёрӣ. Аз браузер талаб карда намешавад, ки ин дастурро иҷро кунад ва метавонад онро сарфи назар кунад, масалан, ҳангоми пайвасти суст ё ҳангоми мавҷуд набудани хотираи холӣ.

Барои захира кардани хотира Chrome намоиши пурраро иҷро намекунадва танҳо NoState-ро пешакӣ бор кунед. Ин маънои онро дорад, ки Chrome саҳифа ва тамоми захираҳои онро бор мекунад, аммо JavaScript-ро иҷро намекунад ё иҷро намекунад.

Firefox ва Safari ин тегро умуман дастгирӣ намекунанд. Ин мушаххасотро вайрон намекунад, зеро аз браузерҳо талаб карда намешавад, ки ин дастурро риоя кунанд; вале боз хам аламовар. Хатогии татбиқ Firefox ҳафт сол боз кушода аст. Гузоришҳо ҳастанд, ки Сафари ин тегро низ дастгирӣ намекунад.

Натиҷа

Истифода:

  • <link rel= "preload"> - вақте ки ба шумо дар чанд сония захира лозим аст
  • <link rel= "prefetch"> - вақте ки ба шумо манбаъ дар саҳифаи оянда лозим аст
  • <link rel= "preconnect"> - вақте ки шумо медонед, ки ба зудӣ ба шумо манбаъ лозим мешавад, аммо шумо URL-и пурраи онро намедонед
  • <link rel= "dns-prefetch"> - ҳамин тавр, вақте ки шумо медонед, ки ба зудӣ ба шумо манбаъ лозим мешавад, аммо шумо URL-и пурраи онро намедонед (барои браузерҳои кӯҳна)
  • <link rel= "prerender"> — вақте ки шумо боварӣ доред, ки корбарон ба саҳифаи муайян мераванд ва шумо мехоҳед намоиши онро суръат диҳед

Манбаъ: will.com

Илова Эзоҳ