In dieser Woche im Überblick: Kampf gegen wackelnde Layouts, einige Videos könnten ein wenig ruckeln, und eine neue Möglichkeit, Screenshots in Firefox zu machen.
Kommen wir zu den Nachrichten!
Identifizieren der Ursachen von Layout-Verschiebungen während des Seitenaufrufs
Sie können jetzt WebPageTest verwenden, um Layout-Verschiebungen zu erfassen, die auf Ihrer Website während des Seitenaufrufs auftreten, und um deren Ursachen zu identifizieren.
Schritt 1: Snippet einfügen
Fügen Sie den folgenden Snippet in die „Custom Metrics“ auf webpagetest.org im Feld im Reiter Custom (unter Advanced Settings) ein und stellen Sie sicher, dass ein Chrome-Browser ausgewählt ist.
[LayoutShifts]
return new Promise(resolve => {
new PerformanceObserver(list => {
resolve(JSON.stringify(list.getEntries().filter(entry => !entry.hadRecentInput)));
}).observe({type: "layout-shift", buffered: true});
});Schritt 2: Einträge inspizieren
Inspizieren Sie nach Abschluss des Tests die erfassten LayoutShifts-Einträge auf der Seite Custom Metrics, die Sie über den Abschnitt Details erreichen.
Schritt 3: Den Filmstreifen prüfen
Basierend auf den Zahlen für "startTime" und "value" in den Daten können Sie die Filmstreifenansicht von WebPageTest verwenden, um die einzelnen Layout-Verschiebungen zu lokalisieren und ihre Ursachen zu identifizieren.
(via Rick Viscomi)
Eine hohe Bitrate kann dazu führen, dass Ihre Videos stocken
Wenn Sie Videos für Ihre Website von Ihrem eigenen Webserver aus liefern, achten Sie auf die Video-Bitrate (der Autor empfiehlt FFmpeg und streamclarity.com). Wenn Ihr Video eine Bitrate von über 1,5 Mbit/s hat, kann die Wiedergabe für Personen mit 3G-Verbindungen ein- oder mehrmals stocken, abhängig von der Länge des Videos.
50 % der Videos in dieser Studie haben eine Bitrate, die höher ist als die Downlink-Geschwindigkeit einer 3G-Verbindung – das bedeutet, dass die Videowiedergabe verzögert wird und Aussetzer enthält.
(via Doug Sillars)
Der :screenshot-Befehl von Firefox
Die Entwicklerkonsolen-Konsole von Firefox enthält einen leistungsstarken Befehl zur Aufnahme von Screenshots der aktuellen Webseite. Ähnlich wie in den Chrome DevTools können Sie einen Screenshot eines einzelnen Elements, des aktuellen Ansichtsfensters oder der gesamten Seite aufnehmen. Der :screenshot-Befehl von Firefox bietet jedoch auch erweiterte Optionen zur Anpassung des Gerätedichte-Verhältnisses (Device Pixel Ratio) und zum Festlegen einer Verzögerung.
// capture a full-page screenshot at a device pixel ratio of 2
:screenshot --fullpage --dpr 2
// capture a screenshot of the viewport with a 5-second delay
:screenshot --delay 5(via Reddit)
Lesen Sie noch mehr Neuigkeiten in meiner wöchentlichen Sonntagsausgabe, die Ihnen jeden Montagmorgen per E-Mail zugestellt werden kann.
