Interaction to Next Paint - Input Delay

Interaction to Next Paint (INP) problemen veroorzaakt door input delay

In ons vorige artikel hebben we gesproken over de interaction to next paint en hoe je interaction to next paint problemen identificeert. Als je de basis wilt nalezen, is dit een geweldige plek om te beginnen!

In dit artikel zal ik me concentreren op 'Input Delay'. Hoe dit de Interaction To Next Paint problemen beïnvloedt en vervolgens uitleggen hoe je input delays kunt minimaliseren om de interaction to next paint te verbeteren.!

INP TIP: meestal treden input delays op tijdens de vroege laadfasen van de webpagina!

Wat is input delay?

Input delay verwijst naar de tijd die de browser nodig heeft om een event callback te verwerken nadat een gebruiker interageert met een webpagina (bijv. klikken op een knop of drukken op een toets). Hoewel er altijd enige input delay is (zelfs browsers hebben tijd nodig om de callbacks te plannen), treedt input delay op wanneer de browser bezig is met het uitvoeren van andere geplande taken en de door de interactie gevraagde callbacks niet onmiddellijk kan plannen.

Input delay en de INP

De Interaction to Newt Paint (INP) kan worden onderverdeeld in 3 subonderdelen: 'Input Delay', 'Processing Time' en 'Presentation Delay'

Het valt je misschien op dat er naamovereenkomsten zijn tussen de Input Delay en de oudere Core Web Vital 'First Input Delay'. Voor degenen die het niet weten: De Interaction to Next Paint is de opvolger van de gepensioneerde 'First Input Delay'. De First Input Delay meette de tijd tussen de eerste interactie en de event callback. Hoewel de First Input Delay met pensioen is gegaan, speelt 'Input Delay' nog steeds een belangrijke rol bij het verbeteren van webresponsiviteit, omdat Input Delay aan de basis ligt van elke Interaction to Next Paint.

Het belang van input delay

Omdat veel ontwikkelaars denken aan het verbeteren van de INP in termen van het optimaliseren van de callback-functie (het optimaliseren van de verwerkingstijd), wordt de 'Input Delay' vaak over het hoofd gezien. Toegegeven, Input Delay is meestal niet het grootste deel van de INP, maar desalniettemin, als we de INP delay optimaliseren, zullen we vaak alle INP-interacties tegelijk optimaliseren!

Bij CoreDash verzamelen we elk uur miljoenen core web vitals datapunten. Op basis van die gegevens is de Input Delay goed voor slechts 18% van de Interaction to Next Paint. En hoewel dat lang niet zoveel is als de Presentation Delay of de Processing time, is het nog steeds een aanzienlijk deel.

Oorzaken van Input Delay:

Input delay treedt op wanneer de main thread bezig is met het uitvoeren van andere taken. Deze taken kunnen afkomstig zijn van:

1. Vroege taken. Normale, uitgestelde en asynchrone scripts die vroeg in de wachtrij worden geplaatst, zullen vroege taken creëren
   
2. Geplande taken. Sommige taken draaien niet bij de start van het laden van de pagina, maar kunnen gepland zijn voor nadat de pagina is geladen. Deze taken kunnen ook interfereren met de INP en een input delay veroorzaken. Bijvoorbeeld scripts die draaien na de window.onload event of scripts die worden vertraagd door zogenaamde optimalisatie-plug-ins.
   
3. Herhaalde taken. Terugkerende taken via setInterval() die een relatief lange tijd nodig hebben om uit te voeren en samenvallen met de INP
4. Overlappende callbacks: Overlappende callbacks zijn een veelvoorkomende oorzaak van input delay. Meerdere callbacks die dicht bij elkaar zijn gepland, kunnen een wachtrij creëren, waardoor de verwerking van de volgende interactie wordt vertraagd.

Minimaliseer input delay

1. Breek lange vroege taken op in meerdere kleinere taken. Tijdens lange taken kan de browser niet reageren op gebruikersinvoer, terwijl de browser na elke korte taak wel kan reageren op gebruikersinvoer. Dus breek lange taken op met scheduler.yield() (experimenteel) of door elke functie in een timeout van 0 te verpakken met setTimeout(callback,0)
2. Beheer interactieve elementen. Overweeg om interactieve elementen (zoals een zoekbalk) niet te presenteren voordat de JavaScript-code die ze bestuurt volledig is geladen. Dit voorkomt vroege klikken voor elementen die niet klaar zijn om klikken te ontvangen. Om de UX voor dit patroon te optimaliseren, kun je het laden van de benodigde JavaScript prioriteren of het element tijdelijk verbergen/uitschakelen totdat het functioneel is.
3. Idle Time Script Execution: Plan niet-kritieke scripts om te draaien tijdens inactieve periodes van de browser met requestIdleCallback(). RequestIdleCallback draait wanneer de browser inactief is en geen gebruikersinvoer hoeft te verwerken.
4. Gebruik web workers om JavaScript buiten de main thread uit te voeren. Web workers zorgen ervoor dat scripts buiten de main thread draaien. Dit zal voorkomen dat de main thread blokkeert en INP input delay problemen veroorzaakt.
5. Controleer op pending input tijdens herhaalde taken. Voordat je een set of geplande taken uitvoert, controleer op pending input voordat je de taken start. Als er input pending is, geef dan voorrang aan de main thread.
6. Verwijder onnodige code. Controleer je scripts regelmatig en verwijder onnodige code of zelfs scripts, omdat elke regel code mogelijk een input delay kan veroorzaken die de interaction to next paint beïnvloedt.

async function yieldToMain() {
  if ('scheduler' in window && 'yield' in window.scheduler) {
    return await window.scheduler.yield();
  }
  return new Promise((resolve) => {
    setTimeout(resolve, 0);
  });
}

Praktische implicaties

Laten we naar de belangrijkste vraag gaan: 'Wat betekent dit allemaal voor mijn site?'. Laten we het opsplitsen voor WordPress & REACT.

WordPress

WordPress komt vanwege zijn aard vaak met een thema en een groot aantal plug-ins. Zowel de plug-ins als de thema's vertrouwen vaak op JavaScript voor functionaliteit. Omdat deze plug-ins en thema's worden onderhouden door externe ontwikkelaars, hebben we geen controle over de inhoud. Dit betekent dat we de bestanden niet kunnen wijzigen en 'slechte code' kunnen optimaliseren. Zelfs als de scripts zich netjes gedragen, is er geen garantie dat ze dat in de toekomst zullen doen.

Dus om input delay te minimaliseren en de Interaction to Next Paint (INP) te optimaliseren, doe het volgende:

• Vermijd het gebruik van plug-ins waar mogelijk. Hoewel plug-ins een gemakkelijke manier zijn om functionaliteit toe te voegen, voegen ze vaak scripts toe aan de pagina. Die scripts veroorzaken een input delay die de INP beïnvloedt. Vraag jezelf voor elke plug-in af: Kan ik dezelfde functionaliteit bereiken met aangepaste code?
• Kies lichtgewicht thema's. Veel WordPress-thema's 'bieden alles'. Hoewel dat lijkt als een geweldig idee, betekent het dat ze waarschijnlijk gevuld zijn met functionaliteit die niet wordt gebruikt, maar neemt wel waardevolle CPU-tijd in beslag.
• Vermijd paginabouwers. Paginabouwers zoals Elementor of WPBakery geven je een gebruiksvriendelijke, visuele interface voor het bouwen van lay-outs. Helaas vertrouwen ze vaak op scripts voor het presenteren van die lay-out aan de bezoekers.
• Laad scripts alleen wanneer ze nodig zijn. WordPress heeft de neiging om alle scripts op alle pagina's te laden. Om dit op te lossen, maak je gewoon een child-thema en de-registreer je onnodige scripts per pagina- type. Bijvoorbeeld:

function my_deregister_scripts() {
  if ( ! is_page( 'contact' ) ) { 
    // Example: Deregister contact form script on non-contact pages
    wp_dequeue_script( 'contact-form-script' );
  }
}
add_action( 'wp_enqueue_scripts', 'my_deregister_scripts' );

REACT / NextJS

React of NextJS sites worden grotendeels aangedreven door JavaScript. Het uitvoeren van deze scripts kost tijd en veroorzaakt input delay voor de Interaction to Next Paint (INP)

• Gebruik server components. Server components worden gerenderd op de server en niet op de client wat zal leiden tot een verminderde hoeveelheid JavaScript
• Laad scripts van derden met de juiste strategie. Laad scripts van derden na hydratatie of zelfs tijdens de inactieve tijd van de browser
• Implementeer een idle until urgent patroon: Dit patroon geeft voorrang aan gebruikersinteracties boven achtergrondtaken en creëert tijdelijke statussen terwijl de browser requestIdleCallback gebruikt om niet-kritieke taken uit te voeren tijdens inactieve periodes van de browser.
• Lazy load components. Lazy load componenten die niet direct nodig zijn met behulp van React.lazy() of NextJS dynamic()
• Gebruik suspense voor interactieve componenten. Overweeg alleen client-side rendering voor interactieve componenten die hydratatie nodig hebben om interactief te worden.