Paint Holding - vermindering van de witte flits bij navigatie met dezelfde oorsprong

Chrome maakt al een tijdje gretig het scherm leeg bij de overgang naar een nieuwe pagina om gebruikers de geruststelling te geven dat de pagina wordt geladen. Deze "witflits" is dit korte moment waarop de browser een witte verf laat zien tijdens het laden van een pagina. Dit kan afleidend zijn tussen navigatie door, vooral wanneer de pagina redelijk snel een interessantere status bereikt.

Maar voor pagina’s die razendsnel laden is deze aanpak juist schadelijk voor de gebruikerservaring. In de volgende animatie zie je een voorbeeld van hoe dit er vandaag de dag uitziet.

We zijn grote fans van deze website en het doet ons pijn dat hun kwaliteitservaring een witte flits vertoont, en we wilden dit repareren. We hebben dit gedaan met een nieuw gedrag dat we Paint Holding noemen, waarbij de browser even wacht voordat hij begint met schilderen, vooral als de pagina snel genoeg is. Dit zorgt ervoor dat de pagina als geheel wordt weergegeven en een werkelijk onmiddellijke ervaring oplevert.

De manier waarop dit werkt is dat we compositor-commits uitstellen totdat een bepaald paginalaadsignaal (PLS) (bijvoorbeeld eerste contentful paint / vaste time-out) is bereikt. We maken onderscheid tussen hoofdthread-weergavewerk en committeren ons aan de impl-thread (alleen de laatste wordt uitgesteld). Wachten tot een PLS optreedt, verkleint de kans op flitsen van wit/effen kleur.

Ons doel met dit werk was om de navigatie in Chrome tussen twee pagina's met dezelfde oorsprong naadloos te laten verlopen en zo een snelle standaardnavigatie-ervaring te bieden zonder flitsen van een witte/effen achtergrond tussen oude en nieuwe inhoud.

Probeer Paint Holding in Chrome Canary (Chrome 76) en laat ons weten wat je ervan vindt. Ontwikkelaars hoeven zich geen zorgen te maken over het aanbrengen van wijzigingen aan hun pagina's om hiervan te profiteren.