Amélioration des performances des applications Web

Vitaux Web

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 pas déplacer 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 :-

Changement de mise en page cumulatif

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

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

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 du 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)

<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

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 le div alloué
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 les attributs de largeur et de hauteur

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!