Vitaux Web
REMARQUE :-
Changement de mise en page cumulatif
Indices de référence
LCP :
bon < 2,5 secondes < Besoin d'amélioration < 4,0 secondes < Pauvre
FID :
bon < 100 M.sec ≪ Besoin d'amélioration < 300 M.sec ≪ Pauvre
CLS :-
bon < 0,1 seconde < Besoin d'amélioration < 0,25 s < Pauvre
*outils :- *
données de champ (données utilisateur réelles) pour la surveillance des performances des applications
Amélioration du FCP :
Amélioration du LCP
<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. Optimiser les images (très important)</strong><br> Comme je l'ai mentionné ci-dessus, nous chargeons même un peu ce dernier, mais certaines images font 2 Mo et ne sont pas nécessaires </p> <p>il existe 2 approches </p> <p>a. utiliser le compresseur d'image (tinyPng) (package imagemin npm)<br> b. utilisez une sorte de srcset pour diverses conceptions réactives, comme mentionné ci-dessous<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. réduire les frais généraux de la demande
préchargement et préconnexion
<link rel="preconnect" href="https://fonts.gstatic.com" /> <link rel="preload" href="/assets/css/index.css" />
Améliorer CLS
Amélioration du FID
a. Ne reportez pas tout à la fin, car disons que votre LCP est terminé et que l'utilisateur essaie d'interagir avec l'interface utilisateur, mais comme nous avons tout fait, différez le navigateur jusqu'à ce qu'il soit chargé en arrière-plan, ce n'est donc pas une bonne idée de le faire. tout à reporter.
Seulement les fichiers js non requis immédiatement peuvent être différés.
Référence :-
https://frontendmasters.com/courses/web-perf
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!