ProHoster > Blog > administratë > Ngarkoni paraprakisht, merrni paraprakisht dhe etiketa të tjera

Ngarkoni paraprakisht, merrni paraprakisht dhe etiketa të tjera

Ka shumë mënyra për të përmirësuar performancën e uebit. Një prej tyre është ngarkimi paraprak i përmbajtjes që do të nevojitet më vonë. Përpunimi paraprak i CSS, prezantimi paraprak i faqes së plotë ose zgjidhja e emrit të domenit. Ne bëjmë gjithçka paraprakisht, dhe më pas shfaqim menjëherë rezultatin! Tingëllon bukur.

Ajo që është edhe më interesante është se zbatohet shumë thjesht. Pesë etiketa jepni shfletuesit një komandë për të kryer veprime paraprake:

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


Le të shpjegojmë shkurtimisht se çfarë bëjnë dhe kur t'i përdorin ato.

Shko te: preload · tërheq paraprakisht · paralidh · dns-prefetch · paraprakisht

preload

<link rel= "preload"> i thotë shfletuesit të ngarkojë dhe të ruajë memorien e një burimi (siç është një skrip ose fletë stili) sa më shpejt të jetë e mundur. Kjo është e dobishme kur nevojitet një burim disa sekonda pas ngarkimit të faqes - dhe ju dëshironi të shpejtoni procesin.

Shfletuesi nuk bën asgjë me burimin pas ngarkimit. Skriptet nuk ekzekutohen, fletët e stilit nuk aplikohen. Burimi thjesht ruhet në memorie dhe vihet menjëherë i disponueshëm sipas kërkesës.

sintaksë

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

href tregon burimin që dëshironi të shkarkoni.

as mund të jetë çdo gjë që mund të shkarkohet në shfletues:

  • style për fletët e stilit,
  • script për skriptet,
  • font për fontet,
  • fetch për burimet e ngarkuara duke përdorur fetch() ose XMLHttpRequest,
  • shikoni listën e plotë në MDN.

Është e rëndësishme të specifikoni atributin as – kjo e ndihmon shfletuesin të përcaktojë siç duhet prioritetet dhe të planifikojë shkarkimet.

Kur të përdoret

Përdorni ngarkimin paraprak kur burimi është i nevojshëm në të ardhmen shumë të afërt. Për shembull:

  • Fontet jo standarde nga një skedar i jashtëm: 
    <!-- index.html -->
<link rel="stylesheet" href="index.css" />
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}

    By default comic-sans.woff2 do të fillojë të ngarkohet vetëm pas shkarkimit dhe analizimit index.css. Për të shmangur pritjen kaq të gjatë, mund ta shkarkoni fontin më herët duke përdorur <link rel= "preload">:

    <link rel="preload" href="comic-sans.woff2" as="font" />
  • Nëse i ndani stilet tuaja sipas qasjes CSS kritike në dy pjesë, kritike (për paraqitje të menjëhershme) dhe jo kritike: 
    <style>
/* Inlined critical styles */
</style>

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

    Me këtë qasje, stilet jo kritike do të fillojnë të ngarkohen vetëm kur JavaScript ekzekutohet, gjë që mund të ndodhë disa sekonda pas paraqitjes. Në vend që të prisni, përdorni JS <link rel= "preload">për të filluar shkarkimin më herët:

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

<link rel="preload" href="/sq/app/non-critical.css" as="style" />

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

Mos e teproni me ngarkimin paraprak. Nëse ngarkoni gjithçka me radhë, faqja nuk do të përshpejtohet në mënyrë magjike; përkundrazi, do të parandalojë që shfletuesi të planifikojë saktë punën e tij.

Nuk duhet ngatërruar me marrjen paraprake. Mos e përdor <link rel= "preload">, nëse nuk ju nevojitet burimi menjëherë pas ngarkimit të faqes. Nëse ju nevojitet më vonë, për shembull për faqen tjetër, atëherë përdorni <link rel= "prefetch">.

Detalet

Kjo është një etiketë e nevojshme të ekzekutohet nga shfletuesi (nëse e mbështet), ndryshe nga të gjitha etiketat e tjera lidhur me ngarkimin paraprak. Shfletuesi duhet të shkarkojë burimin e specifikuar në <link rel="preload">. Në raste të tjera, mund të injorojë ngarkimin paraprak, për shembull nëse po funksionon me një lidhje të ngadaltë.

prioritetet. Shfletuesit zakonisht caktojnë prioritete të ndryshme për burime të ndryshme (stilet, skriptet, fontet, etj.) në mënyrë që të ngarkojnë burimet më të rëndësishme në fillim. Në këtë rast, shfletuesi përcakton përparësinë sipas atributit as. Për shfletuesin Chrome mund të shikoni tabela e plotë e prioriteteve.

Ngarkoni paraprakisht, merrni paraprakisht dhe etiketa të tjera

tërheq paraprakisht

<link rel= "prefetch"> i kërkon shfletuesit të shkarkojë dhe të ruajë një burim (siç është një skrip ose fletë stili) në sfond. Ngarkimi ndodh me prioritet të ulët, kështu që nuk ndërhyn me burime më të rëndësishme. Kjo është e dobishme nëse burimi është i nevojshëm në faqen tjetër dhe dëshironi ta ruani në memorie paraprakisht.

Edhe këtu, shfletuesi nuk bën asgjë me burimin pas ngarkimit. Skriptet nuk ekzekutohen, fletët e stilit nuk aplikohen. Burimi thjesht ruhet në memorie dhe vihet menjëherë i disponueshëm sipas kërkesës.

sintaksë

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

href tregon burimin që dëshironi të shkarkoni.

as mund të jetë çdo gjë që mund të shkarkohet në shfletues:

  • style për fletët e stilit,
  • script për skriptet,
  • font për fontet,
  • fetch për burimet e ngarkuara duke përdorur fetch() ose XMLHttpRequest,
  • shikoni listën e plotë në MDN.

Është e rëndësishme të specifikoni atributin as - kjo e ndihmon shfletuesin të përcaktojë saktë prioritetet dhe të planifikojë shkarkimet.

Kur të përdoret

Për të ngarkuar burime nga faqe të tjera, nëse keni nevojë për një burim nga një faqe tjetër dhe dëshironi ta ngarkoni paraprakisht për të shpejtuar paraqitjen e asaj faqeje. Për shembull:

  • Ju keni një dyqan online dhe 40% e përdoruesve largohen nga faqja kryesore për faqen e produktit. Përdorni <link rel= "prefetch">, duke ngarkuar skedarët CSS dhe JS për të dhënë faqet e produktit.
  • Ju keni një aplikacion me një faqe të vetme dhe faqe të ndryshme ngarkojnë paketa të ndryshme. Kur një përdorues viziton një faqe, paketat për të gjitha faqet me të cilat lidhet mund të ngarkohen paraprakisht.

Ka të ngjarë që kjo etiketë të mund të përdoret në mënyrë të sigurt në çdo masë.. Shfletuesit zakonisht planifikojnë marrjen paraprake me përparësinë më të ulët, kështu që nuk shqetëson askënd. Vetëm mbani në mend se ai konsumon trafikun e përdoruesve, i cili mund të kushtojë para.

Jo për kërkesa urgjente. Mos e përdor <link rel= "prefetch">, kur burimi nevojitet në pak sekonda. Në këtë rast, përdorni <link rel= "preload">.

Detalet

Etiketë opsionale. Shfletuesi nuk kërkohet të ndjekë këtë udhëzim; ai mund ta injorojë atë, për shembull, në një lidhje të ngadaltë.

Prioriteti në Chrome. Në Chrome <link rel= "prefetch"> zakonisht ekzekutohet me prioritet minimal (shih tabela e plotë e prioriteteve), domethënë pasi të keni ngarkuar gjithçka tjetër.

paralidh

<link rel= "preconnect"> i kërkon shfletuesit që të lidhet me domenin paraprakisht kur dëshironi të shpejtoni konfigurimin e lidhjes në të ardhmen.

Shfletuesi duhet të krijojë një lidhje nëse merr ndonjë burim nga një domen i ri i palës së tretë. Për shembull, nëse ngarkon fontet e Google, fontet React nga një CDN ose kërkon një përgjigje JSON nga një server API.

Krijimi i një lidhjeje të re zakonisht merr disa qindra milisekonda. Bëhet një herë, por ende kërkon kohë. Nëse keni krijuar një lidhje paraprakisht, do të kurseni kohë dhe do të shkarkoni më shpejt burimet nga ky domen.

sintaksë

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

href tregon emrin e domenit për të cilin dëshironi të përcaktoni adresën IP. Mund të specifikohet me një parashtesë (https://domain.com) ose pa të (//domain.com).

Kur të përdoret

Përdorni për domenet që do të nevojiten së shpejti për të shkarkuar një stil, skenar ose imazh të rëndësishëm nga atje, por nuk e dini ende URL-në e burimit. Për shembull:

  • Aplikacioni juaj është pritur në my-app.com dhe bën kërkesa AJAX për të api.my-app.com: Ju nuk i njihni paraprakisht pyetjet specifike sepse ato bëhen në mënyrë dinamike nga JS. Këtu është mjaft e përshtatshme të përdoret një etiketë për t'u lidhur paraprakisht me domenin.
  • Aplikacioni juaj është pritur në my-app.com dhe përdor Google Fonts. Ato shkarkohen në dy hapa: së pari, skedari CSS shkarkohet nga domeni fonts.googleapis.com, atëherë ky skedar kërkon fontet me fonts.gstatic.com. Ju nuk mund të dini se nga cilat skedarë specifikë të shkronjave janë fonts.gstatic.com do t'ju duhet derisa të ngarkoni skedarin CSS, kështu që ne mund të bëjmë vetëm një lidhje paraprake paraprakisht.

Përdoreni këtë etiketë për të shpejtuar pak skriptet ose stilet e palëve të treta për shkak të lidhjes së vendosur paraprakisht.

Mos e teproni. Krijimi dhe mirëmbajtja e një lidhjeje është një operacion i shtrenjtë si për klientin ashtu edhe për serverin. Përdoreni këtë etiketë për një maksimum prej 4-6 domenesh.

Detalet

Etiketë opsionale. Shfletuesi nuk kërkohet të ndjekë këtë udhëzim dhe mund ta injorojë atë, për shembull, nëse shumë lidhje janë krijuar tashmë ose në ndonjë rast tjetër.

Çfarë përfshin procesi i lidhjes?. Për t'u lidhur me çdo sajt, shfletuesi duhet të bëjë sa më poshtë:

  • Rezolucioni i DNS. Gjeni adresën IP të serverit (216.58.215.78) për emrin e specifikuar të domenit (google.com).
  • Shtrëngim duarsh TCP. Shkëmbeni paketat (klient → server → klient) për të nisur një lidhje TCP me serverin.
  • Shtrëngim duarsh TLS (vetëm sajtet HTTPS). Dy raunde të shkëmbimit të paketave (klient → server → klient → server → klient) për të nisur një sesion të sigurt TLS.

Shënim: HTTP/3 do të përmirësojë dhe përshpejtojë mekanizmin e shtrëngimit të duarve, por është ende shumë larg.

dns-prefetch

<link rel= "dns-prefetch"> i kërkon shfletuesit të kryejë rezolucionin DNS për domenin paraprakisht nëse do të lidheni me të së shpejti dhe dëshironi të shpejtoni lidhjen fillestare.

Shfletuesi duhet të përcaktojë adresën IP të domenit nëse do të marrë ndonjë burim nga një domen i ri i palës së tretë. Për shembull, ngarkimi i shkronjave të Google, fontet React nga një CDN ose kërkimi i një përgjigjeje JSON nga një server API.

Për çdo domen të ri, rezolucioni i regjistrimit DNS zakonisht merr rreth 20-120 ms. Kjo ndikon vetëm në ngarkimin e burimit të parë nga një domen i caktuar, por megjithatë paraqet një vonesë. Nëse kryejmë zgjidhjen e DNS paraprakisht, do të kursejmë kohë dhe do ta ngarkojmë burimin më shpejt.

sintaksë

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

href tregon emrin e domenit për të cilin dëshironi të vendosni adresën IP. Mund të specifikohet me një parashtesë (https://domain.com) ose pa të (//domain.com).

Kur të përdoret

Përdorni për domenet që do të nevojiten së shpejti për të shkarkuar burime prej andej për të cilat shfletuesi nuk i di paraprakisht. Për shembull:

  • Aplikacioni juaj është pritur në my-app.com dhe bën kërkesa AJAX për të api.my-app.com: Ju nuk i njihni paraprakisht pyetjet specifike sepse ato bëhen në mënyrë dinamike nga JS. Këtu është mjaft e përshtatshme të përdoret një etiketë për t'u lidhur paraprakisht me domenin.
  • Aplikacioni juaj është pritur në my-app.com, dhe përdor Google Fonts. Ato shkarkohen në dy hapa: së pari, skedari CSS shkarkohet nga domeni fonts.googleapis.com, atëherë ky skedar kërkon fontet me fonts.gstatic.com. Ju nuk mund të dini se nga cilat skedarë specifikë të shkronjave janë fonts.gstatic.com do t'ju duhet derisa të ngarkoni skedarin CSS, kështu që ne mund të bëjmë vetëm një lidhje paraprake paraprakisht.

Përdoreni këtë etiketë për të shpejtuar pak skriptet ose stilet e palëve të treta për shkak të lidhjes së vendosur paraprakisht.

Ju lutemi vini re karakteristika të ngjashme me <link rel= "dns-prefetch"/> и <link rel= "preconnect">. Zakonisht nuk ka kuptim t'i përdorim ato së bashku për një domen: <link rel= "preconnect"> tashmë përfshin <link rel= "dns-prefetch"/> edhe me shume. Kjo mund të justifikohet në dy raste:

  • Dëshironi të mbështesni shfletuesit më të vjetër?. <link rel= "dns-prefetch" /> mbeshtetur nga që nga IE10 dhe Safari 5. <link rel= "preconnect"> u mbështet për një kohë në Chrome dhe Firefox, por u shtua vetëm në Safari në 11.1 dhe ende nuk mbështetet në IE/Edge. Nëse keni nevojë për të mbështetur këta shfletues, përdorni <link rel= "dns-prefetch" /> si një opsion rezervë për <link rel= "preconnect">.
  • Ju dëshironi të shpejtoni lidhjet me më shumë se 4-6 domene. Etiketë <link rel= "preconnect"> Nuk rekomandohet përdorimi me më shumë se 4-6 domene, pasi vendosja dhe mirëmbajtja e një lidhjeje është një operacion i shtrenjtë. <link rel= "dns-prefetch" /> konsumon më pak burime, prandaj përdorni nëse është e nevojshme.

Detalet

Etiketë opsionale. Shfletuesi nuk kërkohet të ndjekë këtë udhëzim, kështu që mund të mos kryejë rezolucionin DNS, për shembull, nëse ka shumë etiketa të tilla në faqe ose në ndonjë rast tjetër.

Çfarë është DNS. Çdo server në internet ka një adresë IP unike, e cila duket si 216.58.215.78. Emri i faqes zakonisht futet në shiritin e adresave të shfletuesit (për shembull, google.com), dhe serverët DNS (Sistemi i emrave të domenit) e përputhen me adresën IP të serverit (216.58.215.78).

Për të përcaktuar një adresë IP, shfletuesi duhet të kërkojë serverin DNS. Duhen 20−120 ms kur lidheni me një domen të ri të palës së tretë.

DNS ruhet në memorie, megjithëse jo shumë i besueshëm. Disa OS dhe shfletues ruajnë memorien e pyetjeve DNS: kjo do të kursejë kohë në pyetjet e përsëritura, por nuk mund të mbështetet në caching. Në Linux zakonisht nuk funksionon fare. Chrome ka një cache DNS, por zgjat vetëm për një minutë. Windows ruan përgjigjet DNS për pesë ditë.

paraprakisht

<link rel= "prerender"> i kërkon shfletuesit të shkarkojë URL-në dhe ta shfaqë atë në një skedë të padukshme. Kur përdoruesi klikon në lidhje, faqja duhet të shfaqet menjëherë. Kjo është e dobishme nëse jeni i sigurt se përdoruesi do të vizitojë një faqe të caktuar dhe dëshiron të përshpejtojë shfaqjen e saj.

Pavarësisht (ose për shkak të) efektivitetit të jashtëzakonshëm të kësaj etikete, në 2019 <link rel= "prerender"> i mbështetur dobët në shfletuesit kryesorë. Shihni më shumë detaje. poshtë.

sintaksë

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

href tregon URL-në që dëshironi të filloni të jepni në sfond.

Kur të përdoret

Kur jeni vërtet i sigurt se përdoruesi do të shkojë në një faqe të caktuar. Nëse keni një "tunel" përmes të cilit 70% e vizitorëve në faqen A shkojnë në faqen B, atëherë <link rel= "prerender"> në faqen A do të ndihmojë për të shfaqur faqen B shumë shpejt.

Mos e teproni. Para-renderimi është jashtëzakonisht i shtrenjtë për sa i përket gjerësisë së brezit dhe kujtesës. Mos e përdor <link rel= "prerender"> për më shumë se një faqe.

Detalet

Etiketë opsionale. Shfletuesi nuk kërkohet të ndjekë këtë udhëzim dhe mund ta injorojë atë, për shembull, në një lidhje të ngadaltë ose kur ka memorie të pamjaftueshme të lirë.

Për të kursyer kujtesën Chrome nuk bën paraqitje të plotëDhe vetëm para-ngarkoni NoState. Kjo do të thotë që Chrome ngarkon faqen dhe të gjitha burimet e saj, por nuk jep apo ekzekuton JavaScript.

Firefox dhe Safari nuk e mbështesin fare këtë etiketë. Kjo nuk shkel specifikimin, pasi shfletuesit nuk u kërkohet të ndjekin këtë udhëzim; por ende e trishtuar. Defekti i zbatimit Firefox ka qenë i hapur për shtatë vjet. Ka raportime se Safari nuk e mbështet as këtë etiketë.

Përmbledhje

Përdorimi:

  • <link rel= "preload"> - kur keni nevojë për një burim në pak sekonda
  • <link rel= "prefetch"> - kur ju nevojitet burimi në faqen tjetër
  • <link rel= "preconnect"> - kur e dini se së shpejti do t'ju duhet një burim, por nuk e dini ende URL-në e tij të plotë
  • <link rel= "dns-prefetch"> - në mënyrë të ngjashme, kur e dini se së shpejti do t'ju duhet një burim, por nuk e dini ende URL-në e tij të plotë (për shfletuesit më të vjetër)
  • <link rel= "prerender"> — kur jeni të sigurt se përdoruesit do të shkojnë në një faqe të caktuar dhe dëshironi të shpejtoni shfaqjen e saj

Burimi: www.habr.com

Shto një koment