Kokius puslapio optimizavimo metodus žinote?

Minimalizavimas ir suspaudimas išteklių:
- HTML, CSS, JavaScript: nereikalingų tarpų, komentarų, eilutės pertraukų pašalinimas, kintamųjų pavadinimų trumpinimas.
- Paveikslėliai: formatų optimizavimas (WebP, AVIF), be kokybės praradimo suspaudimas, atsako paveikslėlių naudojimas.
Naudojant CDN (Content Delivery Network): Statinių išteklių paskirstymas iš artimiausių serverių vartotojui sumažina delsą.
Naršyklės talpyklos naudojimas: Tinkamų HTTP antraščių (Cache-Control, Expires) nustatymas statinių išteklių talpyklai kliento pusėje.
Lazy Loading (vėlyvas įkėlimas): Paveikslėlių, vaizdo įrašų ir kitų sunkių išteklių vėlyvas įkėlimas, kol jie pasirodys matomoje ekrano srityje.
Asinchroninis ir vėlyvas JavaScript ir CSS įkėlimas: async ir defer atributų naudojimas, siekiant neblokuoti skriptų vykdymo, CSS įkėlimas už kritinio kelio ribų.
Kritinio CSS optimizavimas: Minimalios CSS įterpimas pirmojo ekrano atvaizdavimui tiesiogiai į HTML <head>, likęs CSS įkeliama asinchroniškai.
HTTP užklausų skaičiaus mažinimas:
- CSS ir JavaScript failų sujungimas.
- Mažų paveikslėlių naudojimas sprite'ų pagalba.
Šriftų optimizavimas:
- WOFF2 formato naudojimas.
- font-display taikymas.
- Kritinių šriftų išankstinis įkėlimas.
Naudojant serverio pusės renderinimą (SSR) arba statinį svetainių generavimą (SSG): Dalies ar visos puslapio renderinimas serveryje prieš siuntimą klientui, pagerinant pirmojo turinio laiką ir indeksavimą.
Paveikslėlių optimizavimas:
- Tinkami dydžiai skirtingiems įrenginiams.
- <picture> ir srcset naudojimas.
- Suspaudimas prarandant kokybę.

Resource Hints (preconnect, prefetch, preload) naudojimas: Naršyklei patarti apie artimiausiu metu reikalingus išteklius.

<!-- Prisijungimas prie domeno prieš išteklių užklausą -->
<link rel="preconnect" href="https://example.com">
<!-- Išankstinis išteklių įkėlimas -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Išankstinis išteklių atsisiuntimas -->
<link rel="prefetch" href="/next-page.html">

DOM optimizavimas: Minimalus DOM medžio gylis, vengti brangių DOM skaitymo/rašymo operacijų cikluose.
Rendavimo (Layout, Paint, Composite) optimizavimas: Vengti priverstinių stilių ir maketų peržiūrų, naudoti CSS savybes, kurios nesukelia viso puslapio perpiešimo (pvz., transform, opacity vietoj top, left).
Naudojant Web Workers: Perkelti sudėtingus skaičiavimus į atskiras gijas, siekiant išvengti pagrindinio UI srauto blokavimo.
Progresyvus įkėlimas: Rodyti turinį palaipsniui jo įkėlimo metu.