Ka Shumë mënyra për të rritur performancën e faqes në internet. Një prej tyre është para-ngarkimi i përmbajtjes që do të nevojitet më vonë. Prerenderimi i CSS, para-renderimi i faqes së plotë ose zgjidhja e emrit të domainit. Ne e bëjmë gjithçka paraprakisht dhe pastaj e shfaqim menjëherë rezultatin! Dëgjohet e mrekullueshme.

Akoma më e mrekullueshme është se është shumë e thjeshtë për t'u realizuar. Pesë etiketat i japin shfletuesit urdhra për veprime paraprake:

Me një fjalë, do t'ju shpjegojmë se çfarë bëjnë dhe kur t’i përdorni ato.

Kaloni te: preload · prefetch · preconnect · dns-prefetch · prerender

preload

<link rel= "preload"> i thotë shfletuesit të ngarkojë dhe të ruajë burimin (p.sh., një skenar ose një stil). Kjo është e dobishme kur burimi do të nevojitet pas disa sekondash pas ngarkimit të faqes - dhe dëshironi ta përshpejtoni procesin.

Shfletuesi nuk bën asgjë me burimin pas ngarkimit. Skriptet nuk ekzekutohen, stilet nuk aplikohen. Burimi thjesht ruhet dhe ofrohet menjëherë me kërkesë.

Sintaksa

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

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

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

style për tabelat e stileve,
script për skriptet,
font për shkrimet,
fetch për burimet e ngarkuara me fetch() ose XMLHttpRequest,
lista e plotë shkarkohet në në MDN.

Është e rëndësishme të specifikoni atributin as kjo ndihmon shfletuesin të rendisë prioritetet dhe të planifikojë ngarkimin.

Kur të përdorni

Përdorni para-ngarkimin kur burimi do të nevojitet së shpejti. Për shembull:

Shkronjat jo-standard nga një skedar i jashtëm:
```
/* index.css */
@font-face {
  src: url('comic-sans.woff2') format('woff2');
}
```
Më në default comic-sans.woff2 do të fillojë ngarkimin vetëm pas ngarkimit dhe analizës index.css. Për të mos pritur kaq gjatë, mund ta ngarkoni shkrimin 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 Critical CSS në dy pjesë, kritike (për renderimin e menjëhershëm) dhe jo-kritike:
```
/* Stilet kritike të inline */
```
Me këtij qasje, stilet që s'janë kritike do të fillojnë të ngarkohen vetëm kur të startohet JavaScript, që mund të ndodhë disa sekonda pas renderimit. Përdorni <link rel= "preload">, për të filluar ngarkimin më herët:
```
/* Stilet kritike të inlinuara */
```

Mos e teproni me parashkarkimin. Nëse ngarkoni gjithçka, faqja nuk do të shpejtohet magjepshëm, përkundrazi, kjo do të pengojë shfletuesin të planifikojë siç duhet punën.

Mos e konfuzoni me parashkarkimin. Mos e përdorni <link rel= "preload">, nëse nuk keni nevojë për burimin menjëherë pas ngarkimit të faqes. Nëse do të nevojitet më vonë, për shembull, për faqen tjetër, atëherë përdorni <link rel= "prefetch">.

Detajet

Ky është një tag i detyrueshëm për ekzekutimin nga shfletuesi (nëse e mbështet), ndryshe nga të gjitha tag-ët e tjerë , që lidhen me para-ngarkimin. Shfletuesi është i detyruar të ngarkojë burimin e caktuar në <link rel="preload">. Në raste të tjera, ai mund ta injorojë para-ngarkimin, p.sh., nëse punon me një lidhje të ngadaltë.

Prioritetet. Burimeve të ndryshme (stilet, skriptet, fontet, etj.), shfletuesit zakonisht u caktojnë prioritete të ndryshme për të ngarkuar fillimisht burimet më të rëndësishme. Në këtë rast, shfletuesi përcakton prioritetin sipas atributit as. Për shfletuesin Chrome, mund të shihni grafikun e plotë të prioriteteve.

prefetch

<link rel= "prefetch"> kërkon nga shfletuesi të ngarkojë dhe të ruajë burimin (p.sh., skriptin ose tabelën e stileve) në sfond. Ngarkimi ndodh me prioritet të ulët, prandaj nuk pengon burimet më të rëndësishme. Kjo është e dobishme nëse burimi do të nevojitet në faqen tjetër, dhe ju dëshironi ta ruani paraprakisht.

Këtu gjithashtu shfletuesi nuk bën asgjë me burimin pas ngarkimit. Skriptet nuk ekzekutohen, tabelat e stileve nuk aplikohen. Burimi thjesht ruhet dhe vihet menjëherë në dispozicion sipas kërkesës.

Sintaksa

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

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

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

style për tabelat e stileve,
script për skriptet,
font për shkrimet,
fetch për burimet e ngarkuara me fetch() ose XMLHttpRequest,
lista e plotë shkarkohet në në MDN.

Është e rëndësishme të specifikoni atributin as — kjo ndihmon shfletuesin të vendosë siç duhet prioritetet dhe të planifikojë ngarkimin.

Kur të përdorni

Për ngarkimin e burimeve nga faqet e tjera, nëse ju nevojitet një burim nga një faqe tjetër, dhe dëshironi ta parashkarkoni atë për të përshpejtuar renderimin e asaj faqeje. Për shembull:

Keni një dyqan online, dhe 40% e përdoruesve largohen nga faqja kryesore në faqen e produkteve. Përdorni <link rel= "prefetch">, duke ngarkon skedarët CSS dhe JS për renderimin e faqeve me produktin.
Keni një aplikacion me një faqe, dhe faqe të ndryshme ngarkojnë paketa të ndryshme. Kur një përdorues viziton një faqe, mund të parakohoni ngarkimin e paketeve për të gjitha faqet në të cilat ajo i referohet.

Me siguri, ky etiketë mund të shfrytëzohet në çdo sasi.. Shfletuesit zakonisht planifikojnë parakohimin me prioritet të ulët, kështu që nuk shqetëson askënd. Veç keni parasysh se po shpenzohet trafik i përdoruesit, i cili mund të kushtojë para.

Jo për kërkesa urgjente. Mos e përdorni <link rel= "prefetch">, kur burimi duhet brenda disa sekondave. Në këtë rast përdorni <link rel= "preload">.

Detajet

Etiketë opsionale. Shfletuesi nuk është i detyruar të ndjekë këto udhëzime, ai mund ta injorojë atë, për shembull, në një lidhje të ngadalshme.

Prioritet në Chrome. Në Chrome <link rel= "prefetch"> zakonisht ekzekutohet me prioritet minimal (shih grafikun e plotë të prioriteteve), dmth. pas ngarkimit të gjithçkaje tjetër.

preconnect

<link rel= "preconnect"> i kërkon shfletuesit të lidhet paraprakisht me domenin, kur dëshironi të përshpejtoni vendosjen e lidhjes në të ardhmen.

Shfletuesi duhet të vendosë një lidhje nëse po nxjerr burime nga një domen të ri të tretë. Për shembull, nëse ngarkon fonte nga Google Fonts, React nga CDN apo kërkon një përgjigje JSON nga një server API.

Vendosja e një lidhjeje të re zakonisht gjeneron disa qindra milisekonda. Ajo bëhet një herë, por prapë merr kohë. Nëse e keni vendosur lidhjen më parë, do të kurseni kohë dhe do të ngarkoni burime më shpejt nga ky domen.

Sintaksa

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

href tregon emrin e domenit për të cilin duhet të përcaktohet adresa IP. Mund të spesifikoni me prefix (https://domain.com) ose pa të (//domain.com).

Kur të përdorni

Përdoreni për domenet që shpejt do të nevojiten për ngarkimin e një stili, skenari, ose imazhi të rëndësishëm, por ende nuk e dini URL-në e burimit. Për shembull:

Aplikacioni juaj është hostuar në my-app.com dhe bën kërkesa AJAX ndaj api.my-app.com: nuk e dini paraprakisht kërkesat specifike, sepse ato kryhen dinamikisht nga JS. Këtu është krejtësisht e arsyeshme përdorimi i etiketës për lidhje paraprake me domenin.
Aplikacioni juaj është hostuar në my-app.com dhe përdor fonte nga Google Fonts. Ato ngarkohen në dy faza: fillimisht ngarkohet skedari CSS nga domeni fonts.googleapis.com, pastaj ky skedar kërkon fonte nga fonts.gstatic.com.Nuk mund të dini se cilat skedarë specifikë të fonteve do të fonts.gstatic.com. do t'ju nevojiten, derisa të ngarkoni skedarin CSS, kështu që paraprakisht mund të vendosim vetëm një lidhje të përkohshme.

Përdorni këtë tag, për të përshpejtuar pak ndonjë skenar ose stil të jashtëm nëpërmjet vendosjes përpara të lidhjes.

Mos abuzoni. Vendosja dhe mbajtja e lidhjes është një proces i shtrenjtë si për klientin ashtu edhe për serverin. Përdorni këtë tag maksimalisht për 4-6 domenë.

Detajet

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

Çfarë përfshin procesi i lidhjes. Për t'u lidhur me çdo faqe, shfletuesi duhet të kryejë veprimet e mëposhtme:

Zgjidhja DNS. Të gjejë adresën IP të serverit (216.58.215.78) për emrin e domeneve të caktuara (google.com).
Negociimi TCP. Shkëmbimi i paketimeve (klienti → server → klient) për të filluar një lidhje TCP me serverin.
Negociimi TLS (vetëm për faqet HTTPS). Dy raunde shkëmbimi paketa (klienti → 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 negociatës, por ende është larg.

dns-prefetch

<link rel= "dns-prefetch"> i kërkon shfletuesit të kryejë paraprakisht zgjidhjen DNS për domenin, nëse keni ndërmend të lidhni me të dhe dëshironi të përshpejtoni lidhjen fillestare.

Shfletuesi duhet të përcaktojë adresën IP të domenit, nëse do të tërheqë ndonjë burim nga një domen i ri të jashtëm. Për shembull, për të ngarkuar fonte nga Google Fonts, React nga CDN ose për të kërkuar një përgjigje JSON nga serveri API.

Për çdo domen të ri, zgjidhja e regjistrit DNS zakonisht zgjat rreth 20−120 ms. Kjo ndikon vetëm në ngarkimin e burimit të parë nga ky domen, por prapë paraqet një vonesë. Nëse e kryejmë zgjidhjen DNS paraprakisht, do të kursejmë kohë dhe do ta ngarkojmë burimin më shpejt.

Sintaksa

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

href tregon emrin e domainit për të cilin duhet vendosur adresa IP. Mund të tregohet me prefiks (https://domain.com) ose pa të (//domain.com).

Kur të përdorni

Përdoreni për domenet që shpejt do të nevojiten për të ngarkuar burime nga aty që shfletuesi nuk e di paraprakisht. Për shembull:

Aplikacioni juaj është hostuar në my-app.com dhe bën kërkesa AJAX ndaj api.my-app.com: nuk e dini paraprakisht kërkesat specifike, sepse ato kryhen dinamikisht nga JS. Këtu është krejtësisht e arsyeshme përdorimi i etiketës për lidhje paraprake me domenin.
Aplikacioni juaj është hostuar në my-app.com, dhe përdor fontet e Google Fonts. Ato ngarkohen në dy etapa: së pari ngarkohet skedari CSS nga domeni fonts.googleapis.com, pastaj ky skedar kërkon fonte nga fonts.gstatic.com.Nuk mund të dini se cilat skedarë specifikë të fonteve do të fonts.gstatic.com. do t'ju nevojitet, derisa të ngarkoni skedarin CSS, kështu që paraprakisht mund të vendosim vetëm një lidhje të përkohshme.

Përdorni këtë tag, për të përshpejtuar pak ndonjë skenar ose stil të jashtëm nëpërmjet vendosjes përpara të lidhjes.

Kujdes; karakteristikat e ngjashme në <link rel= "dns-prefetch"/> dhe <link rel= "preconnect">. Përdorimi i tyre së bashku për një domen zakonisht nuk ka kuptim: <link rel= "preconnect"> më shumë përfshin <link rel= "dns-prefetch"/> dhe shumë të tjera. Kjo mund të justifikohet në dy raste:

Doni të mbështesni shfletuesit e vjetër. <link rel= "dns-prefetch" /> mbështetet duke filluar nga IE10 dhe Safari 5. <link rel= "preconnect"> ka qenë mbështetur për një kohë në Chrome dhe Firefox, por u shtua në Safari vetëm në 11.1 dhe ende nuk mbështetet në IE/Edge. Nëse duhet të mbështesni këta shfletues, përdorni <link rel= "dns-prefetch" /> si një opsion rezerve për <link rel= "preconnect">.

Doni të përshpejtoni lidhjen me më shumë se 4-6 domeine. Etiqueta <link rel= "preconnect"> nuk rekomandohet të përdoret me më shumë se 4-6 domeine, pasi vendosja dhe mbajtja e lidhjes është një operacion i kushtueshëm. <link rel= "dns-prefetch" /> konsumon më pak burime, prandaj në rast nevoje përdorini.

Detajet

Etiketë opsionale. Shfletuesi nuk është i detyruar të ndjekë këtë udhëzim, prandaj mund të mos kryejë zgjidhjen e DNS-së, për shembull, nëse ka shumë nga këto etiketa 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. Në shiritin e adresës së shfletuesit zakonisht jepet emri i faqes (p.sh., google.com), dhe serverat DNS (Sistemi i Emrave të Domainit) e lidhin atë me adresën IP të serverit (216.58.215.78).

Për të përcaktuar adresën IP, shfletuesi duhet të kryejë një kërkesë te serveri DNS. Kjo merr 20-120 ms kur lidhet me një domen të ri të jashtëm.

DNS ruhet në cache, megjithatë jo shumë besueshëm. Disa OS dhe shfletues ruajnë kërkesat DNS: kjo do të kursejë kohë për kërkesat e përsëritura, por nuk mund të mbështeteni në caching. Në Linux zakonisht nuk funksionon fare. Chrome ka një cache DNS, por ajo jeton vetëm për një minutë. Windows ruan përgjigjet DNS për pesë ditë.

prerender

<link rel= "prerender"> kërkon nga shfletuesi të ngarkojë URL-në dhe ta shfaqë në një skedë të padukshme. Kur përdoruesi klikon në lidhje, faqja duhet të shfaqet menjëherë. Kjo është e dobishme, nëse jeni të sigurt se përdoruesi do të vizitojë një faqe të caktuar dhe doni ta përshpejtoni shfaqjen e saj.

Megjithatë, për shkak të efikasitetit të jashtëzakonshëm të kësaj etikete (ose për shkak të saj), në vitin 2019 <link rel= "prerender"> nuk mbështetet mirë nga shfletuesit kryesorë. Më shumë informacion. më poshtë.

Sintaksa

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

href tregon URL-në për të cilën dëshironi të filloni renderimin ne sfond.

Kur të përdorni

Kur jeni vërtet të sigurt se përdoruesi do të kalojë në një faqe të caktuarNëse keni një "tunel", ku 70% e vizitorëve të faqes A kalojnë në faqen B, atëherë <link rel= "prerender"> në faqen A do të ndihmojë që faqja B të shfaqet shumë shpejt.

Mos abuzoni. Pararendja e faqeve është shumë e shtrenjtë në aspektin e trafikut dhe memory. Mos e përdorni <link rel= "prerender"> më shumë se për një faqe.

Detajet

Etiketë opsionale. Shfletuesi nuk është i detyruar të ndjekë këtë udhëzim dhe mund ta injorojë atë, për shembull, në një lidhje të ngadalshme ose në rast se ka mungesë memorjeje.

Për t'u kursyer në memorie, Chrome nuk bën renderim të plotë, ndërsa vetëm para-ngarkim NoState. Kjo do të thotë se Chrome ngarkon faqen dhe të gjithë burimet e saj, por nuk bën renderim dhe nuk ekzekuton JavaScript.

Firefox dhe Safari nuk e mbështesin fare këtë etiketë. Kjo nuk e shkel specifikimin, pasi shfletuesit nuk janë të detyruar të përmbushin këtë udhëzim; megjithatë, është e trishtueshme. Një gabim implementimi në Firefox është zbuluar për gjatë shtatë vjetëve. Ka raportime që Safari po ashtu nuk e mbështet këtë etiketë..

CV

Përdorni:

<link rel= "preload"> — kur keni nevojë për një burim pas disa sekondash.
<link rel= "prefetch"> — kur keni nevojë për një burim në faqen tjetër.
<link rel= "preconnect"> — kur e dini se shumë shpejt do t'ju nevojitet një burim, por ende nuk e dini URL-në e tij të plotë.
<link rel= "dns-prefetch"> — njësoj, kur e dini se shumë shpejt do t'ju nevojitet një burim, por ende nuk e dini URL-në e tij të plotë (për shfletuesit më të vjetra).
<link rel= "prerender"> — kur jeni të sigurt se përdoruesit do të kalojnë në një faqe të caktuar dhe dëshironi të rrisni shpejtësinë e shfaqjes së saj.

Burimi: habr.com