- PageSpeed Insights
Dies ist eine KI-übersetzte Version.
Zusammenfassung des Beitrags durch durumis AI
- Die Verbesserung der Website-Performance mithilfe von Tools zur Performance-Messung (PageSpeed Insights, Lighthouse) kann die Sichtbarkeit in Suchmaschinen verbessern. Dabei spielen die Web Core Vitals eine wichtige Rolle.
- Um die Metriken wie CLS, LCP, FCP und FID zu verbessern, können UI-Skeletons, Bildoptimierung, das Entfernen von Rendering-blockierenden Elementen, die Optimierung von Webfonts und die asynchrone Verarbeitung von JavaScript eingesetzt werden.
- Neben den verschiedenen Methoden zur Verbesserung der einzelnen Metriken werden auch weitere Technologien zur Steigerung der Website-Performance (z. B. Gzip-Komprimierung, Web Workers) vorgestellt. Künftig werden wir uns noch intensiver mit diesen Themen befassen.
Über die von Google bereitgestellte Website
kann die Web-Performance einfach gemessen werden.
https://pagespeed.web.dev/
Geben Sie die URL ein, um sie zu messen, oder installieren Sie Lighthouse als Chrome-Erweiterung, um die Messung durchzuführen.
Was sind die Vorteile der Verbesserung der Kennzahlen?
Sie können in Suchmaschinen besser gefunden werden. Durch SEO wird häufig Server-Side Rendering verwendet,
aber wenn die oben genannten Leistungskennzahlen niedrig sind, wird die Wirkung deutlich reduziert.
Wie kann man sie verbessern?
Auf der Website web.dev wird detailliert beschrieben, wie die einzelnen Kennzahlen verbessert werden können.
Insbesondere 3 Kennzahlen haben einen großen Einfluss auf die Punktzahl (Web Core Vitals).
Ich möchte die Dinge aufzeichnen, die ich versucht habe, um die Kennzahlen zu verbessern.
Wie misst man lokal?
export default () => { if (process.client && 'PerformanceObserver' in window) { let cumulativeLayoutShiftScore = 0; let largestContentfulPaint = 0; let firstInputDelay = 0; let firstContentfulPaint = 0;
// CLS const clsObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); entries.forEach((entry) => { if (!entry.hadRecentInput) { cumulativeLayoutShiftScore += entry.value; } }); }); // LCP const lcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const lastEntry = entries[entries.length - 1]; largestContentfulPaint = lastEntry.startTime; }); // FID const fidObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstInputDelay = firstEntry.processingStart - firstEntry.startTime; }); // FCP const fcpObserver = new PerformanceObserver((list) => { const entries = list.getEntries(); const firstEntry = entries[0]; firstContentfulPaint = firstEntry.startTime; }); clsObserver.observe({ type: 'layout-shift', buffered: true }); lcpObserver.observe({ type: 'largest-contentful-paint', buffered: true }); fidObserver.observe({ type: 'first-input', buffered: true }); fcpObserver.observe({ type: 'paint', buffered: true }); window.addEventListener('onload', () => { console.log('Final CLS Score:', cumulativeLayoutShiftScore); console.log('LCP:', largestContentfulPaint); console.log('FID:', firstInputDelay); console.log('FCP:', firstContentfulPaint); }); } };
Fügen Sie den obigen Code ein. Bei Nuxt fügen Sie ihn in die Plugins ein und überprüfen die Konsolenprotokolle.
Cumulative Layout Shift (CLS)
Dies ist ein Maß für die Änderung des Layouts während des Renderings.
Nehmen wir beispielsweise eine Seite an, die eine 400x400-Pixel-Bilddatei rendert, nachdem die Bild-URL über die API-Antwort empfangen wurde.
Die Position eines bestimmten Layouts wird sich aufgrund des Renderns des Bildes um 400 Pixel verschieben.
Dies ist eine unerwartete Verschiebung für den Benutzer, was nicht nur die UX beeinträchtigt, sondern auch den Browser indirekt bei der Bildschirmrendierung negativ beeinflusst.
Es gibt zwei einfache Möglichkeiten, dies zu verbessern.
1. UI-Skelett anwenden
- Die meisten Websites zeichnen ein Skelett entsprechend der Größe von Bildern oder Komponenten. Berücksichtigen Sie dies bei der Entwicklung des Bildschirms. In Vue wird v-if und v-else verwendet, um für jedes Element ein passendes Skelett zu zeichnen.
2. Höhe reservieren
- Wenn zu viele Stile in das Skelett eingefügt werden, kann dies die Wartung komplexer machen und kontraproduktiv sein. Bereits durch einfaches Reservieren der minimalen Höhe (min-height) des zu rendernden Elements kann eine Wirkung erzielt werden.
- Bei responsivem Webdesign usw., bei dem sich die Bildgröße je nach Gerät unterscheidet, ist es schwierig, die Höhe festzulegen. In diesem Fall können Sie das kleinste Gerät als Basis verwenden oder vh oder vw verwenden.
3. Breite und Höhe für das Bildelement angeben
- Die Breite und Höhe des Bildelements können wie folgt eingegeben werden.
<img src="image.jpg" width="400" height="400">
Auch wenn die tatsächliche Bildgröße nicht 400x400 Pixel beträgt, wird dem Browser die voraussichtliche Größe des Bildes mitgeteilt.
4. Verwendung von font-display: swap, um Layoutänderungen durch Webfonts zu verhindern
- Durch die Angabe eines Ersatzfonts wird ein Layoutversatz verhindert.
Largest Contentful Paint (LCP)
Dies ist die Zeit, die das größte Element auf dem Bildschirm benötigt, um gerendert zu werden. In der Regel handelt es sich um ein Bild, und intuitiv kann die Ladegeschwindigkeit verbessert werden.
1. Reduzieren Sie die Bildgröße.
- Überprüfen Sie, ob die Bildgröße nicht zu groß im Verhältnis zur Rendergröße ist.
- Optimieren Sie das Bildrendering mit Erweiterungen wie WebP. WebP ist bei Verwendung der verlustbehafteten Komprimierung etwa 30 % kleiner als das JPEG-Format und bei Verwendung der verlustfreien Komprimierung etwa 20 % kleiner als PNG.
- Lazy Loading kann in Betracht gezogen werden, bei dem das Laden je nach Bildlaufposition erfolgt.
2. Verwenden Sie Caching oder CDN.
3. Entfernen Sie Elemente, die das Rendern blockieren.
- Da die meisten Messwerte betroffen sind, müssen sie unbedingt entfernt werden. Der Browser lädt beim Rendern des Bildschirms zuerst die Skripts im Head-Tag und rendert sie dann. Daher sollten Sie überprüfen, ob die Skripts im Head-Tag (normalerweise externe Skripts) zuerst gerendert werden müssen. Durch die Verwendung von async- und defer-Tags können Sie diese einfach verwalten.
* Ich werde in einem späteren Beitrag mehr über die Attribute von Skripts im Head schreiben.
4. Minimieren Sie die Bundle-Größe.
- Unabhängig davon, ob die Bildrendern langsam ist, müssen Sie dies verbessern, wenn die Übertragung vom Server langsam ist.
Wenn Sie einen Proxy-Server wie Nginx verwenden, können Sie die GZIP-Komprimierung verwenden.
* Ich werde in einem späteren Beitrag mehr über die Nginx-Konfiguration schreiben.
First Contentful Paint (FCP)
Bezeichnet den Zeitpunkt, zu dem der erste Inhalt auf der Seite gerendert wird.
1. Entfernen Sie ebenfalls Elemente, die das Rendern blockieren.
2. Minimieren Sie die HTML-Größe.
- Wenn Sie wahllos div-Tags verwenden, wird eine stark verschachtelte Struktur erstellt und die Dateigröße erhöht sich.
3. Externe Webfonts können das Problem sein. Verwenden Sie aktiv font-display: swap; um die Standard-Schriftart zuerst zu rendern.
First Input Delay (FID)
Bezeichnet die Zeit, die der Browser benötigt, um die erste Eingabe des Benutzers auf der Seite (Klick, Scrollen usw.) zu verarbeiten. Manchmal reagiert ein Button nicht, aber es ist nicht unbedingt ein Fehler, sondern es wird möglicherweise auf die Antwort der API gewartet.
1. Verwenden Sie die Asynchronität effektiv, damit der JavaScript-Hauptthread nicht durch schwere Aufgaben blockiert wird.
2. Sie können einen Webworker verwenden, um eine andere Aufgabe neben dem Hauptthread auszuführen.
* Ich werde in einem späteren Beitrag mehr über Webworker schreiben.
Ich werde den Beitrag aufgrund der Beschränkung der Wortanzahl beenden.