Comment améliorer Indice de vitesse sur WordPress (si)

by juin 2, 2022

Integgio? (zone verte)

10%

Le premier tableau heureux

0 – 2 secondes L’indice de vitesse est un indicateur de laboratoire important parce qu’il définit si la page est rapide ou lente.

Avant de vous donner quelques conseils techniques pour améliorer l’is, nous devrions, si nécessaire, déterminer une bonne note si basée sur Lighthouse. Cela nous amène à la section suivante: Seuil exponentiel de vitesse. Quel est le bon indice de vitesse? Un bon indice de vitesse doit être inférieur à 3,4 secondes.

Seuil si – Source: Web. Développer l’indice de vitesse et la première peinture satisfaisante si vous connaissez les dernières mises à jour des vitals Web de base, l’indice de vitesse peut ressembler à la première peinture satisfaisante KPI (FCP). Permettez – moi d’expliquer les principales différences et pourquoi les deux indicateurs sont importants.
La première peinture contextuelle est également une mesure visuelle qui mesure le temps avant que le navigateur n’affiche quoi que ce soit pour la première fois. L’index de vitesse décrit la vitesse à laquelle tout le contenu est affiché au – dessus de l’effondrement.

KPI FCP vs si – Source: fasterize, de sorte que peu importe comment vous Accélérez FCP, votre indicateur d’indice de vitesse est augmenté (il est préférable que l’utilisateur voit quelque chose plutôt qu’un écran blanc effrayant). Quel que soit l’indice de vitesse et le déplacement cumulatif de la disposition, la stabilisation du contenu au – dessus du pli et l’amélioration de l’interactivité aideront à maintenir un bon indice de vitesse. Pour mesurer la stabilité visuelle, Google utilise des décalages cumulatifs de mise en page (CLS) à partir des signaux d’expérience de page. CLS Measures Act
Votre site Web? Suivez notre guide complet qui explique comment améliorer la performance de Lighthouse sur WordPress.

Obtenir le niveau si en utilisant gtmetrix:

Indice de vitesse	10%	0 – 3,4 secondes
Le plus grand Pigment heureux	10%	0 – 2,5 secondes
Temps d’interaction	10%	0 – 3,8 secondes
Temps total de verrouillage	10%
Déplacement cumulé de la disposition	10%	0 – 0,1
	Formule de l’indice de vitesse: intervalle de temps * (1 – intégrité visuelle \/ 100)	< 200 ms
	Quels sont les outils disponibles pour mesurer l’indice de vitesse? Pour mesurer l’indice de vitesse et la performance globale, utilisez Google page speed Insights et gtmetrix, deux outils populaires basés sur la technologie Lighthouse. Utilisez Google page speed Insight (PSI) pour mesurer la mesure si:	Les deux outils offrent des scores si différents, mais ils sont dans la zone verte: score si (PSI): 0,8 seconde si (GT Metrix): 1,1 seconde

Les contrôles de performance ne sont pas toujours faciles. Consultez notre guide complet de test de performance et de vitesse pour le site WordPress. Il vous aidera à déterminer les outils nécessaires et les seuils acceptables pour chaque indicateur.

Chargement de la fonction de retard JS – Source: WP Rocket Asset Cleanup dashboard: ce plug – in gratuit scanne et détecte le contenu de la voiture
Retarder la JS et fournir des ressources supplémentaires pour les fichiers JS critiques. Aide à prioriser le contenu JS qui doit être chargé en priorité. WP Meteor: un plug – in qui retarde les scripts JS peut grandement améliorer la vitesse perçue par les visiteurs. Gonzales: vous permet de désactiver conditionnellement CSS et JS. Perfmaters: aide à accélérer le site en désactivant les scripts qui peuvent ne pas être utilisés.

Utilisez le gestionnaire de plug – in perfmaters pour retarder js: changez l’ordre de chargement du plug – in. Nettoyage des actifs: sélectionnez CSS \/ JS qui n’ont pas besoin d’être chargés. Plug – in de cache de Rocket WP: la meilleure solution transparente. Avec le plug – in WP Rocket, la fonction JS Delay est utilisée pour réduire les JS inutilisés. Il est facile de retarder un fichier JS en un seul clic:

Qu’est – ce qui affecte l’indice de vitesse? La raison du score si élevé peut être trouvée dans la section diagnostics de Google page speed Insights. En général, nous avons quatre problèmes majeurs qui conduisent à des scores si négatifs, c’est – à – dire: le code JavaScript et le temps d’exécution JavaScript JS inutilisé le thread principal fonctionne le Code tiers en raison des sections \
Ou le thread principal (minimisant l’activité du navigateur) réduit le temps d’exécution du JavaScript assure que le texte reste visible lors du chargement de webfont (en utilisant correctement des polices personnalisées) supprime les JS inutilisés réduit l’impact du Code tiers évite les requêtes critiques en série précharge des requêtes critiques maintien du nombre de clés Réduire les temps de réponse ttfb et serveur pour s’assurer que les images dans les fichiers sont téléchargées dans le bon format maintenant regardons comment les mettre en œuvre. Comment augmenter l’indice de vitesse: 8 conseils de performance pour augmenter l’indice de vitesse et la vitesse globale du site WordPress, il faut suivre huit techniques de performance, Par exemple: rafraîchir JS Delay JS et supprimer JS minimize JS et minimize CSS optimiser CSS publier et supprimer CSS optimiser les images inutilisées + retarder le chargement utiliser la compression de données utiliser CDN préchargé et optimiser les polices nous analyserons chaque police. 1. Recharger le fichier JS JS sera chargé après que le Navigateur affiche le contenu le plus pertinent. Cette procédure permet au navigateur de charger tout le contenu sans attendre le chargement du script. En référençant le fichier JS, vous pouvez également déterminer la priorité du type de contenu à afficher en premier. Dans notre cas, nous devrions nous concentrer sur tout ce qui se trouve au – dessus de l’effondrement: tous les JS inutiles sous l’effondrement devraient être retardés. Problèmes signalés par Lighthouse: supprimer les ressources de blocage de rendu, supprimer le javascript inutilisé et éviter les requêtes critiques en série. Retarder JavaScript utilise le plug – in populaire: WP Rocket a une option pour retarder les fichiers JS WordPress comme suit:

Retarde l’exécution JavaScript dans WP Rocket 3.9 3. Minimiser JS et CSS minimiser JS et CSS minimiser est le processus de suppression de tous les caractères inutiles du JavaScript sans changer sa fonctionnalité. En termes simples, minimiser le code signifie supprimer toute ponctuation inutile et toute confusion, comme les nouvelles lignes, les commentaires, les espaces, les points – virgules, etc. Réduire l’expansion libérera du temps pour la ligne principale. Encore une fois, il s’agit de créer de l’espace et du temps pour le contenu effondré ci – dessus. Problèmes trouvés par Lighthouse: réduire le temps d’exécution Javascript, minimiser le travail du thread principal, réduire JS, et réduire CSS. Voici quelques options à choisir. Minimiser manuellement le Code: important: il est recommandé de sauvegarder le site ou les fichiers à compresser. La meilleure pratique est de le faire dans un environnement de développement. Si vous n’êtes pas un expert technique, utilisez le plug – in. Utilisez un éditeur de texte comme sublize Text ou Visual Studio Code. Ouvrez le fichier contenant le Code et supprimez les commentaires, les espaces, les nouvelles lignes et les tirets.
Raccourcir autant que possible l’id, la classe ou le nom de la variable et optimiser les Instructions conditionnelles. Enregistrez à nouveau le fichier. Utilisez les outils en ligne pour minimiser le Code: Allez à minifycode. Com et ouvrez les onglets de votre choix: JS, css, HTML, etc. Collez le Code du fichier dans le champ principal et cliquez sur le bouton minimiser JS. JS Simplified Tool – Source: minifycode. Best JS and CSS Minimization Tools: Google Closure compiler, a reliable option to Analyze Javascript, Rewrite Code if necessary, and minimize JS later. Uglifyjs minimise, analyse et optimise le JavaScript. L’optimisation automatique est une option très populaire pour optimiser CSS et JS. L’outil de compression Yui de Yahoo est un outil de minimisation CSS et JavaScript. WP super minify combine, minimise et cache les fichiers JavaScript et CSS inline CSS Nano (CSS préprocesseur) csso (CSS préprocesseur) uncss (CSS préprocesseur) WP Rocket vous permet de minimiser les fichiers JS et CSS en quelques clics, comme suit: Fichiers JavaScript iconiques: tableau de bord WP Rocket

Fichier CSS iconique: tableau de bord WP Rocket 4. Optimiser la livraison de CSS et réduire l’inutilité de CSS WordPress est un énorme écosystème, et la plupart des auteurs de thèmes offrent de nombreuses options de mise en page et des effets de conception qui ont conduit à l’utilisation de nombreux CSS. En fait, nous avons tous besoin de CSS parce que c’est le Code qui définit le contenu Web. D’une part, nous ne voulons pas d’un mauvais site Web au XXIe siècle, mais en même temps, nous devons nous assurer qu’il fonctionne bien. Il s’agit de trouver un équilibre parfait et d’optimiser la façon dont CSS est affiché \/ livré sur la page. Les fichiers CSS peuvent affecter le temps de chargement du site et vous devriez résoudre ce problème pour améliorer les performances et les scores si. Examinons différentes stratégies pour optimiser la prestation
CSS. Problèmes trouvés par Lighthouse: minimiser le travail du fil principal, réduire les CSS inutilisés, supprimer les CSS de blocage de rendu. Solution manuelle: combiner, compresser et inline les scripts CSS – cela signifie que les pages ne chargent pas de fichiers CSS séparés. Au lieu de cela, la page contient toutes les informations de style requises pour la page (et ne charge pas les feuilles de style inutiles). Prioriser les règles CSS: le contenu au – dessus de l’effondrement doit d’abord être chargé. Supprimer \/ réduire manuellement les CSS inutilisés en scannant le Code. Plug – in WordPress disponible pour optimiser la livraison CSS: auto – Optimisation: il suffit d’activer la case à cocher optimiser le code CSS dans le tableau de bord WordPress. Accélérer – optimiser la livraison de CSS – Eh bien, c’est vraiment vrai! Plug – in de cache de Rocket WP: vous aide à optimiser la livraison de CSS en supprimant les CSS inutilisés directement de l’onglet optimisation de fichier. Si cette fonctionnalité ne vous convient pas, vous pouvez sélectionner la fonctionnalité de chargement asynchrone CSS.

Optimiser la livraison CSS – tableau de bord WP Rocket 5. Optimiser les images et utiliser la fonction de téléchargement lent vous devez optimiser les images du site parce qu’elles sont l’une des plus grandes pertes de temps de chargement. Heureusement, il existe des outils qui peuvent vous aider à les ajuster et à les comprimer sans perte de qualité significative. Une autre façon d’optimiser l’image est d’obtenir un chargement différé sur l’image. Il s’agit d’un ensemble de techniques qui permettent aux utilisateurs de retarder le téléchargement d’une image sur une page lorsqu’ils ont besoin de la voir. Problème déterminé par Lighthouse: image de la bonne taille: redimensionnez la grande image à la bonne taille. Cryptez l’image efficacement, ce qui signifie que vous devriez la compresser. Fournir des images de nouvelle génération: convertir JPEG \/ p
Izzo, un plugin wordpress, peut activer votre CDN: les fusées WP ont deux options: 1. Abonnement mensuel à rocketcdn $7.99. Le CDN configure automatiquement le reste des fonctions de la serrure WP, ce qui est très pratique. 2. Intégrez votre CDN directement dans le tableau de bord WordPress.

Deux options CDN sont affichées – Source: onglet CDN dans le tableau de bord WP Rocket 8. Précharger et optimiser les polices précharger les caractères signifie que vous « demandez » aux navigateurs de vos visiteurs de charger les caractères importants à l’avance et de retarder tous les caractères mineurs. L’indice de vitesse est basé sur ce qui se passe au – dessus de l’effondrement, de sorte que le précharge des caractères assure que le contenu visuel est correctement affiché aux visiteurs. Google n’aime pas que les polices de page personnalisées provoquent des changements soudains dans la mise en page. En fait, vos visiteurs peuvent faire face à deux problèmes majeurs: fout (aucun style appliqué, donc les polices ne sont pas attrayantes) fout (texte invisible et temps d’attente long pour voir les polices à l’écran) afin de maintenir une bonne expérience utilisateur et d’éviter cela, nous vous recommandons de précharger vos polices Web. Problèmes trouvés par Lighthouse: précharge des requêtes critiques et assurez – vous que le texte reste visible lors du chargement des polices Web. Précharger les polices avec une solution manuelle: Vous pouvez utiliser l’étiquette rel = \
Je suppose que si vous pensez que la fusée WP n’aide pas. Augmentez immédiatement la vitesse et les performances perçues par l’utilisateur!

Comment améliorer Indice de vitesse sur WordPress (si)

Leave a Reply Cancel reply