Svetainės greičio didinimas naudojant išteklių užuominas: Preload, Prefetch ir Preconnect

Šiuolaikiniame sparčiai besivystančiame skaitmeniniame pasaulyje svetainės greitis yra svarbiausias dalykas. Vartotojai tikisi, kad svetainės įsikraus greitai ir reaguos akimirksniu. Lėtas įkėlimo laikas gali lemti prastą vartotojo patirtį, didesnį atmetimo rodiklį ir galiausiai – prarastą verslą. Išteklių užuominos yra galingi įrankiai, kurie gali padėti kūrėjams optimizuoti svetainės įkėlimo laiką, nurodant naršyklei, kurie ištekliai yra svarbūs ir kaip juos prioritetizuoti. Šiame straipsnyje nagrinėjamos trys pagrindinės išteklių užuominos: preload, prefetch ir preconnect bei pateikiami praktiniai jų diegimo pavyzdžiai.

Išteklių užuominų supratimas

Išteklių užuominos yra direktyvos, kurios nurodo naršyklei, kokių išteklių tinklalapiui prireiks ateityje. Jos leidžia kūrėjams aktyviai informuoti naršyklę apie kritinius išteklius, suteikiant galimybę juos gauti ar prisijungti prie jų anksčiau, nei tai būtų padaryta įprastai. Tai gali ženkliai sumažinti įkėlimo laiką ir pagerinti suvokiamą našumą.

Trys pagrindinės išteklių užuominos yra:

Preload: Gauna kritinius išteklius, reikalingus pradiniam puslapio įkėlimui.
Prefetch: Gauna išteklius, kurių tikėtinai prireiks ateities naršymui ar sąveikoms.
Preconnect: Užmezga ankstyvus ryšius su svarbiais trečiųjų šalių serveriais.

Preload: Kritinių išteklių prioritetizavimas

Kas yra Preload?

Preload yra deklaratyvus gavimas, leidžiantis nurodyti naršyklei kuo anksčiau gauti išteklių, reikalingą dabartiniam naršymui. Tai ypač naudinga ištekliams, kuriuos naršyklė aptinka vėlai, pavyzdžiui, vaizdams, šriftams, scenarijams ar stilių lentelėms, įkeliamiems per CSS ar JavaScript. Iš anksto įkeldami šiuos išteklius, galite išvengti jų tapimo atvaizdavimą blokuojančiais ir pagerinti suvokiamą svetainės įkėlimo greitį.

Kada naudoti Preload

Naudokite preload šiems tikslams:

Šriftai: Ankstyvas pasirinktinių šriftų įkėlimas gali išvengti nestilizuoto teksto blyksnio (FOUT) arba nematomo teksto blyksnio (FOIT).
Vaizdai: Prioritetizuojant viršutinės ekrano dalies vaizdus užtikrinama, kad jie greitai įsikraus, pagerinant pradinę vartotojo patirtį.
Scenarijai ir stilių lentelės: Ankstyvas kritinių CSS ar JavaScript failų įkėlimas apsaugo nuo atvaizdavimo blokavimo.
Moduliai ir Web Workers: Išankstinis modulių ar „web workers“ įkėlimas gali pagerinti jūsų programos reakcijos laiką.

Kaip įdiegti Preload

Galite įdiegti preload naudodami <link> žymą savo HTML dokumento <head> dalyje:

<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">

Paaiškinimas:

rel="preload": Nurodo, kad naršyklė turėtų iš anksto įkelti išteklių.
href="/path/to/resource": Ištekliaus, kurį reikia iš anksto įkelti, URL adresas.
as="type": Nurodo iš anksto įkeliamo ištekliaus tipą (pvz., font, style, script, image). `as` atributas yra privalomas ir labai svarbus, kad naršyklė galėtų tinkamai nustatyti ištekliaus prioritetą ir jį apdoroti. Teisingos `as` reikšmės naudojimas užtikrina, kad naršyklė taikys teisingą turinio saugumo politiką (CSP) ir išsiųs teisingą Accept antraštę.
type="mime/type": (Neprivaloma, bet rekomenduojama) Nurodo ištekliaus MIME tipą. Tai padeda naršyklei pasirinkti teisingą ištekliaus formatą, ypač šriftams.
crossorigin="anonymous": (Būtina šriftams, įkeliamiems iš kito šaltinio) Nurodo užklausos CORS režimą. Jei įkeliate šriftus iš CDN, greičiausiai jums prireiks šio atributo.

Pavyzdys: Šrifto išankstinis įkėlimas

Įsivaizduokite, kad savo svetainėje naudojate pasirinktinį šriftą pavadinimu 'OpenSans'. Be išankstinio įkėlimo naršyklė šį šriftą atranda tik išanalizavusi CSS failą. Tai gali sukelti vėlavimą atvaizduojant tekstą teisingu šriftu. Iš anksto įkeldami šriftą, galite pašalinti šį vėlavimą.

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

Pavyzdys: Kritinio CSS failo išankstinis įkėlimas

Jei jūsų svetainėje yra kritinis CSS failas, būtinas pradiniam vaizdui atvaizduoti, jo išankstinis įkėlimas gali žymiai pagerinti suvokiamą našumą.

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

Geriausios Preload praktikos

Prioritetizuokite kritinius išteklius: Iš anksto įkelkite tik tuos išteklius, kurie yra būtini pradiniam puslapio įkėlimui. Pernelyg didelis preload naudojimas gali neigiamai paveikti našumą.
Naudokite teisingą as atributą: Visada nurodykite teisingą as atributą, kad užtikrintumėte, jog naršyklė teisingai apdoros išteklių.
Įtraukite type atributą: Įtraukite type atributą, kad padėtumėte naršyklei pasirinkti teisingą ištekliaus formatą.
Naudokite crossorigin šriftams iš kitų šaltinių: Įkeldami šriftus iš kito šaltinio, būtinai įtraukite crossorigin atributą.
Testuokite našumą: Visada testuokite preload poveikį našumui, kad įsitikintumėte, jog jis iš tiesų gerina įkėlimo laiką. Naudokite tokius įrankius kaip „Google PageSpeed Insights“ ar „WebPageTest“, kad išmatuotumėte poveikį.

Prefetch: Būsimų poreikių numatymas

Kas yra Prefetch?

Prefetch yra išteklių užuomina, kuri nurodo naršyklei gauti išteklius, kurių tikėtinai prireiks ateities naršymui ar sąveikoms. Skirtingai nuo preload, kuris skirtas dabartiniam puslapiui reikalingiems ištekliams, prefetch numato kitą vartotojo veiksmą. Tai ypač naudinga gerinant vėlesnių puslapių ar komponentų įkėlimo greitį.

Kada naudoti Prefetch

Naudokite prefetch šiems tikslams:

Kito puslapio ištekliai: Jei žinote, kad vartotojas greičiausiai naršys į konkretų kitą puslapį, iš anksto gaukite jo išteklius.
Vartotojo sąveikų ištekliai: Jei vartotojo sąveika sukelia specifinių išteklių įkėlimą (pvz., modalinis langas, forma), iš anksto gaukite tuos išteklius.
Vaizdai ir turinys kituose puslapiuose: Iš anksto gaukite vaizdus ar turtą, naudojamą kituose puslapiuose, kuriuos vartotojas greičiausiai aplankys.

Kaip įdiegti Prefetch

Galite įdiegti prefetch naudodami <link> žymą savo HTML dokumento <head> dalyje:

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

Paaiškinimas:

rel="prefetch": Nurodo, kad naršyklė turėtų iš anksto gauti išteklių.
href="/path/to/resource": Ištekliaus, kurį reikia iš anksto gauti, URL adresas.

Pavyzdys: Kito puslapio išteklių išankstinis gavimas

Jei jūsų svetainėje yra aiškus vartotojo srautas, pavyzdžiui, kelių žingsnių forma, galite iš anksto gauti kito žingsnio išteklius, kai vartotojas yra dabartiniame žingsnyje.

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

Pavyzdys: Modaliniam langui skirtų išteklių išankstinis gavimas

Jei jūsų svetainė naudoja modalinį langą, kuris atidarius įkelia papildomus išteklius, galite iš anksto gauti tuos išteklius, kad užtikrintumėte sklandžią vartotojo patirtį.

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

Geriausios Prefetch praktikos

Naudokite saikingai: Prefetch reikėtų naudoti saikingai, nes tai gali sunaudoti srautą ir išteklius, net jei vartotojui nereikia iš anksto gautų išteklių.
Prioritetizuokite tikėtiną naršymą: Iš anksto gaukite išteklius puslapiams ar sąveikoms, kurios greičiausiai įvyks.
Atsižvelkite į tinklo sąlygas: Prefetch geriausiai tinka vartotojams su stabiliu ir greitu interneto ryšiu. Venkite gauti didelius išteklius vartotojams su lėtu ar limituotu ryšiu. Galite naudoti „Network Information API“, kad nustatytumėte vartotojo ryšio tipą ir atitinkamai pritaikytumėte išankstinį gavimą.
Stebėkite našumą: Stebėkite prefetch poveikį jūsų svetainės našumui, kad įsitikintumėte, jog jis duoda grynąją naudą.
Naudokite dinaminį išankstinį gavimą: Įdiekite išankstinį gavimą dinamiškai, remdamiesi vartotojų elgsena ir analitikos duomenimis. Pavyzdžiui, iš anksto gaukite išteklius puslapiams, kuriuos dažnai lanko vartotojai, šiuo metu esantys dabartiniame puslapyje.

Preconnect: Ankstyvų ryšių užmezgimas

Kas yra Preconnect?

Preconnect yra išteklių užuomina, kuri leidžia užmegzti ankstyvus ryšius su svarbiais trečiųjų šalių serveriais. Ryšio užmezgimas apima kelis etapus, įskaitant DNS paiešką, TCP pasisveikinimą ir TLS derybas. Šie etapai gali pridėti didelį delsos laiką įkeliant išteklius iš tų serverių. Preconnect leidžia inicijuoti šiuos etapus fone, todėl, kai naršyklei reikia gauti išteklių iš serverio, ryšys jau būna užmegztas.

Kada naudoti Preconnect

Naudokite preconnect šiems tikslams:

Trečiųjų šalių serveriai: Serveriai, kuriuose talpinami šriftai, CDN, API ar bet kokie kiti ištekliai, kuriais remiasi jūsų svetainė.
Dažnai naudojami serveriai: Serveriai, prie kurių jūsų svetainė dažnai jungiasi.

Kaip įdiegti Preconnect

Galite įdiegti preconnect naudodami <link> žymą savo HTML dokumento <head> dalyje:

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

Paaiškinimas:

rel="preconnect": Nurodo, kad naršyklė turėtų iš anksto prisijungti prie serverio.
href="https://example.com": Serverio, prie kurio reikia iš anksto prisijungti, URL adresas.
crossorigin: (Neprivaloma, bet būtina ištekliams, įkeliamiems su CORS) Nurodo, kad ryšiui reikalingas CORS.

Pavyzdys: Išankstinis prisijungimas prie Google Fonts

Jei jūsų svetainė naudoja „Google Fonts“, išankstinis prisijungimas prie https://fonts.gstatic.com gali žymiai sumažinti šrifto įkėlimo delsą.

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

The `crossorigin` atributas čia yra labai svarbus, nes „Google Fonts“ naudoja CORS šriftams pateikti.

Pavyzdys: Išankstinis prisijungimas prie CDN

Jei jūsų svetainė naudoja CDN statiniam turtui pateikti, išankstinis prisijungimas prie CDN pagrindinio kompiuterio vardo gali sumažinti to turto įkėlimo delsą.

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

Geriausios Preconnect praktikos

Naudokite apgalvotai: Išankstinis prisijungimas prie per daug serverių gali iš tikrųjų pabloginti našumą, nes naršyklė turi ribotus išteklius ryšiams užmegzti.
Prioritetizuokite svarbius serverius: Iš anksto prisijunkite prie serverių, kurie yra svarbiausi jūsų svetainės našumui.
Apsvarstykite DNS-Prefetch: Serveriams, prie kurių nereikia visiškai iš anksto prisijungti, bet vis tiek norite anksti išspręsti DNS, apsvarstykite galimybę naudoti <link rel="dns-prefetch" href="https://example.com">. DNS-prefetch atlieka tik DNS paiešką, kuri reikalauja mažiau išteklių nei pilnas išankstinis prisijungimas.
Testuokite našumą: Visada testuokite preconnect poveikį našumui, kad įsitikintumėte, jog jis duoda grynąją naudą.
Derinkite su kitomis išteklių užuominomis: Naudokite preconnect kartu su preload ir prefetch, kad pasiektumėte optimalų našumą. Pavyzdžiui, iš anksto prisijunkite prie serverio, kuriame talpinami jūsų šriftai, o tada iš anksto įkelkite šrifto failus.

Išteklių užuominų derinimas siekiant optimalaus našumo

Tikroji išteklių užuominų galia slypi strateginiame jų derinime. Štai praktinis pavyzdys:

Įsivaizduokite svetainę, kuri naudoja pasirinktinį šriftą, talpinamą CDN, ir įkelia kritinį JavaScript failą.

Išankstinis prisijungimas prie CDN: Užmegzkite ankstyvą ryšį su CDN, kuriame talpinamas šriftas ir JavaScript failas.
```
<link rel="preconnect" href="https://cdn.example.com" crossorigin>
```

Išankstinis šrifto įkėlimas: Prioritetizuokite šrifto įkėlimą, kad išvengtumėte FOUT.

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

Išankstinis JavaScript failo įkėlimas: Prioritetizuokite JavaScript failo įkėlimą, kad užtikrintumėte, jog jis bus pasiekiamas, kai prireiks.
```
<link rel="preload" href="https://cdn.example.com/scripts/app.js" as="script">
```

Įrankiai išteklių užuominų analizei

Keletas įrankių gali padėti jums analizuoti išteklių užuominų efektyvumą:

Google PageSpeed Insights: Teikia rekomendacijas, kaip optimizuoti jūsų svetainės našumą, įskaitant išteklių užuominų naudojimą.
WebPageTest: Leidžia testuoti jūsų svetainės našumą iš skirtingų vietovių ir tinklo sąlygų.
Chrome DevTools: „Chrome DevTools“ tinklo skydelis rodo išteklių įkėlimo laiką ir gali padėti nustatyti optimizavimo galimybes.
Lighthouse: Automatizuotas įrankis, skirtas pagerinti tinklalapių kokybę. Jame yra našumo, prieinamumo, progresyviųjų žiniatinklio programų, SEO ir kitų auditų.

Dažniausios klaidos ir kaip jų išvengti

Pernelyg didelis išteklių užuominų naudojimas: Per daug išteklių užuominų naudojimas gali neigiamai paveikti našumą. Sutelkite dėmesį į svarbiausius išteklius.
Neteisingas as atributas: Naudojant neteisingą as atributą preload gali sutrikdyti teisingą ištekliaus įkėlimą.
CORS ignoravimas: Neįtraukus crossorigin atributo įkeliant išteklius iš kito šaltinio, gali kilti įkėlimo klaidų.
Netestuojamas našumas: Visada testuokite išteklių užuominų poveikį našumui, kad įsitikintumėte, jog jos duoda grynąją naudą.
Neteisingi keliai: Dukart patikrinkite ir įsitikinkite, kad visi failų keliai ir URL, nurodyti išteklių užuominoms, yra teisingi, kitaip tai sukels klaidą.

Išteklių užuominų ateitis

Išteklių užuominos nuolat tobulėja, į naršyklių specifikacijas pridedamos naujos funkcijos ir patobulinimai. Sekdami naujausius išteklių užuominų pokyčius galite dar labiau optimizuoti savo svetainės našumą. Pavyzdžiui, modulepreload yra naujesnė išteklių užuomina, specialiai sukurta JavaScript moduliams iš anksto įkelti. Taip pat, `priority` atributas išteklių užuominoms leidžia nurodyti ištekliaus prioritetą kitų išteklių atžvilgiu. Naršyklių palaikymas šioms funkcijoms vis dar tobulėja, todėl prieš jas diegdami patikrinkite suderinamumą.

Išvada

Išteklių užuominos yra galingi įrankiai, skirti optimizuoti svetainės įkėlimo laiką ir pagerinti vartotojo patirtį. Strategiškai naudodami preload, prefetch ir preconnect, galite aktyviai informuoti naršyklę apie kritinius išteklius, sumažinti delsą ir pagerinti suvokiamą jūsų svetainės našumą. Nepamirškite prioritetizuoti kritinių išteklių, apgalvotai naudoti išteklių užuominas ir visada testuoti savo pakeitimų poveikį našumui. Laikydamiesi šiame straipsnyje pateiktų geriausių praktikų, galite žymiai pagerinti savo svetainės našumą ir suteikti geresnę patirtį savo vartotojams visame pasaulyje.