Core Web Vitals 2026: INP asendas FID-i

Google'i uus interaktiivsuse metric Interaction to Next Paint (INP). Mis muutub ja kuidas optimeerida.

Mis muutus?

Märtsis 2024 asendas Google INP (Interaction to Next Paint) vana FID (First Input Delay) metricu. INP on tähtsam, sest: - Mõõdab kõiki interaktsioone (mitte ainult esimest) - Hindab tegelikku kasutuskogemust - Karmim kriteerium (raskem rohelist saavutada)

Google'i ametlik teade.

Kõik Core Web Vitals 2026

Metric	Mida mõõdab	Hea	Halb
LCP	Suurima elemendi laadimine	<2.5s	>4s
INP	Interaktsiooni reageerimine	<200ms	>500ms
CLS	Visuaalne stabiilsus	<0.1	>0.25

Vaata täielik juhend.

INP detailid

INP mõõdab aega: - Kasutaja klõpsab nuppu / klahvi vajutab / puutub ekraani - Kuni järgmise visuaalse uuenduseni

Mõõtmine: 75. percentile kõikidest interaktsioonidest seansi jooksul.

Hea INP - Alla 200ms → roheline - 200–500ms → kollane - Üle 500ms → punane

Eesti kodulehtede keskmine (2024): 285ms → kollane tsoon.

Mis INP-d aeglustab?

1. Pikad JS taskid JS, mis blokeerib main thread'i 50ms+ on probleem.

2. Suur DOM 10000+ elementi → iga interaktsioon vajab rohkem renderdamist.

3. Kolmandate osapoolte skriptid Google Analytics, Facebook Pixel, chat widgets – kõik söövad jõudlust.

4. React/Vue üle-renderdamine Kogu komponendipuu re-render'imine iga klõpsu pealt.

5. Sünkroonne CSS Render-blocking stiilifailid.

Kuidas mõõta INP?

Field data (päris kasutajad) - [PageSpeed Insights](https://pagespeed.web.dev/) - [Search Console → Core Web Vitals](https://search.google.com/search-console) - [CrUX dataset](https://developer.chrome.com/docs/crux)

Lab data (test) - Chrome DevTools → Performance → Web Vitals - [web-vitals JS library](https://github.com/GoogleChrome/web-vitals)

import {onINP} from 'web-vitals';
onINP(console.log);

Optimeerimise strateegiad

1. Vähenda JS bundli suurust Code splitting, tree shaking, dynamic imports: ```tsx const HeavyComponent = React.lazy(() => import('./HeavyComponent')); ```

2. Defer non-critical JS ```html <script src="analytics.js" defer></script> ```

3. Web Workers Pikaajalise arvutuse viimine eraldi thread'i: ```js const worker = new Worker('compute.js'); ```

4. requestIdleCallback Non-urgent tasks päästavad main thread: ```js requestIdleCallback(() => { trackAnalyticsEvent(); }); ```

5. Optimize event handlers - Debounce keyboard input - Throttle scroll handlers - Passive listeners: `{passive: true}`

6. Vähenda DOM keerukust - Virtualiseeri pikad nimekirjad (react-window) - Eemalda peidetud elemendid (mitte ainult `display: none`) - Lihtsusta nested struktuure

7. Async/Defer kolmandate poolt ```html <script src="https://www.googletagmanager.com/gtag/js" async></script> ```

8. Server-side rendering Esmane HTML on juba olemas → JS hüdratsiooni järel kohe interaktiivne.

WordPress näpunäited

Vähenda pluginaid Iga plugin = JS + CSS. Audit: - Kustuta kasutuseta - Konsolideeri sarnaseid - Vali kvaliteetseid

Optimeerimise pluginad - WP Rocket – sisaldab delay JS, defer JS - Perfmatters – flush unused JS/CSS - Async JavaScript – tasuta, defer/async

Tüüpilised süüdlased - Slider revolutsioon (kasuta CSS slidereid) - Page builder (Elementor) – raskelt optimeeritav - Vana teema (mitmed jQuery skriptid)

React/Next.js näpunäited

React 18+ features - useTransition – madala prioriteediga uuendused - useDeferredValue – aeglase arvutuse edasilükkamine - Suspense – stream'ine renderdamine

Vältida - Inline functions JSX-is (re-renders) - Large context updates - Synchronous heavy computations

Reaalne juhtum

E-poe sait, INP 480ms (halb): - Diagnoosi: Elementor + 3 chat widgetit + Google Tag Manager - Lahendus: 1. Asendas Elementori GeneratePress'iga 2. Lazy-load chat widget'id 3. GTM ümberkonfigureerimine - Tulemus: INP 145ms (roheline)

Konversioon tõusis 12% järgmise 30 päeva jooksul.

Mõju SEO-le

Core Web Vitals on ranking factor alates 2021. INP eraldi: - Hea INP → +5–10% positsioonid mobiilses otsingus - Halb INP → karistab eriti pikkadel sõnaridadel

Vt ka: - Tehniline SEO audit - Laadimiskiirus

Kokkuvõte

INP on Core Web Vitals'i strictest metric – kõige raskem saavutada, kõige tähtsam mõju kasutuskogemusele. Meie optimeerimisteenus sisaldab täielikku INP auditit ja optimeerimist. Küsi pakkumist ja saa Core Web Vitals rohelisteks.

Core Web Vitals 2026: INP asendas FID-i – mida tähendab

Mis muutus?

Kõik Core Web Vitals 2026

INP detailid

Hea INP - Alla 200ms → roheline - 200–500ms → kollane - Üle 500ms → punane

Mis INP-d aeglustab?

1. Pikad JS taskid JS, mis blokeerib main thread'i 50ms+ on probleem.

2. Suur DOM 10000+ elementi → iga interaktsioon vajab rohkem renderdamist.

3. Kolmandate osapoolte skriptid Google Analytics, Facebook Pixel, chat widgets – kõik söövad jõudlust.

4. React/Vue üle-renderdamine Kogu komponendipuu re-render'imine iga klõpsu pealt.

5. Sünkroonne CSS Render-blocking stiilifailid.

Kuidas mõõta INP?

Field data (päris kasutajad) - [PageSpeed Insights](https://pagespeed.web.dev/) - [Search Console → Core Web Vitals](https://search.google.com/search-console) - [CrUX dataset](https://developer.chrome.com/docs/crux)

Lab data (test) - Chrome DevTools → Performance → Web Vitals - [web-vitals JS library](https://github.com/GoogleChrome/web-vitals)

Optimeerimise strateegiad

1. Vähenda JS bundli suurust Code splitting, tree shaking, dynamic imports: ```tsx const HeavyComponent = React.lazy(() => import('./HeavyComponent')); ```

2. Defer non-critical JS ```html <script src="analytics.js" defer></script> ```

3. Web Workers Pikaajalise arvutuse viimine eraldi thread'i: ```js const worker = new Worker('compute.js'); ```

4. requestIdleCallback Non-urgent tasks päästavad main thread: ```js requestIdleCallback(() => { trackAnalyticsEvent(); }); ```

5. Optimize event handlers - Debounce keyboard input - Throttle scroll handlers - Passive listeners: `{passive: true}`

6. Vähenda DOM keerukust - Virtualiseeri pikad nimekirjad (react-window) - Eemalda peidetud elemendid (mitte ainult `display: none`) - Lihtsusta nested struktuure

7. Async/Defer kolmandate poolt ```html <script src="https://www.googletagmanager.com/gtag/js" async></script> ```

8. Server-side rendering Esmane HTML on juba olemas → JS hüdratsiooni järel kohe interaktiivne.

WordPress näpunäited

Vähenda pluginaid Iga plugin = JS + CSS. Audit: - Kustuta kasutuseta - Konsolideeri sarnaseid - Vali kvaliteetseid

Optimeerimise pluginad - WP Rocket – sisaldab delay JS, defer JS - Perfmatters – flush unused JS/CSS - Async JavaScript – tasuta, defer/async

Tüüpilised süüdlased - Slider revolutsioon (kasuta CSS slidereid) - Page builder (Elementor) – raskelt optimeeritav - Vana teema (mitmed jQuery skriptid)

React/Next.js näpunäited

React 18+ features - useTransition – madala prioriteediga uuendused - useDeferredValue – aeglase arvutuse edasilükkamine - Suspense – stream'ine renderdamine

Vältida - Inline functions JSX-is (re-renders) - Large context updates - Synchronous heavy computations

Reaalne juhtum

Mõju SEO-le

Kokkuvõte

Allikad

Vajad abi oma kodulehega?

Artikli autor

Seotud artiklid

Kodulehe migratsioon ilma SEO kaotusteta: 12-sammuline plaan

Meta sildid 2026: mis on olulised ja kuidas seadistada

Schema markup ja struktureeritud andmed: kuidas saada rich snippets

Core Web Vitals 2026: INP asendas FID-i – mida tähendab

Mis muutus?

Kõik Core Web Vitals 2026

INP detailid

Hea INP - Alla 200ms → roheline - 200–500ms → kollane - Üle 500ms → punane

Mis INP-d aeglustab?

1. Pikad JS taskid JS, mis blokeerib main thread'i 50ms+ on probleem.

2. Suur DOM 10000+ elementi → iga interaktsioon vajab rohkem renderdamist.

3. Kolmandate osapoolte skriptid Google Analytics, Facebook Pixel, chat widgets – kõik söövad jõudlust.

4. React/Vue üle-renderdamine Kogu komponendipuu re-render'imine iga klõpsu pealt.

5. Sünkroonne CSS Render-blocking stiilifailid.

Kuidas mõõta INP?

Field data (päris kasutajad) - [PageSpeed Insights](https://pagespeed.web.dev/) - [Search Console → Core Web Vitals](https://search.google.com/search-console) - [CrUX dataset](https://developer.chrome.com/docs/crux)

Lab data (test) - Chrome DevTools → Performance → Web Vitals - [web-vitals JS library](https://github.com/GoogleChrome/web-vitals)

Optimeerimise strateegiad

1. Vähenda JS bundli suurust Code splitting, tree shaking, dynamic imports: ```tsx const HeavyComponent = React.lazy(() => import('./HeavyComponent')); ```

2. Defer non-critical JS ```html <script src="analytics.js" defer></script> ```

3. Web Workers Pikaajalise arvutuse viimine eraldi thread'i: ```js const worker = new Worker('compute.js'); ```

4. requestIdleCallback Non-urgent tasks päästavad main thread: ```js requestIdleCallback(() => { trackAnalyticsEvent(); }); ```

5. Optimize event handlers - Debounce keyboard input - Throttle scroll handlers - Passive listeners: `{passive: true}`

6. Vähenda DOM keerukust - Virtualiseeri pikad nimekirjad (react-window) - Eemalda peidetud elemendid (mitte ainult `display: none`) - Lihtsusta nested struktuure

7. Async/Defer kolmandate poolt ```html <script src="https://www.googletagmanager.com/gtag/js" async></script> ```

8. Server-side rendering Esmane HTML on juba olemas → JS hüdratsiooni järel kohe interaktiivne.

WordPress näpunäited

Vähenda pluginaid Iga plugin = JS + CSS. Audit: - Kustuta kasutuseta - Konsolideeri sarnaseid - Vali kvaliteetseid

Optimeerimise pluginad - **WP Rocket** – sisaldab delay JS, defer JS - **Perfmatters** – flush unused JS/CSS - **Async JavaScript** – tasuta, defer/async

Tüüpilised süüdlased - Slider revolutsioon (kasuta CSS slidereid) - Page builder (Elementor) – raskelt optimeeritav - Vana teema (mitmed jQuery skriptid)

React/Next.js näpunäited

React 18+ features - **useTransition** – madala prioriteediga uuendused - **useDeferredValue** – aeglase arvutuse edasilükkamine - **Suspense** – stream'ine renderdamine

Vältida - Inline functions JSX-is (re-renders) - Large context updates - Synchronous heavy computations

Reaalne juhtum

Mõju SEO-le

Kokkuvõte

Allikad

Vajad abi oma kodulehega?

Artikli autor

Seotud artiklid

Kodulehe migratsioon ilma SEO kaotusteta: 12-sammuline plaan

Meta sildid 2026: mis on olulised ja kuidas seadistada

Schema markup ja struktureeritud andmed: kuidas saada rich snippets

Optimeerimise pluginad - WP Rocket – sisaldab delay JS, defer JS - Perfmatters – flush unused JS/CSS - Async JavaScript – tasuta, defer/async

React 18+ features - useTransition – madala prioriteediga uuendused - useDeferredValue – aeglase arvutuse edasilükkamine - Suspense – stream'ine renderdamine