Leistungsverbesserung für Webanwendungen

Web Vitals

1. FCP (First Contentful Paint)(Response Quick)
2. LCP (Largest Contentful Paint)(auf den Punkt kommen)Große Bilder/Artikel
3. CLS (Kumulative Layoutverschiebung)(Elemente nicht verschieben)
4. Erste Eingabeverzögerung (Laden Sie nicht zu viele Daten)Brower im Hintergrund, der die ASYC-Funktionen verwaltet, führt zu Verzögerungen

HINWEIS:-

Kumulative Layoutverschiebung

1. Die Bewegung, die sich auf die Seitenelemente auswirkt, während der gesamten Lebensdauer des Dokuments, das der Benutzer sieht.
2. Außerdem ist dies kostspielig, da sich das Layout ändert und dann das Layout, die Farbe und die Zusammensetzung erneut erstellt werden müssen. Posten Sie außerdem, dass bei beschädigten Pixeln das Bild erneut gerendert wird

Benchmarks

LCP:

gut < 2,5 Sek. < Verbesserungsbedarf < 4,0 Sek. < Arm

FID:

gut < 100 M.sec < Verbesserungsbedarf < 300 M.sec < Arm

CLS:-

gut < 0,1 Sek. < Verbesserungsbedarf < 0,25 Sek. < Arm

*Werkzeuge:- *

Felddaten (tatsächliche Benutzerdaten) zur Überwachung der Anwendungsleistung

1. Light House (Die lokale Leistungsüberwachung hängt von Ihren Systempräferenzen ab)
2. https://developer.chrome.com/docs/crux/dashboard/
3. https://www.lightest.app/ (Vergleich mit ähnlichen Anwendungen)
4. https://www.performancebudget.io/

Verbesserung des FCP:

1. Wenn Ihre Benutzer weit vom Server entfernt sind, verwenden Sie besser CDNS.
2. Das ist die große Auswirkung (Gzip kann auch in Betracht gezogen werden)

Verbesserung des LCP

1. Ressourcen auf später verschieben (aufschieben/asynchron im Skript)

 // For Other image tags / video links from I frame we can use intersection Observer to handle when the view port intersect with the element. 
 
2. Bilder optimieren (sehr wichtig)
 Wie ich oben erwähnt habe, laden wir zwar etwas später, aber einige Bilder haben eine Größe von 2 MB und werden nicht benötigt 
 
Es gibt 2 Ansätze 
 
a. Verwenden Sie den Bildkompressor (tinyPng) (imagemin npm-Paket)
 B. Verwenden Sie eine Art srcset für verschiedene responsive Designs, wie unten erwähnt
 
 

        

         Nach dem Login kopieren
        
       

3. Reduzieren Sie den Anfrage-Overhead

Vorladen und Vorverbinden

Verbesserung des CLS

1. Bitte verschieben Sie keine Elemente, d. h. Faustregel
2. Für Werbung müssen wir erwähnen, dass dies die maximale Höhe mit zugewiesenemdivist
3. Nehmen wir das Cookie-Banner an, das wir unten reparieren können. Dann gäbe es einen großen Schub im Vergleich dazu, dass wir sie oben anzeigen, und wenn der Benutzer auf „Akzeptieren“ und „Verschwinden“ klickt, hat dies keine Auswirkungen auf unsere Layoutstruktur
4. Wir können 0,01 (0,059) (CLS)(LightBox) anstreben
5. Für Bild-Tags können wir dieBreite- und Höhenattributeangeben

Verbesserung der FID

a. Verschieben Sie nicht alles bis zum Ende, denn sagen wir, Ihr LCP ist fertig und der Benutzer versucht, mit der Benutzeroberfläche zu interagieren, aber wie wir alles getan haben,verschiebenSie den Browser, bis er diese im Hintergrund lädt, also ist es keine gute Idee, alles aufzuschieben.

Nur nicht sofort benötigte js-Dateien können wir zurückstellen.

Referenz:-
https://frontendmasters.com/courses/web-perf

Das obige ist der detaillierte Inhalt vonLeistungsverbesserung für Webanwendungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!