Amélioration des performances des applications Web

Web Vitals

1. FCP (First Contentful Paint)(Réponse rapide)
2. LCP (Largest Contentful Paint)(aller droit au but)Grandes images/article
3. CLS (Cumulative layout Shift)(Ne déplacez pas les éléments)
4. Délai de première entrée (Ne chargez pas trop de données)Le navigateur en arrière-plan gérant Asyc fonctionne et à cause de cela, il met du retard

REMARQUE :-

Mise en page cumulative

1. Le mouvement qui impacte les éléments de la page, pendant toute la durée de vie du document que l'utilisateur voit.
2. De plus, cela coûte cher car la mise en page changera, puis il faudra refaire la mise en page, la peinture et la composition. Publiez également que s'il y a des pixels endommagés, le rendu sera à nouveau effectué

Marques 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 terrain (données utilisateur réelles) pour la surveillance des performances des applications

1. Light House (la surveillance des performances locales est spécifique en fonction des préférences de votre système)
2. https://developer.chrome.com/docs/crux/dashboard/
3. https://www.lightest.app/ (Comparez avec des applications similaires)
4. https://www.performancebudget.io/

Amélioration sur FCP :

1. Si vos utilisateurs sont éloignés du serveur, mieux vaut utiliser CDNS.
2. C'est le grand impact (peut également considérer gzip)

Amélioration du LCP

1. Différer les ressources à plus tard (différer/async dans le 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. 
 
2. Optimiser les images (très important)
 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 
 
il existe 2 approches 
 
a. utilisez le compresseur d'image (tinyPng) (package imagemin npm)
 b. utilisez une sorte de srcset pour diverses conceptions réactives, comme mentionné ci-dessous
 
 

        

         Copier après la connexion
        
       

3. réduire les frais généraux des demandes

préchargement et préconnexion

Améliorer CLS

1. Veuillez ne pas déplacer les éléments, c'est-à-dire la règle empirique
2. pour la publicité, nous devons mentionner qu'il s'agit de la hauteur maximale avec ledivalloué
3. Disons la bannière de cookies que nous pouvons corriger en bas. Il y aurait alors un avantage majeur par rapport à ce que nous montrons en haut et lorsque l'utilisateur clique sur Accepter et disparaître, notre structure de mise en page ne sera pas affectée
4. Nous pouvons cibler 0,01 (0,059) (CLS)(LightBox)
5. pour les balises d'image, nous pouvons spécifier lesattributs de largeur et de hauteur

Améliorer le 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érerle navigateur jusqu'à ce qu'il soit chargé en arrière-plan, donc ce n'est pas une bonne idée pour tous de différer.

Seulement les fichiers js ne sont pas requis immédiatement, nous pouvons les différer.

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!