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 (Cumulative Layout Shift) (Elemente nicht verschieben)
4. Verzögerung der ersten Eingabe (Laden Sie nicht zu viele Daten) Der Browser im Hintergrund, der die ASYC verwaltet, funktioniert und führt daher 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 Komposition erneut durchgeführt 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. < Schlecht

FID:

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

CLS:-

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

*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, ist es besser, CDNS zu verwenden.
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)

<script src="/assets/js/abc.js" defer></script>
// For Other image tags / video links from I frame we can use intersection Observer to handle when the view port intersect with the element.





</p>
<p><strong>2. Bilder optimieren (sehr wichtig)</strong><br>
  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 </p>

<p>Es gibt 2 Ansätze </p>

<p>a. Verwenden Sie den Bildkompressor (tinyPng) (imagemin npm-Paket)<br>
B. Verwenden Sie eine Art srcset für verschiedene responsive Designs, wie unten erwähnt<br>
</p>

<pre class="brush:php;toolbar:false"><img
data-src="pic-1200.min.png"
src="" 
data-srcset=""
data-srcset="pic-600.png 600w, pic-900.png 900w, pic-1200.png 1200w"
sizes="(max-width: 600px) 600px, (max-width: 900px) 900px, 1200px"
/>

3. Reduzieren Sie den Anfrage-Overhead

Vorladen und Vorverbinden

<link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preload" href="/assets/css/index.css" />

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 zugewiesenem div ist
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 die Breite- und Höhenattribute angeben

Verbesserung der FID

a. Verschieben Sie nicht alles bis zum Ende, denn sagen wir mal, Ihr LCP ist fertig und der Benutzer versucht, mit der Benutzeroberfläche zu interagieren, aber da wir alles getan haben, verzögern Sie den Browser, bis er diese im Hintergrund lädt, also ist das keine gute Idee alles zum Aufschieben.

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!