Optimisation des performances Web
Optimisation des performances Web
[Link]
35 92
35
Performances
Les valeurs sont estimées et peuvent varier. Le calcul du
score lié aux performances repose directement sur ces
statistiques. Affichez la calculatrice.
0,7 s 7,8 s
7,4 s 500 ms
7,1 s 0
Afficher les audits pertinents pour : All FCP TBT LCP CLS
OPPORTUNITÉS
about:blank 1/20
06/04/2023 10:31 about:blank
Réduisez les ressources JavaScript inutilisées et différez le chargement des scripts tant qu'ils ne sont pas requis afin de
réduire la quantité d'octets consommés par l'activité réseau. En savoir plus LCP
Si vous n'effectuez pas de rendu côté serveur, divisez vos groupes JavaScript avec `[Link]()`. Sinon, divisez le
code en utilisant une bibliothèque tierce, telle que loadable-components.
Taille de Économies
URL
transfert potentielles
Les ressources textuelles doivent être diffusées compressées (Gzip, Deflate ou Brotli) pour réduire le nombre total d'octets
du réseau. En savoir plus FCP LCP
Taille de Économies
URL
transfert potentielles
about:blank 2/20
06/04/2023 10:31 about:blank
Taille de Économies
URL
transfert potentielles
Ces suggestions peuvent contribuer à charger votre page plus rapidement. En revanche, elles n'ont pas d'incidence directe sur le
score lié aux performances.
DIAGNOSTIC
Diffusez des éléments statiques grâce à des règles de cache efficaces — 12 ressources trouvées
Une longue durée de vie du cache peut accélérer les visites répétées sur votre page. En savoir plus
Cache de
Taille de
URL la valeur
transfert
TTL
about:blank 3/20
06/04/2023 10:31 about:blank
Assurez-vous que le texte reste visible pendant le chargement des polices Web
Avertissements :
Lighthouse n'a pas pu vérifier automatiquement les valeurs `font-display` pour l'origine [Link]
Lighthouse n'a pas pu vérifier automatiquement la valeur `font-display` pour l'origine [Link]
[Link].
Utilisez la fonction d'affichage de la police CSS afin que le texte soit visible par l'utilisateur pendant le chargement des
polices Web. En savoir plus FCP LCP
Économies
URL
potentielles
…v34/memvYaGs1….woff2 ([Link]) 70 ms
L'événement `unload` ne se déclenche pas de manière fiable, et son analyse risque d'empêcher les optimisations du
navigateur telles que la mise en cache des pages précédentes et suivantes. Utilisez plutôt les événements `pagehide` ou
`visibilitychange`. En savoir plus
Source
[Link]
[Link]
[Link]
Évitez d'énormes charges utiles de réseau — La taille totale était de 6 960 Kio
Les charges utiles des grands réseaux coûtent de l'argent réel aux utilisateurs et sont fortement corrélées aux délais de
chargement interminables. En savoir plus LCP
Taille de
URL
transfert
about:blank 4/20
06/04/2023 10:31 about:blank
Taille de
URL
transfert
Les chaînes de demandes critiques ci-dessous vous montrent quelles ressources sont chargées avec une priorité élevée.
Envisagez de réduire la longueur des chaînes et la taille de téléchargement des ressources ou de reporter le
téléchargement de ressources inutiles afin d'améliorer le chargement des pages. En savoir plus FCP LCP
Navigation initiale
/agent-desktop/ ([Link])
/css?family=Open+Sans:300,400,600,700 ([Link])
…2.0.2/[Link] ([Link])
…main-1.2.0/[Link] ([Link])
Réduisez au maximum le nombre de requêtes et la taille des transferts — 99 requêtes• 6 706 Kio
Pour définir des budgets liés à la quantité et à la taille des ressources de pages, ajoutez un fichier [Link]. En savoir
plus
about:blank 5/20
06/04/2023 10:31 about:blank
Il s'agit de l'élément identifié comme "Largest Contentful Paint" dans la fenêtre d'affichage. En savoir plus LCP
Élément
Issues detected. You are now running in degraded mode and some functionality mi…
<div class="Twilio">
Évitez les tâches longues dans le thread principal — 4 tâches longues trouvées
Indique les tâches les plus longues du thread principal, ce qui est utile pour identifier celles qui entraînent le plus de retard.
En savoir plus TBT
Heure de
URL Durée
début
about:blank 6/20
06/04/2023 10:31 about:blank
Heure de
URL Durée
début
Plus d'informations sur les performances de votre application. Ces chiffres n'ont pas d'incidence directe sur le score lié aux
performances.
Des ressources bloquent la première visualisation (first paint) de votre page. Envisagez de diffuser des feuilles JS/CSS
essentielles en ligne et de différer la diffusion de toutes les feuilles JS/de style non essentielles. En savoir plus FCP LCP
Diffusez des images de taille appropriée afin d'économiser des données mobiles et de réduire le temps de chargement. En
savoir plus
Envisagez de charger des images masquées ou hors écran après le chargement de toutes les ressources essentielles afin
de réduire le délai avant interactivité. En savoir plus
La réduction des fichiers CSS peut réduire la taille des charges utiles de réseau. En savoir plus FCP LCP
Si votre système de compilation réduit automatiquement la taille de vos fichiers CSS, assurez-vous de déployer le
build de production de votre application. Vous pouvez le vérifier avec l'extension React Developer Tools. En savoir
plus
La minimisation des fichiers JavaScript peut réduire la taille des charges utiles et la durée d'analyse des scripts. En savoir
plus FCP LCP
Si votre système de compilation réduit automatiquement la taille des fichiers JS, assurez-vous de déployer le build
de production de votre application. Vous pouvez le vérifier avec l'extension React Developer Tools. En savoir plus
Réduisez les règles inutilisées des feuilles de style et différez les ressources CSS non utilisées pour le contenu au-dessus
de la ligne de flottaison afin de réduire la quantité d'octets consommés par l'activité réseau. En savoir plus FCP LCP
about:blank 7/20
06/04/2023 10:31 about:blank
Les images optimisées se chargent plus rapidement et consomment moins de données mobiles. En savoir plus
Les formats d'image comme WebP et AVIF proposent souvent une meilleure compression que PNG et JPEG. Par
conséquent, les téléchargements sont plus rapides et la consommation de données est réduite. En savoir plus
Envisagez d'ajouter les indices de ressources `preconnect` ou `dns-prefetch` pour établir les premières connexions avec
des origines tierces importantes. Découvrez-en davantage. FCP LCP
Le temps de réponse initial du serveur était court — Le document racine a pris 130 ms
Le temps de réponse du serveur pour le document principal doit rester court, car toutes les autres requêtes en dépendent.
En savoir plus FCP LCP
Si vous êtes en train d'effectuer un rendu de composants React côté serveur, envisagez d'utiliser
`renderToNodeStream()` ou `renderToStaticNodeStream()` pour permettre au client de recevoir et d'hydrater
différentes parties du balisage au lieu de tout faire simultanément. En savoir plus
Les redirections entraînent des retards supplémentaires avant que la page ne puisse être chargée. En savoir plus FCP
LCP
Si vous utilisez React Router, réduisez au maximum l'utilisation du composant `<Redirect>` pour la navigation vers
des itinéraires.
Envisagez d'utiliser `<link rel=preload>` pour hiérarchiser la récupération des ressources actuellement requises pour le
chargement ultérieur de la page. En savoir plus FCP LCP
Utilisez HTTP/2
Le protocole HTTP/2 offre de nombreux avantages par rapport à HTTP/1.1, comme les en-têtes binaires et le multiplexage.
En savoir plus
about:blank 8/20
06/04/2023 10:31 about:blank
Les grandes images GIF sont inefficaces pour diffuser du contenu animé. Envisagez d'utiliser des vidéos MPEG4/WebM
pour les animations et PNG/WebP pour les images statiques au lieu d'images GIF afin d'économiser des octets réseau. En
savoir plus LCP
Supprimez les modules JavaScript volumineux et en double de vos groupes pour réduire les débits d'octets superflus sur le
réseau. TBT
Évitez d'utiliser de l'ancien code JavaScript dans les navigateurs récents — Économies potentielles de 1 Kio
Les polyfills et les attributs "transform" permettent aux anciens navigateurs d'utiliser les nouvelles fonctionnalités
JavaScript. Dans la majorité des cas cependant, ils ne sont pas nécessaires aux navigateurs modernes. Adoptez une
stratégie de déploiement de script moderne pour votre groupe JavaScript : utilisez la détection de fonctionnalité
module/nomodule pour réduire la quantité de code envoyée aux navigateurs modernes tout en continuant de prendre en
charge les plus anciens. En savoir plus TBT
Économies
URL
potentielles
…v2-alpha-0.0.21/flex-admin-
0,3 KiB
[Link] ([Link])
@babel/plugin-transform-
[Link].c…[Link]
classes
@babel/plugin-transform-
[Link].c…[Link]
regenerator
…0.0.5/[Link]?releaseSid=FK489d31c…
0,2 KiB
([Link])
@babel/plugin-transform-
/plugins/v1/plugin-f…61879fb9398bb86e9:2
classes
…0.0.36/[Link]?releaseSid=FK489d31c…
0,2 KiB
([Link])
@babel/plugin-transform-
/plugins/v1/plugin-f…61879fb9398bb86e9:2
classes
…0.0.8/[Link]?releaseSid=FK489d31c…
0,2 KiB
([Link])
@babel/plugin-transform-
/plugins/v1/plugin-f…879fb9398bb86e9:110
classes
about:blank 9/20
06/04/2023 10:31 about:blank
Préchargez l'image utilisée par l'élément LCP pour améliorer la durée de votre LCP. En savoir plus LCP
Un grand DOM sollicite davantage la mémoire, et entraîne de plus longs calculs de style et de coûteux ajustements de la
mise en page. En savoir plus TBT
Envisagez d'utiliser une bibliothèque de fenêtrage comme `react-window` pour réduire au maximum le nombre de
nœuds DOM créés si vous affichez de nombreux éléments répétés sur la page. En savoir plus Limitez également
autant que possible les nouveaux rendus inutiles avec `shouldComponentUpdate`, `PureComponent` ou
`[Link]`, et ignorez les effets jusqu'à ce que certaines dépendances aient changé si vous utilisez le hook
`Effect` pour améliorer les performances d'exécution.
path
Envisagez de doter votre application de l'API User Timing pour mesurer ses performances réelles lors d'expériences
utilisateur clés. En savoir plus
Utilisez React DevTools Profiler, qui utilise l'API Profiler, pour mesurer les performances de rendu de vos
composants. En savoir plus
Envisagez de réduire le temps consacré à l'analyse, la compilation et l'exécution de JavaScript. La livraison de charges
utiles JavaScript plus petites peut vous aider. En savoir plus TBT
…2.0.2/[Link]-
753 ms 610 ms 85 ms
[Link] ([Link])
about:blank 10/20
06/04/2023 10:31 about:blank
Unattributable 297 ms 51 ms 0 ms
…v2-alpha-0.0.21/flex-admin-
170 ms 139 ms 29 ms
[Link] ([Link])
Envisagez de réduire le temps consacré à l'analyse, la compilation et l'exécution de JavaScript. La livraison de charges
utiles JavaScript plus petites peut vous aider. En savoir plus TBT
Other 285 ms
Garbage Collection 26 ms
Rendering 11 ms
Réduire au maximum l'utilisation de code tiers — Le thread principal a été bloqué par du code tiers pendant 0 ms
Le code tiers peut affecter considérablement les performances de chargement des pages. Limitez le nombre de
fournisseurs tiers redondants, et essayez de charger du code tiers une fois le chargement de votre page terminé. En savoir
plus TBT
about:blank 11/20
06/04/2023 10:31 about:blank
…
24 KiB 0 ms
v23/S6uyw4BMUTPHjx4wXg.woff2 ([Link])
Segment 34 KiB 0 ms
Ressources tierces pouvant être chargées de façon différée avec des façades
Certaines intégrations tierces peuvent être chargées de manière différée. Vous pouvez envisager de les remplacer par une
façade tant qu'elles ne sont pas requises. En savoir plus TBT
Les images de la partie au-dessus de la ligne de flottaison qui ont un chargement différé sont rendues plus tard dans le
cycle de vie de la page, ce qui peut retarder Largest Contentful Paint. En savoir plus
La page utilise des écouteurs d'événements passifs pour améliorer les performances de défilement
Envisagez de marquer vos écouteurs d'événements tactiles et à la molette comme `passive` pour améliorer les
performances de défilement de votre page. En savoir plus
Évite [Link]()
Pour les utilisateurs rencontrant des problèmes de connexion lente, les scripts externes injectés dynamiquement via
`[Link]()` peuvent retarder le chargement des pages de plusieurs dizaines de secondes. En savoir plus
Les animations non composées peuvent être lentes et augmenter le CLS. En savoir plus CLS
about:blank 12/20
06/04/2023 10:31 about:blank
Indiquez une largeur et une hauteur explicites sur les éléments d'image afin de réduire les décalages de mise en page et
d'améliorer le CLS. En savoir plus CLS
Une balise <meta name="viewport"> ayant l'attribut width ou initial-scale est configurée
Un `<meta name="viewport">` optimise votre appli pour les tailles d'écrans de mobiles, mais empêche aussi un délai
d'entrée utilisateur de 300 millisecondes. En savoir plus TBT
92
Bonnes pratiques
GÉNÉRAL
Les erreurs enregistrées dans la console indiquent des problèmes non résolus. Ces derniers peuvent être dus à des
requêtes réseau qui ont échoué et à d'autres problèmes du navigateur. En savoir plus
Source Description
[Link] activated
[Link] activated
[Link] activated
[Link]- 06/04/2023 10:29:59 - initConversationsSDK: A connection error has been thrown from
[Link]- 06/04/2023 10:29:59 - initFlexSDK: Failed to init Flex SDK Original error: "FlexSDK -
[Link]- 06/04/2023 10:29:59 : FlexSDK - initialize: flex SDK client could not be initialized
[Link] Original error: "Twilsock connection error: Socket error: undefined (45511)"
about:blank 13/20
06/04/2023 10:31 about:blank
Source Description
[Link]- 06/04/2023 10:30:01 - initConversationsSDK: A connection error has been thrown from
[Link]- 06/04/2023 10:30:03 - initConversationsSDK: A connection error has been thrown from
[Link]/prov…
Failed to load resource: the server responded with a status of 400 ()
g/token-generator:1
[Link]-
Flex SDK failed to initialize. Telemetry events won't be enabled for this session
[Link]
[Link]-
PhoneState: error in getUserMedia DOMException: Permission denied
[Link]
[Link]-
WebSocket connection to '[Link] failed:
[Link]
[Link]-
WebSocket connection to '[Link] failed:
[Link]
[Link]-
WebSocket connection to '[Link] failed:
[Link]
[Link]-
WebSocket connection to '[Link] failed:
[Link]
[Link]-
WebSocket connection to '[Link] failed:
[Link]
[Link]-
WebSocket connection to '[Link] failed:
[Link]
[Link]-
WebSocket connection to '[Link] failed:
[Link]
[Link]-
WebSocket connection to '[Link] failed:
[Link]
[Link]-
WebSocket connection to '[Link] failed:
[Link]
about:blank 14/20
06/04/2023 10:31 about:blank
Toutes les bibliothèques JavaScript frontales détectées sur la page. Découvrez-en davantage.
Nom Version
React 17.0.2
Lo-Dash 4.17.21
Handlebar
4.7.7
s
Les mappages source traduisent le code minimisé pour obtenir le code source d'origine. Ce processus aide les
développeurs à effectuer le débogage en phase de production. De plus, Lighthouse est en mesure de fournir d'autres
renseignements. Envisagez de déployer des mappages source pour profiter de ces avantages. En savoir plus
…0.0.8/[Link]?releaseSid=FK489d31c…
…0.0.8/[Link] ([Link])
([Link])
…v2-alpha-0.0.21/flex-admin-
…v2-alpha-0.0.21/[Link] ([Link])
[Link] ([Link])
…0.0.5/[Link]?releaseSid=FK489d31c…
…0.0.5/[Link] ([Link])
([Link])
…0.0.36/[Link]?releaseSid=FK489d31c…
…0.0.36/[Link] ([Link])
([Link])
about:blank 15/20
06/04/2023 10:31 about:blank
… …
bundles/[Link].d0fc84c….js ([Link].c bundles/[Link].d0fc84c….[Link] ([Link]
om) [Link])
…bundles/ajs- …bundles/ajs-
[Link].2cd9e45….js ([Link]) [Link].2cd9e45….[Link] ([Link])
FIABILITÉ ET SÉCURITÉ
Une CSP (Content Security Policy) efficace réduit considérablement le risque d'attaques de script intersites (XSS). En
savoir plus
Directive script-src manquante. Elle permet d'exécuter des scripts non sécurisés. script-src Élevée
L'absence de object-src rend possible l'injection de plug-ins qui exécutent des scripts
object-src Élevée
non sécurisés. Envisagez de définir object-src sur "none" si vous le pouvez.
Requêtes HTTPS
Tous les sites doivent être protégés par le protocole HTTPS, même ceux qui ne traitent pas de données sensibles. Par
conséquent, vous devez éviter le contenu mixte, qui provoque le chargement de certaines ressources sur HTTP bien que la
demande initiale soit diffusée via HTTPS. Le protocole HTTPS empêche les intrus de détourner ou d’écouter passivement
les communications entre votre application et les utilisateurs. Il constitue également une condition préalable à l'utilisation de
HTTP/2 et de nombreuses nouvelles API de plates-formes Web. En savoir plus
Les utilisateurs se méfient des sites qui demandent leur position sans contexte. Envisagez plutôt d'associer la demande à
des actions de l'utilisateur. En savoir plus
Les utilisateurs se méfient des sites qui demandent à envoyer des notifications sans contexte. Envisagez plutôt d'associer
about:blank 16/20
06/04/2023 10:31 about:blank
Certains scripts tiers peuvent présenter des failles de sécurité connues, faciles à identifier et à exploiter par des pirates
informatiques. En savoir plus
Autoriser les utilisateurs à copier un contenu dans les champs de mot de passe
Empêcher la copie de contenu dans les champs de mot de passe nuit aux règles de sécurité. En savoir plus
Les dimensions d'affichage des images doivent correspondre au format naturel. En savoir plus
Pour que la clarté de l'image soit optimale, ses dimensions naturelles doivent être proportionnelles à la taille d'affichage et
au taux de pixels. En savoir plus
La spécification d'un attribut doctype empêche le navigateur de passer en mode quirks. Découvrez-en davantage.
La déclaration d'encodage des caractères est obligatoire. Elle peut être effectuée avec une balise `<meta>` dans les
1 024 premiers octets du code HTML, ou dans l'en-tête de réponse HTTP Content-Type. En savoir plus
Les problèmes enregistrés dans le panneau `Issues` des outils de développement Chrome indiquent des problèmes non
résolus. Ceux-ci peuvent être dus à des requêtes réseau qui ont échoué, à des contrôles de sécurité insuffisants ou à
d'autres problèmes du navigateur. Ouvrez le panneau "Issues" dans les outils de développement Chrome pour en savoir
plus sur chaque problème.
about:blank 17/20
06/04/2023 10:31 about:blank
Préchargez les polices `optional` pour que les nouveaux visiteurs puissent les utiliser. En savoir plus
PWA
Ces contrôles permettent de vérifier que les conditions requises pour les
progressive web apps sont remplies. Découvrez-en davantage.
POSSIBILITÉS D'INSTALLATION
Le fichier manifeste ou le service worker de l'application Web ne respectent pas les conditions d'installation requises
— 1 motif
Service worker est une technologie qui permet à votre application d'exploiter de nombreuses fonctionnalités propres aux
progressive web apps, comme le fonctionnement hors connexion, l'ajout à l'écran d'accueil et les notifications push.
Lorsqu'un service worker et un fichier manifeste sont correctement implémentés, les utilisateurs peuvent être invités à
ajouter votre application à leur écran d'accueil par le biais de leur navigateur. Cette fonctionnalité peut contribuer à une
hausse de l'engagement. En savoir plus
Motif de l'échec
OPTIMISATION PWA
Un service worker est une technologie qui permet à votre application d'exploiter de nombreuses fonctionnalités propres aux
progressive web apps, comme le fonctionnement hors connexion, l'ajout à un écran d'accueil et les notifications push.
Découvrez-en davantage.
Avec un écran d'accueil à thème, vous garantissez une expérience de qualité aux utilisateurs qui lancent votre application
depuis leur écran d'accueil. Découvrez-en davantage.
about:blank 18/20
06/04/2023 10:31 about:blank
Vous pouvez définir un thème assorti à votre site pour la barre d'adresse du navigateur. Découvrez-en davantage.
Si la largeur du contenu de votre application ne correspond pas à la largeur de la fenêtre d'affichage, il se peut que votre
application ne soit pas optimisée pour les écrans mobiles. Découvrez-en davantage.
Une balise <meta name="viewport"> ayant l'attribut width ou initial-scale est configurée
Un `<meta name="viewport">` optimise votre appli pour les tailles d'écrans de mobiles, mais empêche aussi un délai
d'entrée utilisateur de 300 millisecondes. En savoir plus TBT
Définissez un attribut `apple-touch-icon` afin d'optimiser l'affichage de votre progressive web app sur l'écran d'accueil des
appareils iOS. Il doit mener vers une image PNG carrée opaque de 180 ou 192 pixels. Découvrez-en davantage.
Une icône masquable empêche l'apparition de bandes noires (format letterbox) et assure que l'image remplit totalement
l'espace disponible lorsque l'application est installée sur un appareil. En savoir plus
Afin de toucher le plus grand nombre d'utilisateurs possible, les sites doivent fonctionner sur tous les principaux
navigateurs. Découvrez-en davantage.
La navigation entre les différentes pages du site doit être rapide et fluide
La navigation sur les pages doit être rapide et fluide, même pour les utilisateurs avec une connexion lente. C'est un critère
de performance fondamental pour les utilisateurs. Découvrez-en davantage.
Veillez à ce que les URL de vos pages puissent être utilisées dans des liens profonds. En outre, chaque URL doit être
unique afin de pouvoir être correctement partagée sur les réseaux sociaux. Découvrez-en davantage.
Ces contrôles font partie des vérifications de base de la checklist PWA, mais ne sont pas exécutés automatiquement par
Lighthouse. Même s'ils n'ont pas d'influence sur votre score, il est important de les effectuer manuellement.
Captured at 6 avr. 2023, 10:29 Émulation (ordinateur) with Chargement de page unique
UTC+2 Lighthouse 9.6.8
about:blank 19/20
06/04/2023 10:31 about:blank
about:blank 20/20