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

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 n’y a rien de plus frustrant que de cliquer quelque part sur la page sans obtenir les résultats de nos actions, n’est – ce pas? Pour vous assurer que votre site Web offre une expérience utilisateur exceptionnelle, vous devriez prêter attention aux indicateurs suivants, dont TTI. En tant qu’indicateur axé sur l’utilisateur, le temps d’interaction représente 10% du rendement global du phare. Ce n’est peut – être pas la mesure la plus influente du score final, mais les revers subis par l’utilisateur peuvent l’amener à quitter votre page ou pire: quitter votre site!
Nous expliquerons quand l’interaction a lieu, pourquoi elle est importante, quels outils peuvent être utilisés pour mesurer l’interaction et ce qui a une incidence sur le score de l’interaction. Nous partagerons également quelques conseils techniques pour corriger le mauvais temps de notation interactive (TTI plus de 3,8 secondes). Enfin, nous vous montrerons comment améliorer votre score global de performance et nous veillerons à ce que votre site ne semble pas endommagé. Qu’entend – on par temps d’interaction dans un phare? Le temps d’interaction mesure la vitesse à laquelle les visiteurs interagissent pleinement avec votre page. Il s’agit d’un indicateur de laboratoire important pour évaluer la réactivité de la charge, qui influe directement sur la perception du rendement et de l’interaction par les utilisateurs.
La métrique TTI mesure quand une page commence à charger jusqu’à ce que ses principales sous – ressources soient chargées et qu’elle réponde rapidement aux actions de l’utilisateur. En bref, TTI mesure la vitesse à laquelle une page exécute n’importe quel code JavaScript afin que le composant réponde rapidement à n’importe quelle action de l’utilisateur. Aide à déterminer quelle page semble interactive. Je vais t’expliquer.
Réactivité du site. Le TTI peut être calculé sans utilisateur réel, alors que le fid ne le peut pas.

Expliquez l’interactivité – Source: les développeurs n’aiment pas beaucoup les outils comme pagesspeed Insights et n’hésiteront pas à punir votre site en réduisant les performances. Poids de l’ITT sur la note du phare dans la note de rendement du phare V8, le poids de l’ITT a été réduit de 15% à 10%.

Lighthouse score calculatrice V8 (y compris TTI) – réseau. Pourquoi ce changement? Réticulum Dev explique qu’il répond directement aux commentaires des utilisateurs et que « les incohérences dans l’optimisation des mesures entraînent une amélioration de l’expé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 d’optimiser plus efficacement l’interaction utilisateur. Source: web.dev TTI mesure le temps qu’une page est prête à interagir: le temps que le thread JS principal est bloqué et le temps qu’il peut gérer les actions de l’utilisateur. Il s’agit d’une mesure de laboratoire importante parce qu’il définit si la page est disponible. Vous pouvez l’utiliser pour vous assurer que La page n’est pas disponible avant de vous 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. Qu’est – ce qui affecte le temps d’interaction? Voyons ce qui mène au score.
Avec l’aide de la section diagnostics de Google page speed Insights, le temps d’interaction 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 d’exécution JavaScript JS inutilisé main thread work Third Party Code en raison des sections « opportunité » et « diagnostic » du rapport phare, vous pouvez utiliser quelques conseils pour améliorer les scores globaux de performance.

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

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ù vous auriez besoin d’augmenter le score TTI: Éliminer le blocage du rendu ressources minimiser le travail du Thread de base réduire le temps d’exécution JavaScript supprimer les JS inutilisés réduire l’impact 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), vous pouvez réduire le temps de notation interactive. Toute bonne façon d’exécuter JS est susceptible d’améliorer TTI. Toujours prêter attention à l’ordre des ressources et aux préférences de chargement, ainsi qu’au nombre et à l’étendue des demandes. Si vous souhaitez déterminer le temps d’interaction et augmenter la vitesse globale du site WordPress, nous vous 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 l’appareil mobile. Delay JS Delay JS files means that they are loaded only after the browser shows the most important content. L’objectif est d’accélérer le chargement de la page en donnant la priorité au contenu à afficher en premier. Vous Réduirez le temps consacré à l’analyse, à la compilation et à l’exécution des fichiers JS, ce qui aidera à améliorer l’ITT. 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 vous 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 à télécharger en priorité sur la page. Tout ce que vous 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 vous donne un contrôle total sur les scripts que vous 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:

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 l’organisateur: modifie l’ordre de chargement du module externe (vous 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 l’expérience utilisateur). Gonzales: vous 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: vous permet de désactiver les plug – ins n’importe où en dehors des pages et des messages.

Retarder l’exé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 vous aider, vous 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, l’exécution de JavaScript est le facteur le plus important qui affecte les paramètres TTI. En retardant javascript avec WP Rocket, vous 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 vous 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:

Mon score de performance avant d’activer WP Rocket

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 l’utilisation de la fusée WP ont marqué: 95 \/ 100 vert: indice de vitesse, FCP, TBT, CLS et… TTI! Rappelez – vous que la section diagnostic et opportunité est pleine de questions rouges avant d’activer WP Rocket? Mon site Web ne fonctionne pas très bien et j’ai trouvé beaucoup de problèmes liés à js:

JS file Optimization Board: WP Rocket dashboard d Optimization
Et la documentation CSS, de la minimisation à l’optimisation de la livraison CSS:

Optimisation des fichiers CSS: WP Rocket dashboard j’ai également ajouté quelques URL pour le pré – Fetch et ma note a encore augmenté:

L’option de précharge de la route WP I utilise également la fonction de précharge des caractères de la route WP:

Listez les \

VPS et hébergement dédié: la différence que vous devez comprendre

Comment utiliser powerpress pour accueillir des podcasts via WordPress

Un guide pour débutants de 39 ans; API de repos woocommerce

L & # 39; Éditeur WordPress Gutenberg: vue d’ensemble complète

Les 50 meilleurs thèmes photos de WordPress (2021)

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 l’exécution des JS et en supprimant ou en réduisant les JS inutilisés, vous améliorerez les performances et votre score TTI. L’idée principale est de retarder le chargement de tous les fichiers JS jusqu’à ce qu’une 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 d’eau gtmetrix pour voir où le JavaScript est chargé. Le même diagnostic peut être obtenu avec PSI. Une fois la vérification effectuée, vous serez en mesure de déterminer si le « mauvais » JS provient de votre code ou d’une 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 d’utiliser 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 n’importe quelle fonction JS. La suppression manuelle des JS inutilisés peut être dangereuse pour votre site Web. Si vous enlevez un espace supplémentaire ou une autre parenthèse, les choses vont mal tourner. Si vous n’êtes pas un développeur avancé, je ne vous recommande pas de le faire manuellement. Utilisation du plugin wordpress:	Exemple: utilisez le plug – in de cache perfmatters WP Rocket pour supprimer l’élément JS inutilisé: une solution intégrée. En un seul clic, vous pouvez facilement retarder les fichiers JavaScript et supprimer (ou réduire) Les JS inutilisés.
J’ai marqué pour les rockets du WP.
		Problèmes découverts par Lighthouse et domaines à améliorer – après avoir activé WP Rocket en optimisant les performances PSI avec WP Rocket, j’ai également activé les options suivantes, comme recommandé dans la section précédente: optimiser les fichiers JS (retarder le chargement JS et retarder l’exécution JS)
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.