Menene resource hints kamar preload, prefetch da preconnect?

Question

IT Interview Practice · Accepted Answer

**Resource hints** sune maki `` waɗanda suke gaya wa brawza'a da za a gano ko haɗa ga abubuwan albarkatawa a waje, ƙara ingancin loading. Kowannensu yana aiki akan buɗe daban-daban/fifiko. ```html ``` ## Abin da kowannensu yake yi - **`preload`** — "Ina bukatar haka **don fayina na yanzu**, kawo da shi yanzu tare da tsararrun buƙatu." Don muhimman abubuwan da janyewa ya gano jiya: fonts, hotuna na jarumi, abubuwan da CSS ake zikita. Yana buƙatar `as` don brawza'a ya saita daidai na buƙatu/headers. - **`preconnect`** — "Za ni haɗa da wannan **asali** nan gida; yi sakonnin DNS + TCP + TLS jiya." Yana ciyar da zagaye kafin buɗin farko ga abokin ɗan ɗaba (API, mai-masaukin fonts, CDN). Yi amfani don wasu muhimman asalai. - **`dns-prefetch`** — sauran nau'i mai santsi na preconnect: DNS sakonnin kawai. Kyakkyawan sakonnin sabani / don asalai da yawa. - **`prefetch`** — "Ina **kusan** bukarar haka don **sauran** balewa; kawo da shi tare da ƙarancin buƙatu lokacin da babu aiki." Don shafukan/abubuwan da za a iya bukarar jiya. An yi abubuwan kujerun gida don gida na gida, ba na fayina na yanzu. ## Misalin gaskiya ta gida: fonts ```html ``` Fonts ana gano jiya (brawza'a dole ta sakanna CSS farko), don haka a kawo da su tare da kaɗai ba jiya ba daidai. ## Agogo: kar a ba da hoto daidai A kawo da duka daidai ba ba a ƙara buhari - yana taɓa da muhimman abubuwan gaskiya don hannu. Ba da sakoni kawai ga wasu wadanda suka fi ƙau. ## Me yasa ya fi dacewa Resource hints kan ƙarye jiya akan hanyar muhimma: `preconnect` yana cire jiyar haɗawar abokin ɗan ɗaba, `preload` yana ba da tsadde ga muhimman abubuwan da janyewa ya gano jiya (fonts, hoton LCP), da `prefetch` yana sa sauran balewa da kaɗai. Ana yin amfani da shi da sakkarau, yana yin ingancin Core Web Vitals na ma'ana.

Abin da kowannensu yake yi

Misalin gaskiya ta gida: fonts

Agogo: kar a ba da hoto daidai

Me yasa ya fi dacewa

Tambayoyi masu alaƙa