Hier erfahren Sie, wie Sie langsame Interaktionen in den Felddaten Ihrer Website ermitteln, um Möglichkeiten zur Verbesserung des Interaction to Next Paint zu finden.
Felddaten sind Daten, die Aufschluss darüber geben, wie Nutzer Ihre Website tatsächlich erleben. Dabei werden Probleme hervorgehoben, die Sie mit den Labdaten allein nicht finden können. Beim Thema Interaction to Next Paint (INP) sind Felddaten wichtig, um langsame Interaktionen zu erkennen, und liefern wichtige Hinweise zur Behebung der Probleme.
In diesem Leitfaden erfahren Sie, wie Sie mithilfe von Felddaten aus dem Bericht zur Nutzererfahrung in Chrome (Chrome User Experience, CrUX) schnell die INP Ihrer Website bewerten und so feststellen können, ob es Probleme mit INP gibt. Anschließend lernen Sie, wie Sie mit dem Attributions-Build der Webvitals-JavaScript-Bibliothek und den neuen Erkenntnissen aus der Long Animation Frames API (LoAF) Felddaten für langsame Interaktionen auf Ihrer Website erfassen und interpretieren.
Mit CrUX die INP-Rate Ihrer Website auswerten
Wenn Sie keine Felddaten von den Nutzern Ihrer Website erfassen, ist CrUX ein guter Ausgangspunkt. CrUX erfasst Felddaten von echten Chrome-Nutzern, die dem Senden von Telemetriedaten zugestimmt haben.
CrUX-Daten werden in verschiedenen Bereichen angezeigt, und das hängt vom Umfang der gesuchten Informationen ab. Mit CrUX können Daten zu INP und anderen Core Web Vitals für folgende Zwecke bereitgestellt werden:
- Einzelne Seiten und gesamte Ursprünge mithilfe von PageSpeed Insights
- Arten von Seiten. Viele E-Commerce-Websites verfügen beispielsweise über die Typen „Produktdetailseite“ und „Produkteintragsseite“. In der Search Console können Sie CrUX-Daten für einzelne Seitentypen abrufen.
Als Ausgangspunkt können Sie die URL Ihrer Website in PageSpeed Insights eingeben. Nachdem Sie die URL eingegeben haben, werden gegebenenfalls Felddaten für mehrere Messwerte, einschließlich INP, angezeigt. Sie können auch die Ein-/Aus-Schaltflächen verwenden, um die INP-Werte für Dimensionen für Mobilgeräte und Computer zu prüfen.
Diese Daten sind hilfreich, da sie Ihnen zeigen, ob Sie ein Problem haben. Mit CrUX können Sie jedoch nicht ermitteln, was die Probleme verursacht. Es gibt viele RUM-Lösungen (Real User Monitoring), mit denen Sie Ihre eigenen Felddaten von den Nutzern Ihrer Website erfassen können, um diese Frage zu beantworten. Eine Möglichkeit besteht darin, diese Felddaten mithilfe der JavaScript-Bibliothek „Web-Vitals“ selbst zu erfassen.
Felddaten mit der JavaScript-Bibliothek web-vitals erfassen
Die web-vitals-JavaScript-Bibliothek ist ein Script, das Sie auf Ihrer Website laden können, um Felddaten von den Nutzern Ihrer Website zu erfassen. Sie können damit eine Reihe von Messwerten aufzeichnen, einschließlich INP in Browsern, die diese Funktion unterstützen.
Mit dem Standard-Build der Webvitals-Bibliothek kannst du grundlegende INP-Daten von Nutzern vor Ort abrufen:
import {onINP} from 'web-vitals';
onINP(({name, value, rating}) => {
console.log(name); // 'INP'
console.log(value); // 512
console.log(rating); // 'poor'
});
Wenn Sie die Felddaten Ihrer Nutzer analysieren möchten, senden Sie sie an einen anderen Ort:
import {onINP} from 'web-vitals';
onINP(({name, value, rating}) => {
// Prepare JSON to be sent for collection. Note that
// you can add anything else you'd want to collect here:
const body = JSON.stringify({name, value, rating});
// Use `sendBeacon` to send data to an analytics endpoint.
// For Google Analytics, see https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics.
navigator.sendBeacon('/analytics', body);
});
Diese Daten allein geben jedoch nicht viel mehr Aufschluss als CrUX. Hier kommt der Attributions-Build der Web-Vitals-Bibliothek ins Spiel.
Weitere Möglichkeiten mit der Attributionserstellung der Web-Vitals-Bibliothek
Der Attributions-Build der Web-Vitals-Bibliothek enthält zusätzliche Daten, die du von Nutzern vor Ort erhalten kannst. So kannst du problematische Interaktionen, die sich auf die INP-Datei deiner Website auswirken, besser beheben. Auf diese Daten kann über das attribution-Objekt zugegriffen werden, das in der onINP()-Methode der Bibliothek angezeigt wird:
import {onINP} from 'web-vitals/attribution';
onINP(({name, value, rating, attribution}) => {
console.log(name); // 'INP'
console.log(value); // 512
console.log(rating); // 'poor'
console.dir(attribution); // Attribution data
});
Zusätzlich zur INP-Datei der Seite selbst liefert die Attribution viele Daten, die Sie nutzen können, um die Gründe für langsame Interaktionen zu ermitteln, z. B. auf welchen Teil der Interaktion Sie sich konzentrieren sollten. So lassen sich wichtige Fragen beantworten, z. B.:
- „Hat der Nutzer mit der Seite interagiert, während sie geladen wurde?“
- „Wurden die Event-Handler der Interaktion lange Zeit ausgeführt?“
- „Wurde der Start des Interaktions-Event-Handler-Codes verzögert? Wenn ja, was war damals noch im Hauptthread passiert?“
- „Hat die Interaktion viel Rendering verursacht, wodurch das Rendern des nächsten Frames verzögert wurde?“
Die folgende Tabelle enthält einige der grundlegenden Attributionsdaten aus der Bibliothek, die Ihnen helfen können, einige allgemeine Ursachen für langsame Interaktionen auf Ihrer Website zu ermitteln:
attribution Objektschlüssel
|
Daten |
|---|---|
interactionTarget
|
Ein CSS-Selektor, der auf das Element verweist, das den INP-Wert der Seite erzeugt hat, z. B. button#save.
|
interactionType
|
Der Typ der Interaktion, entweder durch Klicken, Tippen oder Tastatureingabe. |
inputDelay*
|
Die Eingabeverzögerung der Interaktion. |
processingDuration*
|
Der Zeitraum zwischen dem Beginn der Ausführung des ersten Event-Listeners als Reaktion auf die Nutzerinteraktion und dem Abschluss der gesamten Ereignis-Listener-Verarbeitung. |
presentationDelay*
|
Die Darstellungsverzögerung der Interaktion, die beginnt, wenn die Event-Handler fertig sind, bis zu dem Zeitpunkt, an dem der nächste Frame gerendert wird. |
longAnimationFrameEntries*
|
Einträge aus dem LoAF, die mit der Interaktion verknüpft sind. Weitere Informationen finden Sie im nächsten Abschnitt. |
Ab Version 4 der Webvitals-Bibliothek erhalten Sie über die bereitgestellten Daten mit INP-Phasenaufschlüsselungen (Eingabeverzögerung, Verarbeitungsdauer und Präsentationsverzögerung) und der Long Animation Frame API (LoAF) noch tiefere Einblicke in problematische Interaktionen.
Long Animation Frame API (LoAF)
Das Debuggen von Interaktionen mit Felddaten ist eine schwierige Aufgabe. Mit den Daten von LoAF ist es nun jedoch möglich, einen besseren Einblick in die Ursachen langsamer Interaktionen zu erhalten, da LoAF eine Reihe von detaillierten Zeitangaben und anderen Daten zur Verfügung stellt, die Sie verwenden können, um genaue Ursachen zu ermitteln – und, noch wichtiger, die Ursache des Problems im Code Ihrer Website.
Der Attributions-Build der Web-Vitals-Bibliothek stellt ein Array von LoAF-Einträgen unter dem longAnimationFrameEntries-Schlüssel des attribution-Objekts bereit. In der folgenden Tabelle sind einige wichtige Daten aufgeführt, die in den einzelnen LoAF-Einträgen enthalten sind:
| LoAF-Eingabeobjektschlüssel | Daten |
|---|---|
duration
|
Die Dauer des langen Animationsframes bis zu dem Zeitpunkt, an dem das Layout abgeschlossen ist, ohne Malerei und Compositing. |
blockingDuration
|
Die Gesamtzeit in dem Frame, während der der Browser aufgrund langer Aufgaben nicht schnell reagieren konnte. Diese Blockierzeit kann lange Aufgaben umfassen, bei denen JavaScript ausgeführt wird, sowie nachfolgende lange Rendering-Aufgaben im Frame. |
firstUIEventTimestamp
|
Der Zeitstempel, der angibt, wann das Ereignis während des Frames in die Warteschlange gestellt wurde. Nützlich, um den Beginn der Eingabeverzögerung einer Interaktion zu ermitteln. |
startTime
|
Der Startzeitstempel des Frames. |
renderStart
|
Wann mit dem Rendering des Frames begonnen wurde. Dies schließt alle requestAnimationFrame-Callbacks (und ResizeObserver-Callbacks, falls zutreffend) ein, aber möglicherweise noch vor Beginn von Stil-/Layoutarbeiten.
|
styleAndLayoutStart
|
Bei Stil-/Layoutarbeit im Frame Dies kann hilfreich sein, um die Länge der Stil-/Layoutarbeit herauszufinden, wenn Sie andere verfügbare Zeitstempel finden. |
scripts
|
Ein Array von Elementen mit Skriptattributionsinformationen, die zur INP der Seite beitragen. |
blockingDuration).
All diese Informationen können Aufschluss darüber geben, was eine Interaktion langsam macht. Das scripts-Array, das LoAF-Einträge anzeigen, sollte jedoch von besonderem Interesse sein:
| Objektschlüssel für Skriptattribution | Daten |
|---|---|
invoker
|
Den Aufrufer. Dies kann je nach dem in der nächsten Zeile beschriebenen Aufrufertyp variieren. Beispiele für Aufrufer können Werte wie 'IMG#id.onload', 'Window.requestAnimationFrame' oder 'Response.json.then' sein. |
invokerType
|
Der Typ des Aufrufers. Kann 'user-callback', 'event-listener', 'resolve-promise', 'reject-promise', 'classic-script' oder 'module-script' sein.
|
sourceURL
|
Die URL zu dem Skript, von dem der Frame mit langer Animation stammt. |
sourceCharPosition
|
Die durch sourceURL angegebene Zeichenposition im Script.
|
sourceFunctionName
|
Der Name der Funktion im identifizierten Skript. |
Jeder Eintrag in diesem Array enthält die Daten aus dieser Tabelle. So erhalten Sie Informationen über das Skript, das für die langsame Interaktion verantwortlich war, und darüber, wie es dafür verantwortlich war.
Häufige Ursachen für langsame Interaktionen messen und identifizieren
Damit du eine Vorstellung davon erhältst, wie du diese Informationen nutzen kannst, wird in diesem Leitfaden jetzt erklärt, wie du LoAF-Daten aus der web-vitals-Bibliothek nutzen kannst, um die Ursachen für langsame Interaktionen zu ermitteln.
Lange Verarbeitungsdauern
Die Verarbeitungsdauer einer Interaktion ist die Zeit, die benötigt wird, bis die registrierten Event-Handler-Callbacks der Interaktion bis zum Abschluss ausgeführt werden, und alles andere, was dazwischen passieren könnte. Eine hohe Verarbeitungsdauer wird in der Bibliothek „Web-Vitals“ angezeigt:
import {onINP} from 'web-vitals/attribution';
onINP(({name, value, attribution}) => {
const {processingDuration} = attribution; // 512.5
});
Es liegt nahe, dass die Hauptursache für eine langsame Interaktion darin besteht, dass die Ausführung des Event-Handler-Codes zu lange gedauert hat. Das ist jedoch nicht immer der Fall. Sobald Sie bestätigt haben, dass dies das Problem ist, können Sie die LoAF-Daten genauer untersuchen:
import {onINP} from 'web-vitals/attribution';
onINP(({name, value, attribution}) => {
const {processingDuration} = attribution; // 512.5
// Get the longest script from LoAF covering `processingDuration`:
const loaf = attribution.longAnimationFrameEntries.at(-1);
const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
if (script) {
// Get attribution for the long-running event handler:
const {invokerType} = script; // 'event-listener'
const {invoker} = script; // 'BUTTON#update.onclick'
const {sourceURL} = script; // 'https://example.com/app.js'
const {sourceCharPosition} = script; // 83
const {sourceFunctionName} = script; // 'update'
}
});
Wie Sie im vorherigen Code-Snippet sehen können, können Sie mit LoAF-Daten arbeiten, um die genaue Ursache einer Interaktion mit hohen Werten für die Verarbeitungsdauer zu ermitteln, darunter:
- Das Element und der registrierte Event-Listener.
- Die Skriptdatei und die Zeichenposition darin, die den Ereignis-Handler-Code mit langer Ausführungszeit enthält.
- Der Name der Funktion.
Diese Art von Daten ist von unschätzbarem Wert. Sie müssen nicht mehr mühsam herausfinden, welche Interaktion oder welcher ihrer Event-Handler für hohe Werte für die Verarbeitungsdauer verantwortlich waren. Da Skripts von Drittanbietern häufig ihre eigenen Event-Handler registrieren können, können Sie außerdem feststellen, ob Ihr Code dafür verantwortlich war. Für den Code, über den Sie Kontrolle haben, sollten Sie sich über die Optimierung langer Aufgaben informieren.
Lange Eingabeverzögerungen
Auch wenn Event-Handler mit langer Ausführungszeit üblich sind, müssen andere Teile der Interaktion berücksichtigt werden. Ein Teil erfolgt vor der Verarbeitungsdauer. Dies wird als Eingabeverzögerung bezeichnet. Dies ist die Zeit vom Initiieren der Interaktion durch den Nutzer bis zu dem Moment, in dem die Callbacks für den Event-Handler ausgeführt werden und stattfindet, wenn der Hauptthread bereits eine andere Aufgabe verarbeitet. Der Attributions-Build der Web-Vitals-Bibliothek gibt Aufschluss über die Länge der Eingabeverzögerung für eine Interaktion:
import {onINP} from 'web-vitals/attribution';
onINP(({name, value, attribution}) => {
const {inputDelay} = attribution; // 125.59439536
});
Wenn Sie feststellen, dass einige Interaktionen hohe Eingabeverzögerungen aufweisen, müssen Sie herausfinden, was zum Zeitpunkt der Interaktion auf der Seite passierte, die die lange Eingabeverzögerung verursacht hat. Oftmals liegt dies daran, ob die Interaktion beim Laden der Seite oder danach aufgetreten ist.
Wurde die Seite beim Laden der Seite angezeigt?
Der Hauptthread ist oft am aktivsten, während eine Seite geladen wird. Während dieser Zeit werden verschiedene Aufgaben in die Warteschlange gestellt und verarbeitet. Wenn der Nutzer versucht, mit der Seite zu interagieren, während all dies geschieht, kann dies die Interaktion verzögern. Seiten, auf denen viel JavaScript geladen wird, müssen zuerst einmal damit arbeiten, Skripts zu kompilieren und auszuwerten, sowie Funktionen auszuführen, die eine Seite auf Nutzerinteraktionen vorbereiten. Das kann dazu führen, dass Nutzer mit der eigentlichen Interaktion interagieren, und Sie können herausfinden, ob dies auf die Nutzer Ihrer Website zutrifft:
import {onINP} from 'web-vitals/attribution';
onINP(({name, value, attribution}) => {
const {inputDelay} = attribution; // 125.59439536
// Get the longest script from the first LoAF entry:
const loaf = attribution.longAnimationFrameEntries[0];
const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
if (script) {
// Invoker types can describe if script eval blocked the main thread:
const {invokerType} = script; // 'classic-script' | 'module-script'
const {sourceLocation} = script; // 'https://example.com/app.js'
}
});
Wenn Sie diese Daten in das Feld eintragen und hohe Eingabeverzögerungen und Aufrufertypen von 'classic-script' oder 'module-script' feststellen, nehmen die Skripts auf Ihrer Website recht lange Zeit für die Auswertung und blockieren den Hauptthread so lange, dass Interaktionen verzögert werden. Sie können diese Blockierzeit reduzieren, indem Sie Ihre Skripts in kleinere Bundles aufteilen, anfangs nicht verwendeten Code auf ein späteres Laden verschieben und Ihre Website auf ungenutzten Code prüfen, den Sie vollständig entfernen können.
Wurde die Seite nach dem Laden der Seite angezeigt?
Eingabeverzögerungen treten zwar häufig beim Laden einer Seite auf, aber es ist genauso möglich, dass sie aus einer ganz anderen Ursache nach dem Laden einer Seite auftreten können. Häufige Ursachen für Eingabeverzögerungen nach dem Seitenaufbau können Code sein, der aufgrund eines früheren setInterval-Aufrufs regelmäßig ausgeführt wird, oder sogar Ereignis-Callbacks, die in der Warteschlange für eine frühere Ausführung stehen und noch verarbeitet werden.
import {onINP} from 'web-vitals/attribution';
onINP(({name, value, attribution}) => {
const {inputDelay} = attribution; // 125.59439536
// Get the longest script from the first LoAF entry:
const loaf = attribution.longAnimationFrameEntries[0];
const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
if (script) {
const {invokerType} = script; // 'user-callback'
const {sourceURL} = script; // 'https://example.com/app.js'
const {sourceCharPosition} = script; // 83
const {sourceFunctionName} = script; // 'update'
}
});
Wie bei der Fehlerbehebung bei hohen Werten für die Verarbeitungsdauer erhalten Sie auch bei hohen Eingabeverzögerungen, die auf die oben genannten Ursachen zurückzuführen sind, detaillierte Daten zur Skriptattribution. Der Unterschied besteht jedoch darin, dass sich der Aufrufertyp je nach Art der Arbeit ändert, die die Interaktion verzögert hat:
'user-callback'gibt an, dass die blockierende Aufgabe aussetInterval,setTimeoutoder sogar vonrequestAnimationFramestammt.'event-listener'gibt an, dass die blockierende Aufgabe von einer früheren Eingabe stammt, die in die Warteschlange gestellt wurde und noch verarbeitet wird.'resolve-promise'und'reject-promise'bedeutet, dass die blockierende Aufgabe auf eine asynchrone Arbeit zurückzuführen ist, die zuvor gestartet und zu einem Zeitpunkt behoben oder abgelehnt wurde, als der Nutzer versuchte, mit der Seite zu interagieren, wodurch die Interaktion verzögert wurde.
In jedem Fall geben Ihnen die Daten zur Skriptattribution einen Eindruck davon, wo Sie mit der Suche beginnen sollten und ob die Eingabeverzögerung auf Ihren eigenen Code oder das eines Drittanbieter-Skripts zurückzuführen ist.
Lange Verzögerungen bei der Präsentation
Verzögerungen bei der Präsentation entsprechen der letzten Meile einer Interaktion und beginnen, wenn die Event-Handler der Interaktion fertig sind, bis zu dem Punkt, an dem der nächste Frame gezeichnet wurde. Sie treten auf, wenn die Arbeit in einem Event-Handler aufgrund einer Interaktion den visuellen Status der Benutzeroberfläche ändert. Wie bei der Verarbeitungsdauer und der Eingabeverzögerung kann die Web-Vitals-Bibliothek Ihnen Aufschluss darüber geben, wie lang die Präsentationsverzögerung für eine Interaktion war:
import {onINP} from 'web-vitals/attribution';
onINP(({name, value, attribution}) => {
const {presentationDelay} = attribution; // 113.32307691
});
Wenn Sie diese Daten aufzeichnen und hohe Verzögerungen bei der Darstellung von Interaktionen feststellen, die zur INP Ihrer Website beitragen, können die Täter unterschiedlich sein. Hier sind einige Gründe, auf die Sie achten sollten.
Kostspielige Stil- und Layoutarbeiten
Lange Präsentationsverzögerungen können eine aufwendige Neuberechnung von Stilen und Layoutarbeiten sein. Diese können verschiedene Ursachen haben, z. B. komplexe CSS-Selektoren und große DOM-Größen. Du kannst die Dauer dieser Arbeit anhand der LoAF-Zeiten messen, die in der Web-Vitals-Bibliothek angezeigt werden:
import {onINP} from 'web-vitals/attribution';
onINP(({name, value, attribution}) => {
const {presentationDelay} = attribution; // 113.32307691
// Get the longest script from the last LoAF entry:
const loaf = attribution.longAnimationFrameEntries.at(-1);
const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
// Get necessary timings:
const {startTime} = loaf; // 2120.5
const {duration} = loaf; // 1002
// Figure out the ending timestamp of the frame (approximate):
const endTime = startTime + duration; // 3122.5
// Get the start timestamp of the frame's style/layout work:
const {styleAndLayoutStart} = loaf; // 3011.17692309
// Calculate the total style/layout duration:
const styleLayoutDuration = endTime - styleAndLayoutStart; // 111.32307691
if (script) {
// Get attribution for the event handler that triggered
// the long-running style and layout operation:
const {invokerType} = script; // 'event-listener'
const {invoker} = script; // 'BUTTON#update.onclick'
const {sourceURL} = script; // 'https://example.com/app.js'
const {sourceCharPosition} = script; // 83
const {sourceFunctionName} = script; // 'update'
}
});
LoAF sagt nichts über die Dauer der Stil- und Layoutarbeit für einen Frame, aber sie sagt Ihnen, wann der Vorgang begonnen hat. Mit diesem Startzeitstempel können Sie andere Daten aus LoAF verwenden, um eine genaue Dauer dieser Arbeit zu berechnen, indem Sie die Endzeit des Frames bestimmen und den Startzeitstempel der Stil- und Layoutarbeit von diesem Wert subtrahieren.
Lang andauernde requestAnimationFrame-Callbacks
Eine mögliche Ursache für lange Verzögerungen bei der Präsentation sind zu viele Aufgaben in einem requestAnimationFrame-Callback. Der Inhalt dieses Callbacks wird ausgeführt, nachdem die Event-Handler vollständig ausgeführt wurden, jedoch unmittelbar vor der Stilneuberechnung und Layoutarbeiten.
Die Ausführung dieser Callbacks kann viel Zeit in Anspruch nehmen, wenn die darin ausgeführte Arbeit komplex ist. Wenn du vermutest, dass hohe Werte für Präsentationsverzögerungen auf deine Arbeit mit requestAnimationFrame zurückzuführen sind, kannst du die LoAF-Daten der Web-Vitals-Bibliothek verwenden, um folgende Szenarien zu identifizieren:
onINP(({name, value, attribution}) => {
const {presentationDelay} = attribution; // 543.1999999880791
// Get the longest script from the last LoAF entry:
const loaf = attribution.longAnimationFrameEntries.at(-1);
const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];
// Get the render start time and when style and layout began:
const {renderStart} = loaf; // 2489
const {styleAndLayoutStart} = loaf; // 2989.5999999940395
// Calculate the `requestAnimationFrame` callback's duration:
const rafDuration = styleAndLayoutStart - renderStart; // 500.59999999403954
if (script) {
// Get attribution for the event handler that triggered
// the long-running requestAnimationFrame callback:
const {invokerType} = script; // 'user-callback'
const {invoker} = script; // 'FrameRequestCallback'
const {sourceURL} = script; // 'https://example.com/app.js'
const {sourceCharPosition} = script; // 83
const {sourceFunctionName} = script; // 'update'
}
});
Wenn du siehst, dass ein erheblicher Teil der Präsentationsverzögerungszeit für einen requestAnimationFrame-Callback aufgewendet wird, solltest du darauf achten, dass deine Arbeit in diesen Callbacks auf Arbeiten beschränkt ist, die eine tatsächliche Aktualisierung der Benutzeroberfläche zur Folge haben. Alle anderen Arbeiten, bei denen die DOM- oder Update-Stile nicht geändert werden, verzögern die Darstellung des nächsten Frames unnötigerweise. Seien Sie also vorsichtig.
Fazit
Felddaten sind die beste Informationsquelle, wenn es darum geht zu verstehen, welche Interaktionen für tatsächliche Nutzer vor Ort problematisch sind. Mithilfe von Tools zur Datenerhebung vor Ort wie der Webvitals-JavaScript-Bibliothek (oder einem RUM-Anbieter) können Sie besser einschätzen, welche Interaktionen am problematischsten sind, und dann problematische Interaktionen im Labor reproduzieren und sie dann beheben.
Hero-Image aus Unsplash von Federico Respini