wordpress

Comment améliorer le temps d’interaction (TTI) sur WordPress

Antonio

Vous voulez savoir quand interagir et comment cela affecte la vitesse du site WordPress? Alors continuez à lire parce que nous voulons tous un site Web rapide et interactif. Il namp;rsquoy a rien de plus frustrant que de cliquer quelque part sur la page sans obtenir les résultats de nos actions, namp;rsquoest ce pas? Pour assurer que votre site Web offre une expérience utilisateur exceptionnelle, devriez prêter attention aux indicateurs suivants, dont TTI. En tant quamp;rsquoindicateur axé sur lamp;rsquoutilisateur, le temps damp;rsquointeraction représente 10% du rendement global du phare. Ce namp;rsquoest peut être pas la mesure la plus influente du score final, mais les revers subis par lamp;rsquoutilisateur peuvent lamp;rsquoamener à quitter votre page ou pire: quitter votre site!
Nous expliquerons quand lamp;rsquointeraction a lieu, pourquoi elle est importante, quels outils peuvent être utilisés pour mesurer lamp;rsquointeraction et ce qui a une incidence sur le score de lamp;rsquointeraction. Nous partagerons également quelques conseils techniques pour corriger le mauvais temps de notation interactive (TTI plus de 3,8 secondes). Enfin, nous montrerons comment améliorer votre score global de performance et nous veillerons à ce que votre site ne semble pas endommagé. Quamp;rsquoentend on par temps damp;rsquointeraction dans un phare? Le temps damp;rsquointeraction mesure la vitesse à laquelle les visiteurs interagissent pleinement avec votre page. Il samp;rsquoagit damp;rsquoun indicateur de laboratoire important pour évaluer la réactivité de la charge, qui influe directement sur la perception du rendement et de lamp;rsquointeraction par les utilisateurs.
La métrique TTI mesure quand une page commence à charger jusquamp;rsquoà ce que ses principales sous ressources soient chargées et quamp;rsquoelle réponde rapidement aux actions de lamp;rsquoutilisateur. En bref, TTI mesure la vitesse à laquelle une page exécute namp;rsquoimporte quel code JavaScript afin que le composant réponde rapidement à namp;rsquoimporte quelle action de lamp;rsquoutilisateur. Aide à déterminer quelle page semble interactive. Je vais tamp;rsquoexpliquer.
Réactivité du site. Le TTI peut être calculé sans utilisateur réel, alors que le fid ne le peut pas.

Lighthouse score calculatrice V8 (y compris TTI) – réseau. Pourquoi ce changement? Réticulum Dev explique quamp;rsquoil répond directement aux commentaires des utilisateurs et que « les incohérences dans lamp;rsquooptimisation des mesures entraînent une amélioration de lamp;rsquoexpérience des utilisateurs ».
« TTI reste un signal utile pour une interaction complète de la page, mais avec le TBT comme complément, la variabilité diminue. Avec le changement de score, nous espérons que les développeurs seront en mesure damp;rsquooptimiser plus efficacement lamp;rsquointeraction utilisateur. Source: web.dev TTI mesure le temps quamp;rsquoune page est prête à interagir: le temps que le thread JS principal est bloqué et le temps quamp;rsquoil peut gérer les actions de lamp;rsquoutilisateur. Il samp;rsquoagit damp;rsquoune mesure de laboratoire importante parce quamp;rsquoil définit si la page est disponible. Vous pouvez lamp;rsquoutiliser pour assurer que La page namp;rsquoest pas disponible avant de donner des conseils pratiques sur le maintien de TTI en dessous de 3. 8 secondes, nous devons définir la raison pour laquelle le score TTI est négatif. Quamp;rsquoest ce qui affecte le temps damp;rsquointeraction? Voyons ce qui mène au score.
Avec lamp;rsquoaide de la section diagnostics de Google page speed Insights, le temps damp;rsquointeraction a été augmenté. En général, nous avons quatre problèmes qui font que les scores TTI ne sont pas élevés, à savoir: le code JavaScript et le temps damp;rsquoexécution JavaScript JS inutilisé main thread work Third Party Code en raison des sections « opportunité » et « diagnostic » du rapport phare, pouvez utiliser quelques conseils pour améliorer les scores globaux de performance.

Comment le temps damp;rsquointeraction influe t il sur le rendement? Comme nous lamp;rsquoavons mentionné plus haut, un TTI élevé peut mener à une expérience utilisateur frustrante: lamp;rsquoutilisateur pense que le site est entièrement prêt, mais rien ne se passe lorsquamp;rsquoil essaie de cliquer sur un endroit.
Regardons un exemple réel de TTI (section orange ci dessous). Comme pouvez le voir, si le fil principal est inactif depuis environ 4 5 secondes, marquez la page comme entièrement interactive:

Expliquez lamp;rsquointeractivité – Source: les développeurs namp;rsquoaiment pas beaucoup les outils comme pagesspeed Insights et namp;rsquohésiteront pas à punir votre site en réduisant les performances. Poids de lamp;rsquoITT sur la note du phare dans la note de rendement du phare V8, le poids de lamp;rsquoITT a été réduit de 15% à 10%.

Section des possibilités et du diagnostic – le rapport sur les sources de l’isp indique l’incidence de chaque erreur sur les économies estimées La résolution de ces problèmes améliorera considérablement votre TTI et votre expérience utilisateur. Nous avons listé quelques conseils PSI au cas où auriez besoin damp;rsquoaugmenter le score TTI: Éliminer le blocage du rendu ressources minimiser le travail du Thread de base réduire le temps damp;rsquoexécution JavaScript supprimer les JS inutilisés réduire lamp;rsquoimpact du Code tiers éviter les requêtes critiques en série précharger les requêtes critiques tenir le compte Faible demande et faible transport réduit le temps de réponse du serveur

Alerte spoiler: Vous pouvez utiliser le plug in de fusée WP pour optimiser votre score TTI!

Comment améliorer TTI sur le site WordPress en optimisant les fichiers JS (y compris le Code de tiers), pouvez réduire le temps de notation interactive. Toute bonne façon damp;rsquoexécuter JS est susceptible damp;rsquoaméliorer TTI. Toujours prêter attention à lamp;rsquoordre des ressources et aux préférences de chargement, ainsi quamp;rsquoau nombre et à lamp;rsquoétendue des demandes. souhaitez déterminer le temps d’interaction et augmenter la vitesse globale du site WordPress, nous recommandons huit optimisations de performance. Retarder JS et réduire les JS inutilisés minimiser JS et CSS optimiser la publication CSS et réduire les CSS inutilisés réduire ttfb précharge DNS request précharge Character miles
TTI 1 sur lamp;rsquoappareil mobile. Delay JS Delay JS files means that they are loaded only after the browser shows the most important content. Lamp;rsquoobjectif est damp;rsquoaccélérer le chargement de la page en donnant la priorité au contenu à afficher en premier. Vous Réduirez le temps consacré à lamp;rsquoanalyse, à la compilation et à lamp;rsquoexécution des fichiers JS, ce qui aidera à améliorer lamp;rsquoITT. Exemples de JS non essentiels qui peuvent généralement être reportés: partage social, consentement aux cookies, etc. Problèmes trouvés par Lighthouse: supprimer les ressources de blocage de rendu, réduire le javascript inutilisé, et éviter les requêtes critiques en série. Solution manuelle: utilisez la propriété defer: Vous pouvez utiliser la propriété booléenne defer pour les balises de script HTML lorsque essayez de retarder js:

Propriétés de référence – Comment fonctionne la source: JavaScript. Solution plug in WordPress en anglais seulement: nettoyage des ressources: ce plug in gratuit scanne et détecte le contenu à en priorité sur la page. Tout ce que avez à faire est de choisir le code CSS ou JS qui ne devrait pas être affiché en premier. Remarque: l’auteur du plugin recommande d’utiliser le nettoyage des actifs avec des plugins de cache comme WP Rocket pour obtenir les meilleurs résultats de performance asynchrone js: async JavaScript donne un contrôle total sur les scripts que souhaitez ajouter l’attribut Delay pour améliorer la performance du site WordPress. WP Rocket a une option pour retarder l’analyse JavaScript et retarder les fichiers JS WordPress comme suit:

Mon score de performance avant damp;rsquoactiver WP Rocket

Optimisation des fichiers CSS: WP Rocket dashboard jamp;rsquoai également ajouté quelques URL pour le pré Fetch et ma note a encore augmenté:

Lamp;rsquooption de précharge de la route WP I utilise également la fonction de précharge des caractères de la route WP:

Charger la fonction de retard JS Source: tableau de bord du Rocket WP. Retarder les JS et réduire les JS inutilisés en retardant lamp;rsquoexécution des JS et en supprimant ou en réduisant les JS inutilisés, améliorerez les performances et votre score TTI. Lamp;rsquoidée principale est de retarder le chargement de tous les fichiers JS jusquamp;rsquoà ce quamp;rsquoune interaction ute se produise.
Nt, comme cliquer sur un bouton ou défiler vers la fin de la page. Un bon point de départ est de vérifier votre diagramme de chute damp;rsquoeau gtmetrix pour voir où le JavaScript est chargé. Le même diagnostic peut être obtenu avec PSI. Une fois la vérification effectuée, serez en mesure de déterminer si le « mauvais » JS provient de votre code ou damp;rsquoune application tierce. Problèmes trouvés par Lighthouse: Évitez les requêtes critiques de connexion et réduisez le javascript inutilisé. Solution manuelle: la méthode pour créer manuellement un délai dans JS est damp;rsquoutiliser la fonction settimeout (). Ceci appelle la fonction après le temps spécifié en millisecondes. Vous pouvez utiliser ces fragments de code très utiles pour retarder namp;rsquoimporte quelle fonction JS. La suppression manuelle des JS inutilisés peut être dangereuse pour votre site Web. enlevez un espace supplémentaire ou une autre parenthèse, les choses vont mal tourner. namp;rsquoêtes pas un développeur avancé, je ne recommande pas de le faire manuellement. Utilisation du plugin wordpress:

Script de vol: plug in pour retarder JS et fournir plus de ressources pour les fichiers JS critiques. Il aide à établir les priorités. Module externe de lamp;rsquoorganisateur: modifie lamp;rsquoordre de chargement du module externe ( aide à prioriser le contenu à présenter en premier). WP Meteor: un plug in qui retarde les scripts JS peut grandement améliorer la vitesse perçue par les visiteurs (importante pour lamp;rsquoexpérience utilisateur). Gonzales: permet de désactiver conditionnellement CSS, JS, et même les plug ins en fonction des pages visitées. Nettoyage des actifs (voir la section précédente). Perfmatters: permet de désactiver les plug ins namp;rsquoimporte où en dehors des pages et des messages.

Exemple: utilisez le plug in de cache perfmatters WP Rocket pour supprimer lamp;rsquoélément JS inutilisé: une solution intégrée. En un seul clic, pouvez facilement retarder les fichiers JavaScript et supprimer (ou réduire) Les JS inutilisés.

Retarder lamp;rsquoexécution JavaScript
Dans WP Rocket 3.9 3. Minimiser JS et CSS minimiser le code signifie éliminer toute confusion et ponctuation inutiles: nouvelles lignes, espaces, etc. Ces éléments peuvent aider, ou vos développeurs, à lire le Code, mais ils peuvent aussi ralentir votre site. La suppression de ce code
La partie na du tableau de bord WordPress
Rétablir ou retarder la stabilité et le rendu des scripts inutiles pour les sites mobiles. Par conséquent, vérifiez le javascript, Gardez la conception de la version mobile simple et évitez de surcharger les éléments lourds comme les curseurs. Comment utiliser WP Rocket pour réduire les scores TTI comme indiqué dans la section précédente, lamp;rsquoexécution de JavaScript est le facteur le plus important qui affecte les paramètres TTI. En retardant javascript avec WP Rocket, accélérerez la vitesse de votre site WordPress. Nous analysons les caractéristiques des fusées WP qui peuvent améliorer le niveau TTI. Analyse de l’impact de WP Rocket sur les scores TTI avec PSI afin d’améliorer vos scores TTI, nous recommandons d’utiliser WP Rocket, le meilleur plugin de mise en cache pour WordPress. Nous avons effectué un audit de vitesse dans un restaurant français appelé le point gourmand… Utilisez Google page speed Insights. Regardons nos scores de performance avant et après la fusée WP:

Jamp;rsquoai marqué pour les rockets du WP.

Les phares avant le lancement de la fusée WP ont marqué: 51 100 Orange: TTI = 7,0 secondes, TBT = 480 millisecondes rouge: indice de vitesse = 6,0 secondes, LCP = 7,1 secondes les phares après lamp;rsquoutilisation de la fusée WP ont marqué: 95 100 vert: indice de vitesse, FCP, TBT, CLS et TTI! Rappelez que la section diagnostic et opportunité est pleine de questions rouges avant damp;rsquoactiver WP Rocket? Mon site Web ne fonctionne pas très bien et jamp;rsquoai trouvé beaucoup de problèmes liés à js:

Problèmes découverts par Lighthouse et domaines à améliorer – après avoir activé WP Rocket en optimisant les performances PSI avec WP Rocket, jamp;rsquoai également activé les options suivantes, comme recommandé dans la section précédente: optimiser les fichiers JS (retarder le chargement JS et retarder lamp;rsquoexécution JS)

JS file Optimization Board: WP Rocket dashboard d Optimization
Et la documentation CSS, de la minimisation à lamp;rsquooptimisation de la livraison CSS:

En résumé, ma liste de vérification a été considérablement augmentée et des problèmes tels que minimiser JS, minimiser la tâche principale de thread, supprimer les JS inutilisés ou supprimer les ressources de blocage de rendu ont disparu en raison de la connexion WP Rocket.

Listez les

Related Posts

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

ContactPress Supported By WordPress Plugins