Addy Osmani

Hulpbronnen van derden (zoals insluitingen en scripts) worden tegenwoordig veel gebruikt op internet. Ze bieden kant-en-klare oplossingen voor het insluiten van sociale media, video's, analyses, livechat, advertenties, A/B-testen, personalisatie en meer. Insluitingen van derden zijn een noodzakelijk onderdeel van moderne websites waarmee site-eigenaren zich kunnen concentreren op hun kerncompetenties, terwijl standaard maar kritische functies worden overgedragen aan externe providers.

Wanneer zowel de eerste partij als de derde partijen op een webpagina in harmonie samenwerken, is het mogelijk dat een pagina een geweldige gebruikerservaring biedt. Dit vergt echter aanzienlijke inspanningen van zowel technische als zakelijke teams en wordt vaak over het hoofd gezien, wat resulteert in minder goed presterende webpagina's en een negatieve impact op gebruikersgerichte statistieken zoals de Core Web Vitals . Dit is nadelig voor beide partijen en creëert gemiste kansen bij bedrijven. Kunnen we het hier beter doen?

We hebben een toekomstvisie op internet waarin scripts en bronnen van derden de beoogde bedrijfswaarde bieden met minimale achteruitgang in de prestaties of gebruikerservaring van websites die deze in de browser gebruiken. Hierdoor zouden gebruikers idealiter snellere paginaladingen kunnen ervaren.

Het afgelopen jaar hebben we veel mogelijkheden overwogen, besproken en geëxperimenteerd die de gebruikerservaring mogelijk kunnen beschermen tegen de schadelijke gevolgen van scripts van derden, zonder de zakelijke waarde ervan voor site-eigenaren te verminderen.

Via dit bericht willen we informatie delen over enkele van onze experimenten. We hopen dat dit het begin is van een proces dat de transparantie en zichtbaarheid tussen user agents, bedrijven en externe providers zal bevorderen en de weg zal effenen naar een sneller internet.

Een diepere blik op derden

Een derde partij is een bron die wordt aangeboden door een provider buiten de site. Ze vallen niet direct onder de controle van de site-eigenaren, maar zijn aanwezig met hun goedkeuring. Bronnen van derden zijn:

• Gehost op een gedeelde en openbare oorsprong die verschilt van de oorsprong van de primaire site.
• Niet geschreven of beïnvloed door een individuele site-eigenaar.
• Wordt veel gebruikt door verschillende sites.

Van het helpen genereren van inkomsten (via advertenties) tot het bieden van betere marketingmogelijkheden (insluiten van sociale media), derde partijen dienen een breed scala aan zakelijke doelstellingen. Veel voorkomende categorieën van derden zijn onder meer:

Bron: Derden per categorie .

Met deze scripts en bibliotheken van derden kunnen webontwikkelaars beproefde oplossingen gebruiken om standaardfuncties te implementeren in plaats van het wiel opnieuw uit te vinden. Zo verkorten derde partijen de ontwikkelingstijd en helpen ze bedrijven hun producten sneller te lanceren of te upgraden. Het is dan ook geen wonder dat meer dan 94% van alle websites op desktop en mobiel gebruik maakt van derden.

Hoe beïnvloeden derden de prestaties?

Idealiter zijn ontwikkelaars van derden vakexperts voor de specifieke functies die zij bieden. De meeste populaire derde partijen hebben verschillende iteraties ondergaan en je kunt verwachten dat hun code wordt geoptimaliseerd voor hun eigen bedrijfsdoelen, waaronder al dan niet de prestaties van pagina's die ze gebruiken. We weten echter wel dat zelfs de best geoptimaliseerde externe partijen de prestaties beïnvloeden . Dit zijn de belangrijkste redenen voor deze impact:

1. Grootte en kosten voor scriptuitvoering : Derden proberen vaak aanzienlijke functionaliteit te bieden "gewoon" door een <script> of <iframe> -element op uw pagina te plaatsen. Deze elementen halen vervolgens scripts en bronnen binnen die aanzienlijk groot zijn en het downloaden en uitvoeren ervan langer duurt. Te veel JavaScript houdt de rode draad langer bezig, blokkeert de weergave en vertraagt ​​gebruikersinteracties. Het is bekend dat sommige van de belangrijkste derde partijen de hoofdthread van 42 ms tot 1,6 s blokkeren voor meer dan 50% van de geanalyseerde sites. Een geblokkeerde hoofdthread resulteert in een hoge Total Blocking Time (TBT) , een van de statistieken die de prestatiescore voor de site beïnvloedt. Bovendien vertraagt ​​het ook de reactie op gebruikersinteracties en verslechtert het de Interaction to Next Paint (INP) -statistiek die wordt gebruikt om de responsiviteit van websites te meten. De uitvoeringskosten van scripts hebben dus een aanzienlijke invloed op de prestaties.

2. Aantal : Gemiddeld gebruiken websites ongeveer 21 verschillende derde partijen op mobiel en internet. Vaak worden tags van derden toegevoegd door tools voor tagbeheer die niet rechtstreeks worden beheerd door de technische/ontwikkelteams. Tags die niet vereist zijn, kunnen zonder beoordelingsproces door andere teams worden toegevoegd en worden nooit verwijderd. Deze kunnen een aanzienlijke invloed hebben op de gebruikerservaring, het paginagewicht of het CPU-gebruik. Het opzetten van een governanceproces kan dergelijke situaties aanpakken en ontwikkelaars in staat stellen de impact van elke provider te controleren. Het zou helpen als ontwikkelaars kant-en-klare gegevens beschikbaar hadden voor alle derde partijen die een specifieke functie bieden, met hun prestatie-impact, voordelen en afwegingen, ter vergelijking. Een andere uitdaging waarmee teams worden geconfronteerd, is dat voor veel sites hun tags van derden alleen in productie draaien, maar niet in hun ontwikkelomgevingen, waardoor het voor ontwikkelaars een grotere uitdaging wordt om ze te testen.

3. Netwerk : Omdat derden op verschillende locaties worden gehost, moeten browsers een groter aantal verbindingen maken om inhoud van hen te downloaden. De verschillende verbindingen kunnen het downloaden niet coördineren op basis van prioriteit, wat resulteert in netwerkconflicten. Dit kan het laden van de pagina verder vertragen als er geen rekening wordt gehouden met de juiste optimalisaties .

4. Sequencing : Derden kunnen de rode draad blokkeren en strijden met bandbreedte voor meer kritische bronnen. Dat gezegd hebbende, zijn derde partijen in sommige gevallen de cruciale bronnen die nodig zijn voor het weergeven van de pagina. Een optimale volgorde van de bronnen van eerste en derde partijen wordt noodzakelijk wanneer websites gebruik maken van meerdere derde partijen. Webontwikkelaars moeten zich bewust zijn van de verschillende beschikbare opties om de sequencing te optimaliseren.

Als gevolg van het bovenstaande kunnen derden invloed uitoefenen op (een) onderdeel van Core Web Vitals. Een meerderheid van de externe partijen heeft een negatieve invloed op Largest Contentful Paint (LCP) en First Input Delay (FID) . YouTube-embeds blokkeren de hoofdthread gedurende 4,5 seconden voor 10% van de websites op mobiel, en minstens 1,6 seconden voor 50% van de onderzochte websites. Stel je de frustratie van een gebruiker voor als hij een pagina tegenkomt met twintig van dergelijke scripts via een trage verbinding. De volgende visualisatie van thirdpartyweb.today toont derde partijen met de grootste prestatie-impact op dit moment.

"Op de ~4 miljoen sites zijn ~2700 origines verantwoordelijk voor ~57% van alle scriptuitvoeringstijd, terwijl de top 50 entiteiten al ~47% voor hun rekening nemen". - web van derden

Pagina's die snel worden weergegeven en binnen een redelijk tijdsbestek interactief worden, zijn essentieel voor een goede gebruikerservaring, zoals gemeten door de Core Web Vitals. Goede UX vertaalt zich vaak in goede zaken voor websites, wat kan betekenen dat er goede zaken worden gedaan voor derde partijen. Samenwerken om de impact van derden te verkleinen kan winst opleveren voor iedereen in de keten.

We erkennen dat Google een aantal veelgebruikte scripts van derden verkoopt, waaronder Google Tag Manager, YouTube-embeds en ReCaptcha, om er maar een paar te noemen. We erkennen dat een aantal van onze scripts een lichtere prestatie-impact kunnen hebben op de Core Web Vitals, en we zijn vastbesloten manieren te onderzoeken om deze impact waar mogelijk te verbeteren.

Hoe kan Chrome helpen?

Het feit dat bronnen van derden slecht presteren, is regelmatig een uitdaging voor ontwikkelaars, en vereist een stapsgewijze verandering in de onderliggende ecosysteemdynamiek. Chrome wil deze ruimte verkennen om de volgende resultaten te bereiken:

1. Vind betere manieren om bronnen van derden op internet te laden zonder dat dit ten koste gaat van de gebruikerservaring of bedrijfsresultaten.

   We weten dat we in deze inspanningen niet ver kunnen komen als we niet samenwerken met partners, bedrijven, derde partijen en ontwikkelaars. We willen een open veld creëren om de mogelijkheden te bespreken en ideeën uit te wisselen via openbare uitleggers en specificaties. Ontwikkelaars zullen tijd hebben om feedback te geven en de impact van veel van deze voorstellen te testen.

2. Zorg ervoor dat gebruikers van scripts van derden een betere toewijzing krijgen van hun kosten in tooling en in het veld, duidelijke, goed geplaveide paden voor het gebruik ervan en betere prikkels tijdens het schrijven om ervoor te zorgen dat ze standaard optimaal zijn.

   We willen alle lagen verbeteren, zoals user agents, frameworks en scripts van derden, om de prestatie-impact van derden te verminderen. We zijn ook van plan om voldoende inzichten te bieden om site-eigenaren te helpen best practices toe te passen rond elk ingebed script, inclusief snellere alternatieven waar van toepassing.

Voorgestelde benadering

Wij stellen een drieledige aanpak voor om deze resultaten te bereiken...

1. **Geef ontwikkelaars een diepere attributie van de impact van derden via RUM en in de ontwikkelaarstools van Chrome.**

   RUM verwijst naar gegevens over echte gebruikersstatistieken (ook wel veldgegevens genoemd) die beschikbaar zijn via API's voor het monitoren van webprestaties . De ontwikkelaarstools van Chrome omvatten Lighthouse, Chrome DevTools en het Chrome User Experience Report. We stellen voor om de beschikbare API's en tools te verbeteren, zodat site-ontwikkelaars de impact begrijpen van elke derde partij die ze op elke pagina hebben gebruikt. De tools zullen hen ook informeren over de acties die ze kunnen ondernemen om de impact te verzachten (bijvoorbeeld door deze uit te stellen of façades te gebruiken) en andere mogelijke oplossingen (andere derden of doe-het-zelf) met afwegingen te verkennen. Voor de API's voor het monitoren van webprestaties onderzoeken we manieren waarop we hun dekking van cross-origin-bronnen kunnen uitbreiden zonder de privacy en veiligheid van onze gebruikers in gevaar te brengen.

2. **Geef bedrijven een goed verlicht pad voor het efficiënt laden van bronnen van derden.**

   We willen graag nieuwe standaarden voorstellen die browsers aanmoedigen om op intelligentere wijze afwegingen te maken tussen de manier waarop bronnen van eerste en derde partijen worden geladen, in naam van een betere laadervaring voor gebruikers. Later zullen we enkele van deze voorstellen belichten, zoals het standaard lazy-loaden van insluitingen van derden, of het toepassen van verschillende bronnenprioriteit op bronnen van derden die misschien niet zo cruciaal zijn voor de initiële inhoud waar gebruikers het meest om geven. Dit is slechts een klein aantal van de ideeën die we op dit gebied evalueren en we zouden graag samenwerken met experts op het gebied van webprestaties en de bredere gemeenschap om dit werk vorm te geven.

   We zouden dergelijke problemen ook graag willen aanpakken in JavaScript-frameworks en Content Management Systemen (CMS), waar dit passender is. Projecten zoals Aurora en WordPress Performance Team hebben ons het belang geleerd van ingebouwde standaardinstellingen die bekende laadproblemen oplossen. Standaarden die zijn ingebakken in raamwerken en CMS begeleiden bedrijven langs een goed verlicht pad. Ze kunnen ook nuttig zijn voor de user-agent (bijvoorbeeld Chrome) als hints waarmee deze heuristieken kan toepassen om het laden van pagina's en CWV te optimaliseren. Dergelijke hints kunnen de user-agent helpen beslissen wanneer en hoe specifieke derde partijen moeten laden in de levenscyclus van de pagina. (De scriptcomponent Next.js heeft bijvoorbeeld een ingebouwde standaard om scripts van derden te laden nadat de pagina interactief wordt.)

3. **Geef derden prikkels om hun prestatie-impact te verminderen via betere transparantie-inspanningen.**

   Externe ontwikkelaars missen momenteel de zichtbaarheid die nodig is om de impact van hun scripts op sites als geheel te begrijpen. We zijn van plan dit probleem aan te pakken en deze aanbieders uit te rusten met hulpmiddelen om hun impact te analyseren en deze te vergelijken met andere producten op de markt die dezelfde waarde bieden. We willen hen ook helpen de gegevens te gebruiken om te diagnosticeren wat de impact veroorzaakt, zodat ze deze stroomopwaarts kunnen verzachten. Om te slagen zullen we alle derde partijen moeten inschakelen, inclusief de partijen die door Google zijn geschreven.

Uitdagingen

Een inspanning van deze omvang is niet zonder uitdagingen. Enkele van de belangrijkste uitdagingen waarmee we rekening moeten houden zijn:

• Derden vormen een horizontaal probleem waarbij advertenties, analyses, tagbeheer, hulpprogramma's en vele andere betrokken zijn. Bij elk gebied moet rekening worden gehouden met een unieke reeks vereisten en afwegingen. Bijvoorbeeld:
  • De beslissing om het laden van advertenties te optimaliseren hangt af van een afweging tussen opbrengst en gebruikerservaring. Te vroeg blokkeren ze waardevolle inhoud; te laat zou de gebruiker ze niet zien.
  • Analytics-scripts dragen bij aan het gewicht van de pagina, maar leveren waardevolle gegevens over gebruikersacties aan het bedrijf.

We hopen samen te werken met verschillende categorieën derde partijen, de betrokken nuances te begrijpen, compromissen op te lossen en prikkels te ontwikkelen die voor iedereen werken. We beseffen dat we afzonderlijk moeten samenwerken met entiteiten op elk gebied om onze strategie effectief te laten zijn. Dit geldt ook voor onze interne partners zoals Google Tag Manager, Google Ads en YouTube.

1. We willen een diepere attributie bieden aan zowel site-ontwikkelaars als externe ontwikkelaars. Dit vereist een gewetensvolle inspanning waarbij we identificeren welke gegevens het meest relevant zijn bij het meten van de impact, deze nauwkeurig en gedetailleerd toeschrijven en de juiste weg voorwaarts bieden. Uiteindelijk moet de berekening van hoe een bepaalde derde partij presteert ten opzichte van de concurrentie voor iedereen transparant zijn.

2. We stellen voor om Chrome te verbeteren, zodat het optimalisaties kan toepassen die helpen de juiste balans te vinden tussen het prioriteren van het laden van bronnen van eerste en derde partijen. Een waardevolle wijziging wordt standaard in alle browsers beschikbaar, maar dat kost tijd. Het loading voor <img> en <iframe> -elementen is bijvoorbeeld sinds 2019 beschikbaar in Chrome/Edge, maar werd pas in 2022 beschikbaar in Safari. Totdat een functie is gestandaardiseerd, zullen gebruikers van bronnen van derden ervoor moeten zorgen dat ze ook voor andere browsers hebben geoptimaliseerd. Wij helpen u door dit, waar relevant, in onze richtlijnen te benadrukken.

3. Om dit project uit te voeren, zullen we moeten samenwerken met partners en ontwikkelaars om ons niet alleen te helpen specifieke vereisten te begrijpen, maar ook om experimentele oplossingen op schaal te testen, feedback te geven, te herhalen en te improviseren waar en wanneer dat nodig is. De veranderingen zullen moeten worden gepland, waarbij een redelijk tijdsbestek voor testen en evaluatie wordt geboden.

Initiële standaardvoorstellen

We hebben enkele eerste experimenten uitgevoerd om functies te ontwikkelen die kunnen worden ingeschakeld om het laadproces van derden te optimaliseren. Wij zijn blij met de waargenomen resultaten en kunnen momenteel twee van deze kenmerken bespreken.

Luie Embedden

Chrome laadde voorheen <img> en <iframe> -elementen buiten het scherm voor onze Lite- modusgebruikers. Deze functie kan worden uitgebreid naar alle gebruikers om het laden van <iframe> -elementen waarvan is vastgesteld dat ze insluitingen van derden zijn, uit te stellen totdat de gebruiker er dichtbij scrollt. Dit kan het laden van andere delen van de pagina versnellen, Core Web Vitals verbeteren, het geheugengebruik verminderen en gegevens besparen.

Hier is een demo waarbij LazyEmbeds wordt gebruikt om YouTube-video's op een pagina te laden. Eén enkele YouTube-video-insluiting voegt doorgaans 500-600 KB JavaScript aan de pagina toe. We hebben geprobeerd een blogpost met 14 van dergelijke video-insluitingen te optimaliseren met behulp van LazyEmbeds. De resultaten waren veelbelovend wat betreft de laadtijd van de pagina en de gegevensbesparing.

Voor meer informatie over dit werk, zie onze uitleg- en blink-dev intent-to-experiment-thread en experiment-extensie .

Gerichte beperking door derden

Scripts van derden worden vaak door verschillende teams toegevoegd zonder holistische toezichtprocessen. Het technische team van The Telegraph verwoordde dat "iedereen 'die tag' wil op een pagina waarmee de organisatie geld kan verdienen". Dit kan de last van het beheersen van de impact op de prestaties voortdurend vergroten.

Gerichte scriptbeperking door derden stelt voor om zeer specifieke soorten derden te beperken om hun impact te verzachten. Hierdoor kunnen browsers belangrijke inhoud en belangrijke externe partijen vroegtijdig laden, terwijl de inhoud die veilig later kan worden geladen, wordt beperkt.

Verbetering van RUM API's

We overwegen ook om de RUM API's te verbeteren met informatie die relevant zou zijn bij het beoordelen van de prestaties van derden. Verbeteringen omvatten het volgende:

1. <iframe> -rapportage: we werken aan oplossingen die gebruik kunnen maken van de Performance Timeline API voor cross-frame rapportage. Hierdoor kunnen auteurs van de pagina op het hoogste niveau prestatiegegevens inspecteren voor een samenwerkend iframe van derden dat op de pagina is ingesloten.

2. Attributie van lange taken: De Long Tasks API in RUM helpt site-eigenaren bij het identificeren van lange taken die de rode draad voor een lange tijd in beslag nemen en de interactie vertragen.

Verdere updates

We experimenteren nog steeds met veel van dergelijke ideeën en hopen gaandeweg GitHub-uitleggers en specificatieconcepten voor wijzigingen te publiceren. Derde partijen en site-eigenaren die met ons willen samenwerken of feedback willen achterlaten, kunnen via deze bijdragen bijdragen aan discussies. Derden kunnen zich ook gaan concentreren op het optimaliseren van Core Web Vitals- en INP-statistieken om ervoor te zorgen dat slechte Core Web Vitals/INP-gegevens niet aan hen worden toegeschreven. Voor nu kunnen degenen die actief op zoek zijn naar updates verwijzen naar berichten in de blink-dev- groep.

We kijken ernaar uit om deze probleemruimte verder te verkennen en met de gemeenschap in gesprek te gaan over onze lessen.

Met speciale dank aan Leena Sohoni-Kasture, Jeremy Wagner, Gilberto Cocchi, Kenji Baheux, Kouhei Ueno, Kentaro Hara, Alex N. Jose, Melissa Mitchell, Yoav Weiss, Shunya Shishido en Minoru Chikamune voor hun feedback en bijdragen.