Ako optimalizovať Core Web Vitals:
First input delay

Tento článok je vhodný SEO špecialistov a marketérov, ktorých zaujíma pokročilé SEO:

Ilustračné foto: Karolina Grabowska

Tak ako sme si už spomenuli v úvode predošlého článku, spoločnosť Google začiatkom tohto roka predstavila implementáciu tzv. Core Web Vitals. Ich cieľom je meranie kvality používateľského zážitku na ktorejkoľvek webovej stránke. Ide o nasledovné 3 metriky:

1. Largest Contentful Paint (LCP)
2. First input delay (FID)
3. Cumulative layout shift (CLS)

Každá z Core Web Vitals metrík predstavuje odlišný aspekt používateľskej skúsenosti. V predchádzajúcich článkoch sme písali o Core Web Vitals všeobecne aj špecificky o metrike Largest Contentful Paint.

V nasledujúcich riadkoch článku nájdete užitočné informácie, ktoré vám pomôžu pri optimalizáciu druhej metriky – First Input Delay.

First input delay

Metrika First input delay (FID) meria čas od prvej interakcie používateľa so stránkou (tj. keď klikne na odkaz, ťukne na tlačidlo alebo použije nejaký ovládací prvok založený na jazyku JavaScript) do času, keď je prehliadač skutočne schopný začať spracovávať požiadavku udalosti v reakcii na túto interakciu.

Hlavnou príčinou zlého FID je zdĺhavé vykonávanie JavaScriptu. Optimalizácia spôsobu, akým JavaScript analyzuje, kompiluje a vykonáva príkazy na stránke, priamo zníži FID.

Prehliadač nemôže počas vykonávania JavaScriptu na hlavnom vlákne reagovať na väčšinu zadaní používateľov. Inými slovami, prehliadač nemôže reagovať na interakcie používateľov, keď je hlavné vlákno zaneprázdnené.

Na zrýchlenie FID sa odporúča:

• Rozbite dlhé úlohy na menšie asynchrónne
• Optimalizujte svoju stránku tak, aby bola pripravená na interakciu
• Použite web worker
• Skráťte čas vykonávania JavaScriptu

1. Rozbite dlhé úlohy na menšie asynchrónne

Ak už ste sa pokúsili znížiť množstvo kódu JavaScript, ktorý sa načíta na stránke, môže byť užitočné rozdeliť dlhotrvajúci kód na menšie asynchrónne úlohy. Akýkoľvek kúsok kódu, ktorý blokuje hlavné vlákno na 50 ms a viac, možno charakterizovať ako dlhú úlohu.

Dlhé úlohy sú znakom možného nafúknutia JavaScriptu. Rozdelením dlhých úloh môžete znížiť vstupné oneskorenie na vašom webe a tým výrazne zlepšiť FID.

2. Optimalizujte svoju stránku tak, aby bola pripravená na interakciu

Existuje niekoľko bežných príčin zlého skóre FID a TBT (Total Blocking Time) vo webových aplikáciách, ktoré sa vo veľkej miere spoliehajú na JavaScripty a môžu nastať tieto problémy:

• Spustenie skriptu prvej strany môže oneskoriť pripravenosť na interakciu
• Načítanie údajov môže mať vplyv na mnoho aspektov pripravenosti na interakciu
• Spustenie skriptu tretej strany môže tiež oneskoriť latenciu interakcie

3. Použite web workers

Blokované hlavné vlákno je jednou z hlavných príčin oneskorenia vstupu. Web workers umožňujú spustiť JavaScript na pozadí. Presunutie non-UI operácií, ktoré nie sú spojené s používateľským rozhraním, do samostatného pracovného vlákna môže znížiť čas blokovania hlavného vlákna a následne zlepšiť FID.

Zvážte použitie nasledujúcich knižníc, ktoré uľahčia používanie scriptov Web workers na vašom webe:

• Comlink – pomocná knižnica, ktorá abstrahuje postMessage a uľahčuje jej používanie,
• Workway – všeobecný web workers exportér,
• Workerize – slúži na presunutie modulov do web workers.

4. Skráťte čas vykonávania JavaScriptu

Obmedzením množstva kódu JavaScript na svojej stránke skracuje čas, ktorý prehliadač potrebuje na vykonanie JavaScriptu. Týmto spôsobom môžeme ovplyvniť to, ako rýchlo prehliadač začne reagovať na akékoľvek interakcie používateľov.

Čo robiť, ak chcete znížiť množstvo JavaScript kódu na svojej stránke:

• Odložite nepoužívané JavaScripty
• Minimalizujte nepoužívané polyfill

Odložite nepoužívané JavaScripty – predvolene všetok JavaScript blokuje vykreslenie. Keď prehliadač narazí na značku skriptu, ktorá odkazuje na externý súbor JavaScriptu, musí pozastaviť činnosť, ktorú robí, a tento JavaScript stiahnuť, analyzovať, kompilovať a spustiť.

Preto by ste mali načítať iba kód, ktorý je potrebný pre stránku alebo na reakciu na vstup používateľa.

Na karte Pokrytia v aplikácii Chrome DevTools môžete zistiť, koľko JavaScriptu sa na vašej webovej stránke nepoužíva.

Čo robiť, ak chcete obmedziť nepoužívaný JavaScript:

• Rozdeľte svoj kód na viac častí
• Odložte akýkoľvek nekritický JavaScript, vrátane skriptov tretích strán, pomocou asynchronizácie (async) alebo odloženia (defer)

Minimalizujte nepoužívané polyfill – ak svoj kód vytvoríte pomocou modernej syntaxe JavaScriptu a budete odkazovať na API moderných prehľadávačov, budete ho musieť previesť a zahrnúť polyfilly, aby fungoval aj v starších prehliadačoch. Jednou z hlavných obáv týkajúcich sa výkonu zahrnutia polyfill a transpilovaného kódu na vaše stránky je, že novšie prehliadače by si ich nemali sťahovať, ak ich nepotrebujú.

Ak chcete znížiť veľkosť JavaScriptu svojej aplikácie, čo najviac minimalizujte nepoužívané polyfill a obmedzte ich použitie iba na prostredie, kde sú potrebné.

Potrebujete pomôcť s optimalizáciou webu pre Core Web Vitals? Napíšte nám!