Mājas lapas ielādes ātrums ir viens no svarīgākajiem faktoriem gan lietotāju pieredzei, gan SEO ranžēšanai. Google izmanto Core Web Vitals — trīs galvenās veiktspējas metrikas — kā tiešu ranžēšanas signālu. Lēna lapa zaudē apmeklētājus un pozīcijas meklēšanas rezultātos.

Šajā rakstā detalizēti apskatīsim katru Core Web Vitals metriku, kā to izmērīt un kā praktiski uzlabot mājas lapas ātrumu ar konkrētiem HTML, CSS un JavaScript risinājumiem.

1. Kas ir Core Web Vitals?

Core Web Vitals ir trīs Google noteiktas metrikas, kas mēra reālo lietotāja pieredzi jūsu mājas lapā. Tās novērtē ielādes ātrumu, interaktivitāti un vizuālo stabilitāti.

Metrika Ko mēra Labi Jāuzlabo Slikti
LCP (Largest Contentful Paint) Cik ātri ielādējas lielākais redzamais elements < 2.5 s 2.5–4 s > 4 s
INP (Interaction to Next Paint) Cik ātri lapa reaģē uz lietotāja darbībām < 200 ms 200–500 ms > 500 ms
CLS (Cumulative Layout Shift) Cik daudz saturs vizuāli pārvietojas ielādes laikā < 0.1 0.1–0.25 > 0.25

Svarīgi: Google mēra šīs metrikas no reālu lietotāju datiem (Chrome User Experience Report jeb CrUX dati), nevis no laboratorijas testiem.

2. LCP — Largest Contentful Paint

LCP mēra laiku no lapas ielādes sākuma līdz brīdim, kad lielākais redzamais elements (parasti galvenais attēls, video plakāts vai liels teksta bloks) ir pilnībā atveidots ekrānā.

Kas ietekmē LCP?

  • Lēna servera atbilde — servera reakcijas laiks (TTFB — Time to First Byte)
  • Render-blocking resursi — CSS un JavaScript faili, kas kavē lapas atveidošanu
  • Lēna resursu ielāde — lieli attēli, fonti vai video
  • Klienta puses renderēšana — JavaScript, kas atveido saturu (piemēram, SPA aplikācijas)

Kā uzlabot LCP

a) Optimizējiet servera atbildes laiku

  • Izmantojiet ātru hostingu vai VPS ar pietiekamiem resursiem
  • Ieslēdziet servera puses kešošanu
  • Izmantojiet CDN (Content Delivery Network) — piemēram, Cloudflare
  • Iestatiet gzip vai brotli saspiešanu serverī

Nginx gzip konfigurācija:

gzip on;
gzip_types text/plain text/css application/json application/javascript text/xml;
gzip_min_length 1000;
gzip_comp_level 6;

b) Novērsiet render-blocking resursus

CSS un JavaScript faili, kas iekļauti <head> sadaļā, kavē lapas atveidošanu. Risinājumi:

JavaScript — izmantojiet defer vai async atribūtus:

<!-- Bloķē renderēšanu (slikti): -->
<script src="skripts.js"></script>

<!-- Izpildās pēc HTML parsēšanas (labi): -->
<script src="skripts.js" defer></script>

<!-- Ielādē paralēli un izpildās tūlīt (analītikai): -->
<script src="analytics.js" async></script>

CSS — ielādējiet nekritisko CSS asinhroni:

<!-- Kritiskais CSS — tieši head sadaļā: -->
<style>
body { font-family: sans-serif; margin: 0; }
.header { background: #1a1a2e; color: #fff; padding: 1rem; }
</style>

<!-- Pārējais CSS — ielādē asinhroni: -->
<link rel="preload" href="stili.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="stili.css"></noscript>

c) Priekšielādējiet LCP resursus

Ja LCP elements ir attēls vai fonts, izmantojiet <link rel="preload">:

<link rel="preload" as="image" href="galvenais-attels.webp">
<link rel="preload" as="font" type="font/woff2" href="fonts/Inter.woff2" crossorigin>

3. INP — Interaction to Next Paint

INP mēra laiku no lietotāja darbības (klikšķa, pieskāriena vai taustiņa nospiešanas) līdz brīdim, kad pārlūkprogramma atveido vizuālo atbildi. Tas aizstāja iepriekšējo FID (First Input Delay) metriku 2024. gada martā.

Kas ietekmē INP?

  • Garš JavaScript izpildes laiks — smagi skripti bloķē galveno pavedienu (main thread)
  • Lieli DOM koki — pārāk daudz HTML elementu padara manipulācijas lēnas
  • Nekoptimizēti notikumu klausītāji — lēnas atbildes uz lietotāja darbībām

Kā uzlabot INP

a) Sadaliet garus JavaScript uzdevumus

Ja JavaScript uzdevums aizņem vairāk par 50 ms, tas ir „garš uzdevums" (long task), kas kavē lietotāja mijiedarbību.

// SLIKTI — viens garš uzdevums bloķē galveno pavedienu
function apstradatVisus() {
for (let i = 0; i < 10000; i++) {
apstradat(dati[i]);
}
}

// LABI — sadalīts mazākos gabalos ar setTimeout
function apstradatPakapem(dati, batchSize = 100) {
let index = 0;
function nakamaPartija() {
const beigas = Math.min(index + batchSize, dati.length);
for (let i = index; i < beigas; i++) {
apstradat(dati[i]);
}
index = beigas;
if (index < dati.length) {
setTimeout(nakamaPartija, 0);
}
}
nakamaPartija();
}

b) Samaziniet DOM izmēru

  • Izvairieties no pārmērīgi dziļas HTML elementu ligzdošanas
  • Neģenerējiet tūkstošiem elementu uzreiz — izmantojiet virtuālo ritināšanu gariem sarakstiem
  • Ieteicamais DOM izmērs: mazāk par 1500 elementiem

c) Izmantojiet requestAnimationFrame

// SLIKTI — piespiež pārlūkprogrammu pārrēķināt izkārtojumu
element.style.width = element.offsetWidth + 10 + 'px';

// LABI — atliek vizuālās izmaiņas līdz nākamajam kadram
requestAnimationFrame(() => {
element.style.width = jaunaVertiba + 'px';
});

4. CLS — Cumulative Layout Shift

CLS mēra, cik daudz lapas elementi neparedzēti pārvietojas ielādes un lietošanas laikā. Piemēram, ja teksts pēkšņi nolec uz leju, jo ielādējas reklāmas baneris — tā ir sliktā „layout shift" situācija.

Kas izraisa CLS?

  • Attēli un video bez norādītiem izmēriem — pārlūkprogramma nezina, cik vietas atvēlēt
  • Dinamiski ielādēts saturs — reklāmas, ielikumi, paziņojumi
  • Fonti, kas ielādējas vēlāk — teksta izmērs mainās, kad pielāgotais fonts aizvieto sistēmas fontu
  • Elementi, kas ievietoti virs esoša satura — bez vietas rezervēšanas

Kā uzlabot CLS

a) Vienmēr norādiet attēlu un video izmērus

<!-- SLIKTI — nav norādīti izmēri -->
<img src="foto.webp" alt="Apraksts">

<!-- LABI — norādīti width un height -->
<img src="foto.webp" alt="Apraksts" width="800" height="450">

<!-- VAI ar CSS aspect-ratio -->
<img src="foto.webp" alt="Apraksts" style="aspect-ratio: 16/9; width: 100%; height: auto;">

b) Rezervējiet vietu dinamiskajam saturam

.reklamas-vieta {
min-height: 250px;
width: 100%;
background: #f0f0f0;
}

c) Novērsiet fontu izraisītas nobīdes

@font-face {
font-family: 'Inter';
src: url('/fonts/Inter.woff2') format('woff2');
font-display: swap;
}

body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

d) Izvaireties no elementu ievietošanas virs esoša satura

Ja pievienojat elementus ar JavaScript (piemēram, sīkdatņu paziņojumu), ievietojiet tos lapas apakšā vai izmantojiet position: fixed, lai tie nepārbīdītu pārējo saturu.

5. Kā izmērīt Core Web Vitals

Laboratorijas rīki

Rīks Apraksts
PageSpeed Insights Google rīks — parāda gan laboratorijas, gan lauka datus un ieteikumus
Chrome DevTools → Lighthouse Iebūvēts Chrome — atveriet DevTools (F12) → Lighthouse cilne
GTmetrix Detalizēta ātruma analīze ar vizuālām diagrammām
WebPageTest Profesionāls rīks ar testēšanu no dažādām vietām

Lauka datu rīki

Rīks Apraksts
Google Search Console Core Web Vitals pārskats — Experience → Core Web Vitals
CrUX Dashboard Chrome User Experience Report — reālu lietotāju dati
web-vitals JS bibliotēka Mēra Core Web Vitals tieši no jūsu lapas apmeklētājiem

Core Web Vitals mērīšana ar JavaScript

<script type="module">
import {onLCP, onINP, onCLS} from 'https://unpkg.com/web-vitals@4/dist/web-vitals.js?module';

onLCP(console.log); // Largest Contentful Paint
onINP(console.log); // Interaction to Next Paint
onCLS(console.log); // Cumulative Layout Shift
</script>

6. Papildu ātruma optimizācijas

6.1. CSS un JavaScript minimizācija

Minimizācija noņem liekos atstarpes, komentārus un rindiņu pārnesumus, samazinot failu izmēru:

Rīks Apraksts
CSS Minifier Tiešsaistes CSS minimizātors
JS Minifier Tiešsaistes JavaScript minimizātors
UglifyJS / Terser Komandrindas rīki (npm pakotnes)

6.2. Pārlūkprogrammas kešošana

Nginx konfigurācija:

location ~* \.(css|js|jpg|jpeg|png|webp|gif|svg|ico|woff2)$ {
expires 1y;
add_header Cache-Control "public, immutable";
}

Apache .htaccess:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType image/webp "access plus 1 year"
</IfModule>

6.3. CDN izmantošana

  • Cloudflare — bezmaksas plāns ar CDN, DDoS aizsardzību un SSL
  • Bunny CDN — ātrs un lēts CDN no ~1 USD/mēn.
  • AWS CloudFront — Amazon CDN profesionāliem projektiem

6.4. Lazy loading

<!-- Attēls ielādēsies tikai, kad lietotājs ritinās līdz tam -->
<img src="foto.webp" alt="Apraksts" width="800" height="450" loading="lazy">

<!-- iframe arī atbalsta lazy loading -->
<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>

Svarīgi: nelietojiet loading="lazy" LCP elementam (galvenajam attēlam lapas augšdaļā) — tas padarīs LCP lēnāku!

7. Ātruma optimizācijas kontrolsaraksts

Servera līmenis

  • Ieslēgta gzip/brotli saspiešana
  • Iestatīta HTTP kešošana statiskajiem resursiem
  • TTFB zem 600 ms
  • Izskatīta CDN izmantošana

HTML/CSS līmenis

  • Kritiskais CSS iekļauts <head> sadaļā
  • Nekritiskais CSS tiek ielādēts asinhroni
  • Attēliem un video norādīti width un height
  • Fonti izmanto font-display: swap

JavaScript līmenis

  • Skripti izmanto defer vai async
  • Nav garu uzdevumu (virs 50 ms)
  • Nelietots JavaScript ir noņemts

Attēli

  • Izmantots WebP vai AVIF formāts
  • Attēli ir saspiesti
  • LCP attēls priekšielādēts (<link rel="preload">)
  • Pārējie attēli izmanto loading="lazy"

8. Biežākās kļūdas

  • Pārāk daudz trešo pušu skriptu — katrs ārējais skripts palēnina lapu. Novērtējiet, vai visi ir nepieciešami
  • Neoptimizēti attēli — milzīgi JPEG/PNG faili, kas nav saspiesti vai konvertēti uz WebP
  • Nav kešošanas galveņu — pārlūkprogramma ielādē visus failus no jauna katrā apmeklējumā
  • Neizmantots CSS/JS — ielādētas pilnas bibliotēkas, no kurām tiek lietota maza daļa
  • Fonti bez font-display — fonts bloķē teksta atveidošanu
  • Ignorēts CLS — attēliem nav norādīti izmēri, reklāmas bez vietas rezervēšanas
  • Lazy loading LCP elementam — galvenais attēls tiek aizkavēts
  • Optimizēšana tikai laboratorijā — Lighthouse rāda 100, bet reālie dati ir slikti

Kopsavilkums

Mājas lapas ātrums ir gan SEO ranžēšanas faktors, gan lietotāja pieredzes pamats. Core Web Vitals mēra trīs galvenos aspektus:

  1. LCP — cik ātri lietotājs redz galveno saturu (mērķis: < 2.5 s)
  2. INP — cik ātri lapa reaģē uz darbībām (mērķis: < 200 ms)
  3. CLS — cik stabils ir lapas izkārtojums (mērķis: < 0.1)

Noderīgas saites: