Cilat janë ndihmësat e burimeve si preload, prefetch dhe preconnect?

Question

Accepted Answer

**Ndihmësat e burimeve** janë etiketat `` që i thonë shfletuesit të marrë ose të lidhet me burime herët, duke optimizuar performancën e ngarkimit. Secila shërben një nevojë të ndryshme të kohëzgjatjes/prioritetit. ```html ``` ## Çfarë bën secila - **`preload`** — "Më duhet kjo **për faqen aktuale**, e marr tani me prioritet të lartë." Për burime kritike që analizuesi i zbuloja vonë: fonte, imazhe heroe, asete të referenuara nga CSS. Kërkon `as` në mënyrë që shfletuesit të caktojë prioritet/header të saktë. - **`preconnect`** — "Do të lidhem me këtë **origjinë** së shpejti; bëj kërkimin DNS + TCP + dritëkalimet TLS tani." Kursen raunde përpara kërkesës së parë në një palë të tretë (API, zyrë fontesh, CDN). Përdore për disa origjina kritike. - **`dns-prefetch`** — një version më i lehtë i preconnect: vetëm rezolucioni DNS. Zgjedhje e mirë fallback / për shumë origjina. - **`prefetch`** — "Ndoshta do të më duhet kjo për **navigimin e ardhshëm**; e marr me prioritet të ulët kur është aktiv." Për faqe/asete të mundshme të ardhshme. Të ruajtura në cache për të ardhmen, jo për faqën aktuale. ## Një shembull real i zakonshëm: fontet ```html ``` Fontet zbulohën vonë (shfletuesit duhet të analizojë CSS fillimisht), prandaj preload-imi i tyre shmang vonesa të tekstit të padukshëm. ## Kujdes: mos jep tepër ndihmë Preload-imi i gjithçkaje i kundërshton qëllimin — ai konkuron me burime vërtet kritike për gjerësinë e brezit. Jep ndihmë vetëm për disa që kanë më shumë rëndësi. ## Pse rëndëson Ndihmësat e burimeve zvogëlojnë vonesën në rrugën kritike: `preconnect` heq vonesen e dritëkalimit për palë të tretë, `preload` i jep përparësi burimeve kritike të zbuluar vonë (fonte, imazhe LCP), dhe `prefetch` e bën navigimin *të ardhshëm* të ndihet i menjëhershëm. Për përdorim kirurgëjik, ata përmirësojnë ndjeshëm Core Web Vitals.