Tīmekļa vietnes ātruma palielināšana ar resursu norādēm: Preload, Prefetch un Preconnect

Mūsdienu straujajā digitālajā pasaulē tīmekļa vietnes ātrumam ir izšķiroša nozīme. Lietotāji sagaida, ka vietnes ielādēsies ātri un reaģēs nekavējoties. Lēns ielādes laiks var radīt sliktu lietotāja pieredzi, augstāku atlēcienu līmeni un galu galā zaudētu biznesu. Resursu norādes ir spēcīgi rīki, kas var palīdzēt izstrādātājiem optimizēt tīmekļa vietnes ielādes laiku, norādot pārlūkprogrammai, kuri resursi ir svarīgi un kā tos prioritizēt. Šajā rakstā tiek aplūkotas trīs galvenās resursu norādes: preload, prefetch un preconnect, un sniegti praktiski piemēri to ieviešanai.

Izpratne par resursu norādēm

Resursu norādes ir direktīvas, kas norāda pārlūkprogrammai par resursiem, kas tīmekļa lapai būs nepieciešami nākotnē. Tās ļauj izstrādātājiem proaktīvi informēt pārlūkprogrammu par kritiskiem resursiem, ļaujot tai tos ielādēt vai savienoties ar tiem agrāk, nekā tas notiktu parasti. Tas var ievērojami samazināt ielādes laiku un uzlabot uztverto veiktspēju.

Trīs galvenās resursu norādes ir:

Preload: Ielādē kritiskos resursus, kas nepieciešami sākotnējai lapas ielādei.
Prefetch: Ielādē resursus, kas, visticamāk, būs nepieciešami turpmākai navigācijai vai mijiedarbībai.
Preconnect: Izveido agrīnus savienojumus ar svarīgiem trešo pušu serveriem.

Preload: Kritisko resursu prioritizēšana

Kas ir Preload?

Preload ir deklaratīva ielāde, kas ļauj jums norādīt pārlūkprogrammai ielādēt resursu, kas nepieciešams pašreizējai navigācijai, pēc iespējas agrāk. Tas ir īpaši noderīgi resursiem, ko pārlūkprogramma atklāj novēloti, piemēram, attēliem, fontiem, skriptiem vai stilu lapām, kas ielādētas, izmantojot CSS vai JavaScript. Iepriekš ielādējot šos resursus, jūs varat novērst to kļūšanu par renderēšanu bloķējošiem un uzlabot savas tīmekļa vietnes uztverto ielādes ātrumu.

Kad izmantot Preload

Izmantojiet preload, lai:

Fonti: Iepriekšēja pielāgoto fontu ielāde var novērst nestilēta teksta uzplaiksnījumu (FOUT) vai neredzama teksta uzplaiksnījumu (FOIT).
Attēli: Virs ielādes līnijas esošo attēlu prioritizēšana nodrošina to ātru ielādi, uzlabojot sākotnējo lietotāja pieredzi.
Skripti un stilu lapas: Kritisko CSS vai JavaScript failu agrīna ielāde novērš renderēšanu bloķējošus procesus.
Moduļi un tīmekļa darbinieki: Moduļu vai tīmekļa darbinieku iepriekšēja ielāde var uzlabot jūsu lietojumprogrammas atsaucību.

Kā ieviest Preload

Jūs varat ieviest preload, izmantojot <link> tagu savā HTML dokumenta <head> sadaļā:

<link rel="preload" href="/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">
<link rel="preload" href="/styles/critical.css" as="style">
<link rel="preload" href="/scripts/app.js" as="script">
<link rel="preload" href="/images/hero.jpg" as="image">

Paskaidrojums:

rel="preload": Norāda, ka pārlūkprogrammai ir jāielādē resurss.
href="/path/to/resource": Ielādējamā resursa URL.
as="type": Norāda ielādējamā resursa tipu (piemēram, font, style, script, image). The `as` atribūts ir obligāts un izšķirošs, lai pārlūkprogramma pareizi prioritizētu un apstrādātu resursu. Pareizas `as` vērtības izmantošana nodrošina, ka pārlūkprogramma piemēro pareizu satura drošības politiku (CSP) un nosūta pareizo Accept galveni.
type="mime/type": (Neobligāts, bet ieteicams) Norāda resursa MIME tipu. Tas palīdz pārlūkprogrammai izvēlēties pareizo resursa formātu, īpaši fontiem.
crossorigin="anonymous": (Obligāts fontiem, kas ielādēti no cita avota) Norāda pieprasījuma CORS režīmu. Ja ielādējat fontus no CDN, visticamāk, jums būs nepieciešams šis atribūts.

Piemērs: Fonta iepriekšēja ielāde

Iedomājieties, ka jūsu tīmekļa vietnē tiek izmantots pielāgots fonts 'OpenSans'. Bez preload pārlūkprogramma šo fontu atklāj tikai pēc CSS faila parsēšanas. Tas var izraisīt aizkavēšanos teksta renderēšanā ar pareizo fontu. Ielādējot fontu iepriekš, jūs varat novērst šo aizkavēšanos.

<link rel="preload" href="/fonts/OpenSans-Regular.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Piemērs: Kritiska CSS faila iepriekšēja ielāde

Ja jūsu tīmekļa vietnei ir kritisks CSS fails, kas ir būtisks sākotnējā skata renderēšanai, tā iepriekšēja ielāde var ievērojami uzlabot uztverto veiktspēju.

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

Labākā prakse Preload izmantošanā

Prioritizējiet kritiskos resursus: Iepriekš ielādējiet tikai tos resursus, kas ir būtiski sākotnējai lapas ielādei. Pārmērīga preload izmantošana var negatīvi ietekmēt veiktspēju.
Izmantojiet pareizo as atribūtu: Vienmēr norādiet pareizo as atribūtu, lai nodrošinātu, ka pārlūkprogramma pareizi apstrādā resursu.
Iekļaujiet type atribūtu: Iekļaujiet type atribūtu, lai palīdzētu pārlūkprogrammai izvēlēties pareizo resursa formātu.
Izmantojiet crossorigin starpdomēnu fontiem: Ielādējot fontus no cita avota, pārliecinieties, ka esat iekļāvis crossorigin atribūtu.
Testējiet veiktspēju: Vienmēr testējiet preload ietekmi uz veiktspēju, lai nodrošinātu, ka tas patiešām uzlabo ielādes laiku. Izmantojiet tādus rīkus kā Google PageSpeed Insights vai WebPageTest, lai novērtētu ietekmi.

Prefetch: Nākamo vajadzību paredzēšana

Kas ir Prefetch?

Prefetch ir resursu norāde, kas liek pārlūkprogrammai ielādēt resursus, kas, visticamāk, būs nepieciešami turpmākai navigācijai vai mijiedarbībai. Atšķirībā no preload, kas koncentrējas uz resursiem, kas nepieciešami pašreizējai lapai, prefetch paredz lietotāja nākamo kustību. Tas ir īpaši noderīgi, lai uzlabotu sekojošo lapu vai komponentu ielādes ātrumu.

Kad izmantot Prefetch

Izmantojiet prefetch, lai:

Nākamās lapas resursi: Ja zināt, ka lietotājs, visticamāk, pāries uz konkrētu lapu, iepriekš ielādējiet tās resursus.
Resursi lietotāju mijiedarbībai: Ja lietotāja mijiedarbība izraisa specifisku resursu ielādi (piemēram, modāla loga, veidlapas), iepriekš ielādējiet šos resursus.
Attēli un aktīvi citās lapās: Ielādējiet attēlus vai aktīvus, kas tiek izmantoti citās lapās, kuras lietotājs, visticamāk, apmeklēs.

Kā ieviest Prefetch

Jūs varat ieviest prefetch, izmantojot <link> tagu savā HTML dokumenta <head> sadaļā:

<link rel="prefetch" href="/page2.html">
<link rel="prefetch" href="/images/product.jpg">
<link rel="prefetch" href="/scripts/modal.js">

Paskaidrojums:

rel="prefetch": Norāda, ka pārlūkprogrammai ir jāielādē resurss.
href="/path/to/resource": Ielādējamā resursa URL.

Piemērs: Nākamās lapas resursu iepriekšēja ielāde

Ja jūsu tīmekļa vietnei ir skaidra lietotāju plūsma, piemēram, daudzpakāpju veidlapa, varat iepriekš ielādēt resursus nākamajam solim, kamēr lietotājs atrodas pašreizējā solī.

<link rel="prefetch" href="/form/step2.html">

Piemērs: Resursu iepriekšēja ielāde modālajam logam

Ja jūsu tīmekļa vietne izmanto modālo logu, kas atverot ielādē papildu resursus, varat iepriekš ielādēt šos resursus, lai nodrošinātu vienmērīgu lietotāja pieredzi.

<link rel="prefetch" href="/scripts/modal.js">
<link rel="prefetch" href="/styles/modal.css">

Labākā prakse Prefetch izmantošanā

Izmantojiet taupīgi: Prefetch jāizmanto taupīgi, jo tas var patērēt joslas platumu un resursus pat tad, ja lietotājam iepriekš ielādētie resursi nav nepieciešami.
Prioritizējiet visticamākās navigācijas: Ielādējiet resursus lapām vai mijiedarbībām, kas, visticamāk, notiks.
Apsveriet tīkla apstākļus: Prefetch vislabāk piemērots lietotājiem ar stabilu un ātrām interneta savienojumu. Izvairieties no liela apjoma resursu iepriekšējas ielādes lietotājiem ar lēniem vai maksas savienojumiem. Jūs varat izmantot Network Information API, lai noteiktu lietotāja savienojuma veidu un attiecīgi pielāgotu iepriekšēju ielādi.
Uzraugiet veiktspēju: Uzraugiet prefetch ietekmi uz jūsu tīmekļa vietnes veiktspēju, lai pārliecinātos, ka tas sniedz labumu.
Izmantojiet dinamisku iepriekšēju ielādi: Ieviesiet iepriekšēju ielādi dinamiski, pamatojoties uz lietotāju uzvedību un analītisko datu. Piemēram, iepriekš ielādējiet resursus lapām, kuras bieži apmeklē lietotāji, kas pašlaik atrodas pašreizējā lapā.

Preconnect: Agrīnu savienojumu izveide

Kas ir Preconnect?

Preconnect ir resursu norāde, kas ļauj izveidot agrīnus savienojumus ar svarīgiem trešo pušu serveriem. Savienojuma izveide ietver vairākus posmus, tostarp DNS uzmeklēšanu, TCP rokasspiedienu un TLS sarunas. Šie posmi var ievērojami palielināt resursu ielādes latentumu no šiem serveriem. Preconnect ļauj uzsākt šos posmus fonā, lai brīdī, kad pārlūkprogrammai ir jāielādē resurss no servera, savienojums jau būtu izveidots.

Kad izmantot Preconnect

Izmantojiet preconnect, lai:

Trešo pušu serveri: Serveri, kas mitina fontus, CDN, API vai citus resursus, uz kuriem jūsu tīmekļa vietne paļaujas.
Bieži izmantotie serveri: Serveri, kuriem jūsu tīmekļa vietne bieži piekļūst.

Kā ieviest Preconnect

Jūs varat ieviest preconnect, izmantojot <link> tagu savā HTML dokumenta <head> sadaļā:

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="preconnect" href="https://cdn.example.com">

Paskaidrojums:

rel="preconnect": Norāda, ka pārlūkprogrammai ir jāizveido iepriekšējs savienojums ar serveri.
href="https://example.com": Servera URL, ar kuru jāizveido iepriekšējs savienojums.
crossorigin: (Neobligāts, bet nepieciešams resursiem, kas ielādēti ar CORS) Norāda, ka savienojumam nepieciešams CORS.

Piemērs: Iepriekšējs savienojums ar Google Fonts

Ja jūsu tīmekļa vietne izmanto Google Fonts, iepriekšējs savienojums ar https://fonts.gstatic.com var ievērojami samazināt fontu ielādes latentumu.

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

The `crossorigin` atribūts šeit ir izšķirošs, jo Google Fonts izmanto CORS, lai nodrošinātu fontus.

Piemērs: Iepriekšējs savienojums ar CDN

Ja jūsu tīmekļa vietne izmanto CDN, lai apkalpotu statiskos aktīvus, iepriekšējs savienojums ar CDN resursdatoru var samazināt šo aktīvu ielādes latentumu.

<link rel="preconnect" href="https://cdn.example.com">

Labākā prakse Preconnect izmantošanā

Izmantojiet apdomīgi: Savienojuma izveide ar pārāk daudziem serveriem faktiski var pasliktināt veiktspēju, jo pārlūkprogrammai ir ierobežoti resursi savienojumu izveidei.
Prioritizējiet svarīgos serverus: Izveidojiet iepriekšēju savienojumu ar serveriem, kas ir vissvarīgākie jūsu tīmekļa vietnes veiktspējai.
Apsveriet DNS-Prefetch: Serveriem, ar kuriem nav nepieciešams pilnībā izveidot iepriekšēju savienojumu, bet joprojām vēlaties agrīni atrisināt DNS, apsveriet iespēju izmantot <link rel="dns-prefetch" href="https://example.com">. DNS-prefetch veic tikai DNS uzmeklēšanu, kas ir mazāk resursietilpīga nekā pilns preconnect.
Testējiet veiktspēju: Vienmēr testējiet preconnect ietekmi uz veiktspēju, lai nodrošinātu, ka tas sniedz tīru labumu.
Apvienojiet ar citām resursu norādēm: Izmantojiet preconnect kopā ar preload un prefetch, lai sasniegtu optimālu veiktspēju. Piemēram, izveidojiet iepriekšēju savienojumu ar serveri, kurā mitinās jūsu fonti, un pēc tam iepriekš ielādējiet fontu failus.

Resursu norāžu apvienošana optimālai veiktspējai

Patiesais resursu norāžu spēks slēpjas to stratēģiskā apvienošanā. Šeit ir praktisks piemērs:

Iedomājieties tīmekļa vietni, kas izmanto pielāgotu fontu, kas mitināts CDN, un ielādē kritisku JavaScript failu.

Izveidojiet iepriekšēju savienojumu ar CDN: Izveidojiet agrīnu savienojumu ar CDN, kas mitina fontu un JavaScript failu.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Ielādējiet fontu: Prioritizējiet fontu ielādi, lai novērstu FOUT.

<link rel="preload" href="https://cdn.example.com/fonts/myfont.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Ielādējiet JavaScript failu: Prioritizējiet JavaScript faila ielādi, lai nodrošinātu tā pieejamību, kad tas nepieciešams.
```
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
```

Rīki resursu norāžu analīzei

Vairāki rīki var palīdzēt analizēt jūsu resursu norāžu efektivitāti:

Google PageSpeed Insights: Sniedz ieteikumus jūsu tīmekļa vietnes veiktspējas optimizēšanai, tostarp resursu norāžu izmantošanai.
WebPageTest: Ļauj jums testēt jūsu tīmekļa vietnes veiktspēju no dažādām atrašanās vietām un tīkla apstākļiem.
Chrome DevTools: Chrome DevTools tīkla panelis parāda resursu ielādes laiku un var palīdzēt identificēt optimizācijas iespējas.
Lighthouse: Automatizēts rīks tīmekļa lapu kvalitātes uzlabošanai. Tam ir auditi veiktspējai, pieejamībai, progresīvām tīmekļa lietotnēm, SEO un citiem.

Biežākās kļūdas un kā tās novērst

Pārmērīga resursu norāžu izmantošana: Pārāk daudz resursu norāžu izmantošana var negatīvi ietekmēt veiktspēju. Koncentrējieties uz vissvarīgākajiem resursiem.
Nepareizs as atribūts: Nepareiza as atribūta izmantošana preload var novērst resursa pareizu ielādi.
CORS ignorēšana: Ja netiek iekļauts crossorigin atribūts, ielādējot resursus no cita avota, var rasties ielādes kļūdas.
Veiktspējas netestēšana: Vienmēr testējiet resursu norāžu ietekmi uz veiktspēju, lai pārliecinātos, ka tās sniedz tīru labumu.
Nepareizi ceļi: Pārbaudiet un pārliecinieties, ka visi resursu norādēm norādītie failu ceļi un URL ir pareizi, pretējā gadījumā radīsies kļūda.

Resursu norāžu nākotne

Resursu norādes nepārtraukti attīstās, un pārlūkprogrammu specifikācijām tiek pievienotas jaunas funkcijas un uzlabojumi. Aktuālo attīstību resursu norādēs sekošana var palīdzēt jums vēl vairāk optimizēt savas tīmekļa vietnes veiktspēju. Piemēram, modulepreload ir jaunāka resursu norāde, kas īpaši paredzēta JavaScript moduļu iepriekšējai ielādei. Arī `priority` atribūts resursu norādēm ļauj norādīt resursa prioritāti attiecībā pret citiem resursiem. Pārlūkprogrammu atbalsts šīm funkcijām joprojām attīstās, tāpēc pirms to ieviešanas pārbaudiet savietojamību.

Secinājums

Resursu norādes ir spēcīgi rīki tīmekļa vietnes ielādes laika optimizēšanai un lietotāja pieredzes uzlabošanai. Stratēģiski izmantojot preload, prefetch un preconnect, jūs varat proaktīvi informēt pārlūkprogrammu par kritiskiem resursiem, samazināt latentumu un uzlabot savas tīmekļa vietnes uztverto veiktspēju. Atcerieties prioritizēt kritiskos resursus, apdomīgi izmantot resursu norādes un vienmēr testēt izmaiņu ietekmi uz veiktspēju. Ievērojot šajā rakstā izklāstītās labākās prakses, jūs varat ievērojami uzlabot savas tīmekļa vietnes veiktspēju un nodrošināt labāku pieredzi saviem lietotājiem visā pasaulē.