Išsamus vadovas, kaip suprasti ir optimizuoti kritinio atvaizdavimo kelią greitesniam svetainės įkėlimui ir geresnei naudotojų patirčiai. Mokykitės praktinių techníkų, kaip pasauliniu mastu pagerinti "front-end" našumą.
JavaScript našumo optimizavimas: kritinio atvaizdavimo kelio įvaldymas
Šiuolaikiniame žiniatinklyje našumas yra svarbiausias. Lėtai įkeliama svetainė gali sukelti nusivylusių naudotojų pasikartojimą, didesnį pasitraukimo rodiklį ir galiausiai – prarastus pajamų šaltinius. Jūsų „JavaScript“ optimizavimas ir supratimas, kaip naršyklės atvaizduoja žiniatinklio puslapius, yra gyvybiškai svarbūs, siekiant užtikrinti greitą ir patrauklią naudotojų patirtį. Viena svarbiausių šios srities sąvokų yra Kritinis Atvaizdavimo Kelias (KAK).
Kas yra kritinis atvaizdavimo kelias?
Kritinis Atvaizdavimo Kelias yra žingsnių seka, kurią naršyklė atlieka, kad paverstų HTML, CSS ir „JavaScript“ kodą į ekrane rodomą žiniatinklio puslapį. Tai yra priklausomybių grandinė; kiekvienas žingsnis remiasi ankstesniojo rezultatais. Suprasti ir optimizuoti šį kelią yra labai svarbu norint sutrumpinti laiką, kurį naudotojas praleidžia matydamas ir sąveikaudamas su jūsų svetaine. Pagalvokite apie tai kaip apie kruopščiai suplanuotą baletą, kuriame kiekvienas judesys (kiekvienas atvaizdavimo žingsnis) turi būti tobulai suderintas ir atliktas, kad galutinis pasirodymas būtų nepriekaištingas. Vienos fazės vėlavimas paveikia visas vėlesnes fazes.
KAK sudaro šie pagrindiniai žingsniai:
- DOM statyba: HTML analizavimas ir Dokumento Objekto Modelio (DOM) sudarymas.
- CSSOM statyba: CSS analizavimas ir CSS Objekto Modelio (CSSOM) sudarymas.
- Atvaizdavimo medžio sudarymas: DOM ir CSSOM sujungimas, siekiant sukurti Atvaizdavimo medį.
- Išdėstymas: Kiekvieno Atvaizdavimo medžio elemento pozicijos ir dydžio skaičiavimas.
- Dažymas: Atvaizdavimo medžio pavertimas tikrais pikseliais ekrane.
Panagrinėkime kiekvieną iš šių žingsnių išsamiau.
1. DOM statyba
Kai naršyklė gauna HTML dokumentą, ji pradeda analizuoti kodą eilutė po eilutės. Analizuodama ji sudaro medžio struktūrą, vadinamą Dokumento Objekto Modelio (DOM). DOM atspindi HTML dokumento struktūrą, kur kiekvienas HTML elementas tampa medžio mazgu. Apsvarstykite šį paprastą HTML:
<!DOCTYPE html>
<html>
<head>
<title>Mano svetainė</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Labas, pasauli!</h1>
<p>Tai mano pirmoji svetainė.</p>
</body>
</html>
Naršyklė šį kodą analizuos į DOM medį, kur kiekvienas žymė (<html>, <head>, <body> ir t.t.) taps mazgu.
Kritinis blokuojantis išteklius: Kai analizatorius susiduria su <script> žyme, jis paprastai blokuoja DOM statybą, kol scenarijus bus atsisiųstas, analizuotas ir įvykdytas. Taip yra todėl, kad „JavaScript“ gali modifikuoti DOM, todėl naršyklė turi įsitikinti, kad scenarijus baigtas vykdyti prieš tęsiant DOM statybą. Panašiai <link> žymės, kurios įkelia CSS, yra laikomos atvaizdavimą blokuojančiomis, kaip aprašyta toliau.
2. CSSOM statyba
Lygiai taip pat, kaip naršyklė analizuoja HTML, kad sukurtų DOM, ji analizuoja CSS, kad sukurtų CSS Objekto Modelį (CSSOM). CSSOM atspindi HTML elementams taikomus stilius. Kaip ir DOM, CSSOM taip pat yra medžio struktūra. CSSOM yra gyvybiškai svarbus, nes jis nustato, kaip DOM elementai yra stilizuojami ir rodomi. Apsvarstykite šį CSS:
h1 {
color: blue;
font-size: 2em;
}
p {
color: gray;
}
Naršyklė analizuoja šį CSS ir sukuria CSSOM, kuris susieja CSS taisykles su atitinkamais HTML elementais. CSSOM statyba tiesiogiai veikia puslapio atvaizdavimą; netinkamas ar neefektyvus CSS gali sukelti atvaizdavimo vėlavimų ir prastą naudotojų patirtį. Pavyzdžiui, CSS parinkikliai turėtų būti kuo tikslesni ir efektyvesni, kad sumažintų naršyklės darbą.
Kritinis blokuojantis išteklius: CSSOM yra atvaizdavimą blokuojantis išteklius. Naršyklė negali pradėti atvaizduoti puslapio, kol nebus sudarytas CSSOM. Taip yra todėl, kad CSS apibrėžti stiliai paveikia tai, kaip rodomi HTML elementai. Todėl naršyklė turi laukti, kol CSSOM bus baigtas, prieš tęsiant atvaizdavimą. Stiliai dokumento <head> dalyje (naudojant <link rel="stylesheet">) paprastai blokuoja atvaizdavimą.
3. Atvaizdavimo medžio sudarymas
Kai DOM ir CSSOM yra sudaryti, naršyklė juos sujungia, kad sukurtų Atvaizdavimo medį. Atvaizdavimo medis yra vizualus DOM atvaizdavimas, apimantis tik tuos elementus, kurie bus iš tikrųjų rodomi ekrane. Elementai, kurie yra paslėpti (pvz., naudojant display: none;), neįtraukiami į Atvaizdavimo medį. Atvaizdavimo medis atspindi tai, ką naudotojas iš tikrųjų matys ekrane; tai yra DOM versija, apkarpyta, kad apimtų tik matomus ir stilizuotus elementus.
Atvaizdavimo medis atspindi galutinę vizualią puslapio struktūrą, sujungiant turinį (DOM) ir stilių (CSSOM). Šis žingsnis yra gyvybiškai svarbus, nes jis paruošia dirvą faktiniam atvaizdavimo procesui.
4. Išdėstymas
Išdėstymo fazė apima tikslios kiekvieno Atvaizdavimo medžio elemento pozicijos ir dydžio skaičiavimą. Šis procesas taip pat žinomas kaip "perskaičiavimas" (reflow). Naršyklė nustato, kur kiekvienas elementas turėtų būti ekrane ir kiek vietos jis turėtų užimti. Išdėstymo fazę labai paveikia elementams taikomi CSS stiliai. Veiksniai, tokie kaip paraštės (margins), užpildas (padding), plotis, aukštis ir pozicionavimas, visi vaidina vaidmenį išdėstymo skaičiuose. Ši fazė yra intensyvi skaičiavimo prasme, ypač sudėtingiems išdėstymams.
Išdėstymas yra kritinis KAK žingsnis, nes jis nustato elementų erdvinį išdėstymą puslapyje. Efektyvus išdėstymo procesas yra būtinas sklandžiai ir reaguojančiai naudotojų patirčiai. DOM ar CSSOM pakeitimai gali sukelti pakartotinį išdėstymą, kuris gali būti brangus našumo požiūriu.
5. Dažymas
Paskutinis žingsnis yra Dažymo fazė, kurios metu naršyklė paverčia Atvaizdavimo medį tikrais pikseliais ekrane. Tai apima elementų rasterizavimą ir nurodytų stilių, spalvų bei tekstūrų taikymą. Dažymo procesas galiausiai daro žiniatinklio puslapį matomu naudotojui. Dažymas yra dar vienas intensyvus skaičiavimo procesas, ypač sudėtingoms grafikoms ir animacijoms.
Po dažymo fazės naudotojas mato atvaizduotą žiniatinklio puslapį. Bet kokie vėlesni DOM ar CSSOM pakeitimai gali sukelti pakartotinį dažymą (repaint), kuris atnaujina vizualinį atvaizdavimą ekrane. Nereikalingų pakartotinių dažymų minimizavimas yra gyvybiškai svarbus, siekiant išlaikyti sklandžią ir reaguojančią naudotojo sąsają.
Kritinio atvaizdavimo kelio optimizavimas
Dabar, kai supratome Kritinį Atvaizdavimo Kelią, aptarkime keletą jį optimizuojančių techníkų.
1. Minimalizuokite kritinių išteklių skaičių
Kuo mažiau kritinių išteklių (CSS ir „JavaScript“ failų) naršyklė turi atsisiųsti ir analizuoti, tuo greičiau puslapis bus atvaizduotas. Štai kaip minimalizuoti kritinius išteklius:
- Atidėkite ne kritinį „JavaScript“: Naudokite
deferarbaasyncatributus<script>žymėse, kad jos neužblokuotų DOM statybos. - Įterpkite kritinį CSS: Nustatykite CSS taisykles, kurios yra būtinos atvaizduojant turinį virš lankymosi linijos (above-the-fold) ir įterpkite jas tiesiai į HTML dokumento
<head>dalį. Tai pašalina poreikį naršyklei atsisiųsti išorinį CSS failą pradiniam atvaizdavimui. - Minimizuokite CSS ir „JavaScript“: Sumažinkite savo CSS ir „JavaScript“ failų dydį pašalindami nereikalingus simbolius (tarpus, komentarus ir tt.).
- Sujunkite CSS ir „JavaScript“ failus: Sumažinkite HTTP užklausų skaičių, sujungdami kelis CSS ir „JavaScript“ failus į vieną. Tačiau su HTTP/2 susiejimo (bundling) nauda yra mažesnė dėl pagerintų multipleksavimo galimybių.
- Pašalinkite nenaudojamą CSS: Yra įrankių, kurie gali analizuoti jūsų CSS ir nustatyti nenaudojamas taisykles. Pašalinus šias taisykles sumažėja CSSOM dydis.
Pavyzdys (atidedant „JavaScript“):
<script src="script.js" defer></script>
defer atributas nurodo naršyklei atsisiųsti scenarijų, neužblokuojant DOM statybos. Scenarijus bus įvykdytas po to, kai DOM bus visiškai analizuotas.
Pavyzdys (įterpiant kritinį CSS):
<head>
<style>
/* Kritinis CSS turiniui virš lankymosi linijos */
body { font-family: sans-serif; }
h1 { color: black; }
</style>
<link rel="stylesheet" href="style.css">
</head>
Šiame pavyzdyje body ir h1 elementų CSS taisyklės yra įterptos į <head>. Tai užtikrina, kad naršyklė gali greitai atvaizduoti turinį virš lankymosi linijos, net ir prieš tai, kai bus atsisiųsta išorinė stiliaus lentelė (style.css).
2. Optimizuokite CSS pristatymą
Būdas, kuriuo pristatote savo CSS, gali reikšmingai paveikti KAK. Apsvarstykite šias optimizavimo techníkas:
- Media užklausos: Naudokite media užklausas, kad CSS taikytumėte tik konkretiems įrenginiams ar ekrano dydžiams. Tai neleidžia naršyklei atsisiųsti nereikalingo CSS.
- Spausdinimo stiliai: Atskirkite spausdinimo stilius į atskirą stiliaus lentelę ir naudokite media užklausą, kad ją taikytumėte tik spausdinant. Tai neleidžia spausdinimo stiliams blokuoti ekrano atvaizdavimo.
- Sąlyginis įkėlimas: Įkelkite CSS failus sąlygiškai, remdamiesi naršyklės funkcijomis ar naudotojo nuostatomis. Tai galima pasiekti naudojant „JavaScript“ arba serverio logiką.
Pavyzdys (Media užklausos):
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
Šiame pavyzdyje style.css taikoma tik ekranams, o print.css taikoma tik spausdinant.
3. Optimizuokite „JavaScript“ vykdymą
„JavaScript“ gali turėti reikšmingą poveikį KAK, ypač jei jis modifikuoja DOM ar CSSOM. Štai kaip optimizuoti „JavaScript“ vykdymą:
- Atidėkite arba asinkronizuokite „JavaScript“: Kaip minėta anksčiau, naudokite
deferarbaasyncatributus, kad „JavaScript“ neužblokuotų DOM statybos. - Optimizuokite „JavaScript“ kodą: Rašykite efektyvų „JavaScript“ kodą, kuris minimalizuoja DOM manipuliacijas ir skaičiavimus.
- Lėtas „JavaScript“ įkėlimas: Įkelkite „JavaScript“ tik tada, kai jis reikalingas. Pavyzdžiui, galite lėtai įkelti „JavaScript“ elementams, esantiems žemiau lankymosi linijos.
- Web Workers: Perkėlkite skaičiavimų intensyvias „JavaScript“ užduotis į Web Workers, kad jos neužblokuotų pagrindinio gijų.
Pavyzdys (Asinkroninis „JavaScript“):
<script src="analytics.js" async></script>
async atributas nurodo naršyklei atsisiųsti scenarijų asinkroniniu būdu ir vykdyti jį, kai tik jis bus pasiekiamas, neužblokuojant DOM statybos. Skirtingai nei defer, su async įkeliami scenarijai gali vykdytis kitu tvarkos, nei jie nurodyti HTML.
4. Optimizuokite DOM
Didelis ir sudėtingas DOM gali sulėtinti atvaizdavimo procesą. Štai kaip optimizuoti DOM:
- Sumažinkite DOM dydį: Laikykite DOM kuo mažesnį, pašalindami nereikalingus elementus ir atributus.
- Venkite gilių DOM medžių: Venkite kurti giliai įdėtas DOM struktūras, nes naršyklei gali būti sunkiau naršyti DOM.
- Naudokite semantinį HTML: Naudokite semantinius HTML elementus (pvz.,
<article>,<nav>,<aside>), kad suteiktumėte struktūrą ir reikšmę jūsų HTML dokumentui. Tai gali padėti naršyklei efektyviau atvaizduoti puslapį.
5. Sumažinkite išdėstymo „trikdžius“ (layout thrashing)
Išdėstymo trikdžiai atsiranda, kai „JavaScript“ nuolat skaito ir rašo į DOM, priverčiant naršyklę atlikti kelis išdėstymus ir dažymus. Tai gali žymiai pabloginti našumą. Norint išvengti išdėstymo trikdžių:
- Grupuokite DOM pakeitimus: Grupuokite DOM pakeitimus kartu ir taikykite juos vienoje grupėje. Tai minimalizuoja išdėstymų ir dažymų skaičių.
- Venkite skaityti išdėstymo ypatybes prieš rašydami: Venkite skaityti išdėstymo ypatybes (pvz.,
offsetWidth,offsetHeight) prieš rašydami į DOM, nes tai gali priversti naršyklę atlikti išdėstymą. - Naudokite CSS transformacijas ir animacijas: Naudokite CSS transformacijas ir animacijas vietoj „JavaScript“ pagrindu sukurtų animacijų, nes jos paprastai yra našesnės. Transformacijos ir animacijos dažnai naudoja GPU, kuris yra optimizuotas tokioms operacijoms.
6. Pasinaudokite naršyklės talpyklos (caching) teikiamais privalumais
Naršyklės talpykla leidžia naršyklei vietiniame kompiuteryje saugoti išteklius (pvz., CSS, „JavaScript“, vaizdus), kad jiems nereikėtų būti atsisiunčiamiems vėl per vėlesnius apsilankymus. Konfigūruokite savo serverį, kad jis nustatytų tinkamus talpyklos antraštes jūsų ištekliams.
Pavyzdys (talpyklos antraštės):
Cache-Control: public, max-age=31536000
Ši talpyklos antraštė nurodo naršyklei talpykloje saugoti išteklių vienerius metus (31536000 sekundžių). Naudojant turinio pristatymo tinklą (CDN) taip pat gali žymiai pagerinti talpyklos našumą, nes jis paskirsto jūsų turinį keliuose serveriuose visame pasaulyje, leidžiant naudotojams atsisiųsti išteklius iš serverio, kuris yra geografiškai arčiau jų.
Įrankiai kritiniam atvaizdavimo keliui analizuoti
Keletas įrankių gali padėti jums analizuoti Kritinį Atvaizdavimo Kelią ir nustatyti našumo kliūtis:
- Chrome DevTools: Chrome DevTools suteikia daug informacijos apie atvaizdavimo procesą, įskaitant kiekvieno KAK žingsnio laikus. Naudokite „Performance“ skydelį, kad įrašytumėte puslapio įkėlimo laiko juostą ir nustatytumėte optimizavimo sritis. „Coverage“ skirtukas padeda nustatyti nenaudojamą CSS ir „JavaScript“.
- WebPageTest: WebPageTest yra populiarus internetinis įrankis, kuris pateikia išsamias našumo ataskaitas, įskaitant vandens kritimo diagramą (waterfall chart), kuri vizualizuoja išteklių įkėlimą.
- Lighthouse: Lighthouse yra atviro kodo, automatizuotas įrankis, skirtas pagerinti žiniatinklio puslapių kokybę. Jis turi auditas našumui, prieinamumui, progresyvioms žiniatinklio programoms, SEO ir kt. Jį galite paleisti „Chrome DevTools“, iš komandinės eilutės arba kaip „Node“ modulį.
Pavyzdys (naudojant Chrome DevTools):
- Atidarykite Chrome DevTools (dešiniuoju pelės klavišu spustelėkite puslapyje ir pasirinkite „Inspect“).
- Eikite į „Performance“ skydelį.
- Spustelėkite įrašymo mygtuką (apskrito piktogramą) ir perkraukite puslapį.
- Sustabdykite įrašymą po to, kai puslapis baigė įsikelti.
- Analizuokite laiko juostą, kad nustatytumėte našumo kliūtis. Atidžiai atkreipkite dėmesį į „Loading“, „Scripting“, „Rendering“ ir „Painting“ skyrius.
Realaus pasaulio pavyzdžiai ir atvejų tyrimai
Pažiūrėkime keletą realaus pasaulio pavyzdžių, kaip optimizuojant Kritinį Atvaizdavimo Kelią galima pagerinti svetainės našumą:
- 1 pavyzdys: El. prekybos svetainė: El. prekybos svetainė optimizavo savo KAK, įterpdama kritinį CSS, atidėdama ne kritinį „JavaScript“ ir optimizuodama vaizdus. Tai leido 40% sumažinti puslapio įkėlimo laiką ir 20% padidinti konversijos rodiklius.
- 2 pavyzdys: Naujienų svetainė: Naujienų svetainė pagerino savo KAK, sumažindama DOM dydį, optimizuodama CSS parinkiklius ir pasinaudodama naršyklės talpykla. Tai leido 30% sumažinti pasitraukimo rodiklį ir 15% padidinti reklamos pajamas.
- 3 pavyzdys: Pasaulinė kelionių platforma: Pasaulinė kelionių platforma, aptarnaujanti naudotojus visame pasaulyje, pastebėjo žymius patobulinimus, įdiegdama CDN ir optimizuodama vaizdus skirtingiems įrenginiams ir tinklo sąlygoms. Jie taip pat naudojo paslaugų darbuotojus (service workers) dažnai pasiekiamiems duomenims talpykloje saugoti, leidžiantį pasiekti turinį neprisijungus ir greitesnius vėlesnius įkėlimus. Tai lėmė nuoseklesnę naudotojų patirtį skirtinguose regionuose ir interneto greičiuose.
Pasauliniai svarstymai
Optimizuojant KAK, svarbu atsižvelgti į pasaulinį kontekstą. Naudotojai skirtingose pasaulio dalyse gali turėti skirtingus interneto greičius, įrenginių galimybes ir tinklo sąlygas. Štai keletas pasaulinių svarstymų:
- Tinklo vėlavimas (latency): Tinklo vėlavimas gali žymiai paveikti puslapio įkėlimo laiką, ypač naudotojams atokiose vietovėse ar su lėtu interneto ryšiu. Naudokite CDN, kad paskirstytumėte savo turinį arčiau naudotojų ir sumažintumėte vėlavimą.
- Įrenginių galimybės: Optimizuokite savo svetainę skirtingoms įrenginių galimybėms, tokioms kaip mobilieji telefonai, planšetiniai kompiuteriai ir stalinių kompiuterių įrenginiai. Naudokite responsyvaus dizaino techníkas, kad pritaikytumėte savo svetainę skirtingiems ekrano dydžiams ir rezoliucijoms.
- Tinklo sąlygos: Apsvarstykite skirtingas tinklo sąlygas, kurias gali patirti naudotojai, tokias kaip 2G, 3G ir 4G. Naudokite techníkas, tokias kaip adaptyvus vaizdų įkėlimas ir duomenų suspaudimas, kad optimizuotumėte savo svetainę lėtiems tinklo ryšiams.
- Internacionalizavimas (i18n): Tvarkydami daugiakalbes svetaines, užtikrinkite, kad jūsų CSS ir „JavaScript“ būtų tinkamai internacionalizuoti, kad palaikytų skirtingus simbolių rinkinius ir teksto kryptis.
- Prieinamumas (a11y): Optimizuokite savo svetainę prieinamumui, kad užtikrintumėte, jog ją galėtų naudoti žmonės su negalia. Tai apima alternatyvaus teksto teikimą vaizdams, semantinio HTML naudojimą ir užtikrinimą, kad jūsų svetainė būtų pasiekiama klaviatūra.
Išvada
Kritinio Atvaizdavimo Kelio optimizavimas yra būtinas, siekiant užtikrinti greitą ir patrauklią naudotojų patirtį. Minimalizuodami kritinius išteklius, optimizuodami CSS pristatymą, optimizuodami „JavaScript“ vykdymą, optimizuodami DOM, sumažindami išdėstymo trikdžius ir pasinaudodami naršyklės talpyklos teikiamais privalumais, galite žymiai pagerinti savo svetainės našumą. Nepamirškite naudoti turimų įrankių, kad analizuotumėte savo KAK ir nustatytumėte optimizavimo sritis. Atlikdami šiuos veiksmus, užtikrinsite, kad jūsų svetainė įsikels greitai ir suteiks teigiamą patirtį naudotojams visame pasaulyje. Internetas vis labiau globalėja; greita ir prieinama svetainė nebėra tik geriausia praktika, o būtinybė pasiekti įvairią auditoriją.