Interaction to Next Paint - Presentation Delay

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

In onze vorige artikelreeks spraken we 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 'presentation delay'. Hoe dit de Interaction To Next Paint beïnvloedt en vervolgens uitleggen hoe je presentation delay kunt optimaliseren om de interaction to next paint te verbeteren!

In het kort: De Interaction to Next Paint (INP) meet hoe lang het duurt voordat een visuele verandering op een pagina te zien is nadat een gebruiker interactie heeft gehad met de pagina. Deze INP kan worden onderverdeeld in 3 componenten: 'input delay', 'processing time' en 'presentation delay'. Presentation delay is de grootste bijdrager aan de totale INP, goed voor gemiddeld ongeveer 42% van de vertraging.  Dit betekent dat het optimaliseren van je presentatie en het vereenvoudigen van html een aanzienlijke invloed kan hebben op de INP-score van je website.

Presentation Delay: Heb je ooit op een knop geklikt en je afgevraagd waarom het een fractie van een seconde te lang duurde om het resultaat te zien? Dat is Interaction To Next Paint (INP) in actie. Presentation delay is de laatste stap in het interactieproces, die in werking treedt nadat je klik is verwerkt maar voordat je visuele veranderingen ziet. 

Presentation Delay begrijpen

De presentation is de laatste fase van een interactie, presentation delay vertegenwoordigt de tijd die de browser nodig heeft om visuele updates te renderen die op de interactie volgen. Presentation delay begint wanneer de event handlers voor de interactie zijn uitgevoerd en eindigt wanneer het volgende frame (met de visuele veranderingen) is geschilderd. De presentation delay kan worden beïnvloed door verschillende factoren, waaronder de complexiteit van de lay-out, de grootte van de DOM en de hoeveelheid renderingwerk die nodig is.

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

Presentation Delay en de INP

Presentation is de laatste fase van de INP. Gemiddeld maakt presentation delay ongeveer 42% uit van de totale INP-tijd.

Bij CoreDash verzamelen we elk uur miljoenen core web vitals datapunten. Op basis van die gegevens is de Presentation Delay tijd goed voor 42% van de Interaction to Next Paint. 

Presentation delay: Stel je voor dat je op je telefoon op een e-commerce website browst voor een nieuw paar schoenen. Je tikt op een productafbeelding om meer details te zien. Je telefoon is echter wat ouder en heeft moeite om het bij te houden. In deze situatie kun je een slechte Interaction to Next Paint (INP) metriek ervaren. Dit is wat er gebeurt: Je tikt op de afbeelding (Interactie). De telefoon heeft wat tijd nodig om het verzoek te verwerken en het scherm bij te werken (Processing Time). De website moet de aanvullende productinformatie ophalen en de nieuwe pagina renderen met de grotere afbeelding en details (Dit kan langzamer zijn door factoren zoals een trage internetverbinding of een complexe productpagina met veel elementen). Ten slotte duurt het een merkbare hoeveelheid tijd voordat de nieuwe productdetails en afbeelding op je scherm verschijnen (Presentation Delay). Deze vertraging in de INP kan frustrerend zijn voor gebruikers en daarom is het belangrijk om het op te lossen.

Presentation Delay verminderen

Het minimaliseren van presentation delay is vaak nodig om te slagen voor de Interaction to Next Paint (INP) metriek en je pagina responsief te houden. Een effectieve strategie is om de grootte van het Document Object Model (DOM) te minimaliseren. Een kleinere DOM leidt over het algemeen tot snellere renderingstijden, omdat de browser minder inhoud hoeft te verwerken en bij te werken. Ontwikkelaars moeten ernaar streven de DOM klein en eenvoudig te houden, met behulp van technieken zoals lazy loading van off-screen inhoud met de content-visibility eigenschap. Daarnaast is het belangrijk om rekening te houden met de hoeveelheid lay-outwerk die door een interactie wordt geactiveerd. Overmatig lay-outwerk kan de presentation delay aanzienlijk verhogen, wat leidt tot een minder responsieve gebruikers- ervaring.

Client-side rendering van HTML kan ook invloed hebben op presentation delay, met name in Single Page Applications (SPA's). Wanneer HTML dynamisch aan de client-zijde wordt aangemaakt met JavaScript, kan dit resulteren in lange taken die de main thread blokkeren, wat mogelijk de presentatie van het volgende frame vertraagt. Ontwikkelaars moeten de prestatie-implicaties van client-side rendering zorgvuldig overwegen en ernaar streven de hoeveelheid dynamisch gegenereerde HTML te minimaliseren.

Lange Presentation Delays identificeren

Om lange presentation delays te identificeren, kun je de Chrome performance profiler gebruiken. Open devtools (Ctrl-shift-i), navigeer naar het performance tabblad, druk op record en interageer met de pagina.,

Je kunt nu de tijdlijn van een interactie analyseren en de verschillende fasen visualiseren, inclusief de presentation delay. Door de rendering updates te onderzoeken die optreden nadat de event handlers zijn voltooid, kun je eventuele knelpunten identificeren die bijdragen aan een lange presentation delay. 

Presentation delay identificeren met RUM-data

Meer inzicht in oorzaken van presentation delay met Long Animation Frames

De Long Animation Frames (LoAF) API biedt gedetailleerde inzichten in de oorzaken van renderingvertragingen, inclusief die welke optreden tijdens gebruikers- interacties. Deze API toont tijdschema's en andere gegevens die ontwikkelaars kunnen helpen specifieke oorzaken van trage interacties te lokaliseren en hun code dienovereenkomstig te optimaliseren. RUM-tools zoals CoreDash bieden ondersteuning voor LoAF en bieden extra inzichten in lange animatieframes, zoals script attribution data. Deze tools kunnen ontwikkelaars helpen begrijpen welke scripts bijdragen aan renderingvertragingen en hun codebase optimaliseren voor een betere responsiviteit.