Il y a beaucoup d’idées fausses sur les grands thèmes WordPress polyvalents comme Avada et le thème X et qu’ils pourraient amener votre site à se traîner. Il est vrai que la plupart des thèmes polyvalents sont accompagnés d’un certain gonflement (surtout lorsqu’ils sont couplés avec WooCommerce), mais lorsqu’ils sont optimisés correctement, ils peuvent se charger rapidement. Aujourd’hui, nous allons donc examiner en profondeur le thème WordPress polyvalent Total et voir à quelle vitesse nous pouvons le charger sur les serveurs de Kinsta. Il ne s’agit pas d’une revue de thème WordPress typique qui se contente d’énoncer les caractéristiques, nous allons mettre thème WordPress Total à l’essai !
- Qu’est-ce que le Thème WordPress Total ?
- Installation fraîche de WordPress
- Installer le thème WordPress Total
- Optimiser le thème WordPress Total
Thème WordPress Total
Tout d’abord, le thème WordPress Total est créé par l’équipe de WPExplorer, qui gère également un blog WordPress populaire que beaucoup d’entre vous ont probablement lu à un moment donné. Il est actuellement disponible sur ThemeForest pour 59$, et 12 mois de support pour 17,63$ supplémentaires. C’est un thème moderne et polyvalent qui peut facilement être utilisé pour tout type de site WordPress, des boutiques en ligne (il supporte WooCommerce), aux blogs, forums (il supporte bbPress), et même des sites de nouvelles. Quand il s’agit de grands thèmes polyvalents comme celui-ci, tout est possible. Si vous pouvez l’imaginer, vous pouvez le construire. Jetez un coup d’œil à certains des exemples concrets de sites utilisant le thème Total. Les sites Total sont de toutes formes et de toutes tailles. Si vous vous demandez si un site utilise le thème Total, consultez notre outil de détection des thèmes WordPress.
Fonctionnalités
Puisqu’il s’agit d’un thème polyvalent, il a beaucoup de fonctionnalités ! Nous ne les aborderons pas toutes, mais voici quelques éléments importants à connaître :
- Compatible avec WPML – facilite grandement la traduction
- Générateur de pages en glisser-déposer (Visual Composer) avec plus de 90 blocs de construction
- Inclut Revolution, Layer sliders et les types de publication personnalisé.
- Compatible avec le thème enfant et le support RTL
- Optimisé pour le référencement, compatible avec tous les navigateurs et totalement réactif pour une indexation mobile-first
- Plus de 40 démos pré-construites avec des données de démo XML pour vous aider à démarrer rapidement.
- Personnalisation du thème avec plus de 300 options, il est facile de tout changer comme les polices Google
- Compatible avec toutes les extensions WordPress populaires tels que Yoast SEO
- Mises à jour gratuites des thèmes et supporté directement par les développeurs
Installation fraîche de WordPress
Nous avons commencé par une nouvelle installation WordPress sur Kinsta (localisée sur Central US Google Cloud) avec le thème par défaut Twenty Seteen installé. SSL est configuré et HTTPS est activé. Nous voulions d’abord faire quelques tests pour savoir exactement combien de temps de chargement le thème Total ajoute. Nous avons lancé 5 tests de vitesse sur Pingdom et avons pris la moyenne. Comme vous pouvez le voir ci-dessous, notre installation se charge en 383 ms.
N’oubliez pas de consulter notre tutoriel sur le fonctionnement de Pingdom et la compréhension des analyses.
Installer le thème WordPress Total
La première chose que nous allons faire est d’installer le thème WordPress Total et d’importer les données d’exemple. Vous pouvez suivre leur documentation d’installation ou suivre nos étapes ci-dessous.
Étape 1
Vous pouvez acheter le thème WordPress Total sur ThemeForest. Dans ce tutoriel, nous utiliserons les données d’exemple pour nous permettre d’aller plus vite et nous choisirons de télécharger « Tous les fichiers et la documentation ».
Étape 2
Ensuite, dans votre tableau de bord WordPress, cliquez sur « Thèmes » sous Apparence. Cliquez sur « Ajouter » puis sur « Téléverser ». Vous sélectionnerez le fichier « Total.zip » dans le dossier du thème.
\themeforest-6339019-total-responsive-multipurpose-wordpress-theme\Total-3.6.0\Installable-Theme\Total.zip
Selon la vitesse de votre hébergeur WordPress, l’installation peut prendre quelques secondes.
Étape 3
Cliquez ensuite sur « Activer ».
Étape 4
Le thème Total nécessite quelques extensions à installer pour accéder à toutes les fonctionnalités incluses. Sélectionnez les extensions recommandés et cliquez sur « Installer ».
Step 5
Nous devons ensuite installer les données de démonstration. Sous « Importer la démo » cliquez sur le thème « Base Lite ». Vous pouvez choisir le thème « Base » mais ce n’est pas recommandé car il est très grand. La Base Lite est une version légèrement dépouillée.
Étape 6
Il vous sera alors demandé d’installer « WooCommerce ». Si vous ne l’utilisez pas, nous vous recommandons de le laisser désactivé car WooCommerce peut ajouter une charge inutile. Cependant, pour ce tutoriel, nous allons l’activer afin de pouvoir l’optimiser plus tard. Il suffit de cliquer dessus et il s’installera, puis de cliquer sur « Suivant ».
Étape 7
Si vous êtes sur une nouvelle installation, sélectionnez tout le contenu et cliquez sur « Confirmer l’importation ». Selon la vitesse de votre hébergeur WordPress, l’importation de tout le contenu peut prendre quelques minutes. Sur les serveurs de Kinsta, ça n’a pris qu’une vingtaine de secondes.
Et c’est tout ! Vos données de démo sont maintenant importées et votre site WordPress devrait maintenant ressembler à la démo de Base Lite comme indiqué ci-dessous.
Optionnel – Configurer WooCommerce
Si vous utilisez WooCommerce, vous serez invité à terminer l’assistant d’installation. Jetez un coup d’œil à notre tutoriel approfondi sur comment configurer WooCommerce. Nous avons configuré WooCommerce pour les exemples ci-dessous.
Optimiser le thème WordPress Total
Passons maintenant à la partie amusante ! Nous allons vous montrer comment optimiser un peu le thème WordPress Total. Tout d’abord, nous avons besoin d’une vitesse de base pour commencer. Donc nous avons fait 5 tests de vitesse sur Pingdom et avons pris la moyenne. Comme vous pouvez le voir ci-dessous, notre vitesse de base avec les données de démonstration installées a un chargement en 1,06 secondes, avec 54 requêtes HTTP, et une taille totale de page de 1,4 Mo.
Étape 1 – Synchroniser Google Analytics localement (facultatif)
Presque tout le monde utilise Google Analytics, il est donc juste que nous l’ayons configuré dans nos tests car 99% des personnes utilisant le thème Total ont probablement cette fonctionnalité. C’est ce que nous ferons aussi. L’extension gratuite Complete Analytics Optimization Suite vous permet de synchroniser votre script Google Analytic localement et peut à son tour accélérer légèrement les choses.
Nous disons que c’est facultatif parce que Google ne recommande pas officiellement cette méthode, cependant, nous l’avons utilisée sur quelques sites à fort trafic et elle fonctionne bien. En synchronisant localement le script de votre Google Analytic, vous pouvez contribuer à améliorer l’effet et la vitesse de mise en cache de votre navigateur, car le navigateur de l’utilisateur n’a pas besoin de faire un aller-retour pour télécharger le fichier depuis le serveur externe de Google. Voici un exemple ci-dessous de la différence avec l’extension ci-dessus installée. N’hésitez pas à l’essayer sur votre propre site et à faire vos propres tests.
Google Analytics normal installé
D’abord, on nous avons lancé 5 tests sur Pingdom avec Google Analytics installés normalement. Comme vous pouvez le constater, le simple ajout de Google Analytics ajoute environ 0,25 secondes à notre temps de chargement global et 4 requêtes HTTP supplémentaires. L’équipe de WPExplorer a fait un excellent travail sur le thème polyvalent Total car les temps de chargement sont assez rapides au départ. Et bien sûr, les serveurs de Kinsta sont fortement optimisés pour la performance. Kinsta utilise la mise en cache au niveau du serveur pour qu’il n’y ait pas besoin d’extension de mise en cache.
Google Analytics synchronisé localement
Ensuite, avec l’extension CAOS mentionnée ci-dessus, nous l’avons configuré pour synchroniser Google Analytics localement. Nous avons ensuite lancé 5 autres tests sur Pingdom. Cela porte le total de nos requêtes HTTP à 2 et le temps de chargement à 1,26 secondes. Ce n’est pas beaucoup, mais un peu plus rapide que la configuration normale de Google Analytics.
Etape 2 – Désactiver les intégrations
Si vous n’utilisez pas l’intégrations automatiques, la première chose à faire est de désactiver les intégrations. Ceci génère une requête HTTP supplémentaire sur votre site WordPress (voir ci-dessous) pour charger le fichier wp-embed.min.js. Et ça se charge sur chaque page.
Bien que ce fichier ne fasse que 1,2 Ko, les choses comme celles-ci s’accumulent avec le temps. La requête elle-même est parfois plus importante que la taille du téléchargement de contenu. La façon la plus simple de le faire est d’installer une extension gratuite appelée Disable Embeds.
Si vous êtes intéressé par d’autres moyens de le faire, consultez notre article détaillé sur comment désactiver les intégrations. Nous avons ensuite lancé 5 autres tests sur Pingdom. Cela porte notre total de requêtes HTTP à 1 et notre temps de chargement à 1,25 secondes. Encore une fois, n’oubliez pas que toutes ces choses s’additionnent.
Étape 3 – Supprimer les chaînes de requête des URLs
Un autre problème courant est le traitement des chaînes de requête. Vos fichiers CSS et JavaScript ont généralement la version du fichier à la fin de leur URL, comme https://domain.com/file.min.css?ver=4.5.3. Certains serveurs et serveurs proxy sont incapables de mettre en cache les chaînes de requête. Ainsi, en les supprimant, vous pouvez parfois améliorer votre mise en cache. Il existe des extensions gratuites comme Query Strings Remover qui peuvent le faire automatiquement dans WordPress.
Nous avons ensuite lancé 5 autres tests sur Pingdom. Comme vous pouvez le constater, cela n’a pas du tout amélioré notre vitesse, mais cela a amélioré notre niveau de performance. Il l’a fait passer de 93 à 99.
Consultez notre tutoriel détaillé sur comment supprimer les chaînes de requête des URLs
Étape 4 – Optimisation de l’image
L’étape suivante consiste à exécuter une optimisation d’image sur notre bibliothèque WordPress. C’est de loin l’une des optimisations les plus importantes que vous puissiez faire car les images représentent en moyenne plus de 60% du poids d’une page. Surtout si vous utilisez de grandes images dans votre diaporama sur le thème Total. Dans cet exemple, nous utilisons l’extension Imagify Image Optimizer de l’équipe de WP Rocket.
Dans l’extension, nous allons dans « Optimisation groupée » sous la bibliothèque. Nous laissons le niveau de compression par défaut sur l’option Agressif et cliquons sur « Imagifier tout ». Nous avons pu économiser 7,63 Mo sur 11,89 Mo ! Le tout en un seul clic.
Nous avons ensuite lancé 5 autres tests sur Pingdom. Cela nous a permis de réduire de nouveau notre temps de chargement et de réduire la taille globale de notre page de 30%, ce qui est énorme. Les images par défaut incluses dans les données d’exemple sont relativement petites au départ, de sorte que vous verrez facilement des gains de performance beaucoup plus rapides lorsque vous exécutez cette fonction sur un site en production non optimisé.
Étape 5 – Activer un CDN
L’étape suivante consiste à activer un réseau de diffusion de contenu (CDN) sur le site. Cela nous permet de servir notre contenu plus rapidement dans le monde entier.
Les clients de Kinsta peuvent utiliser le CDN de Kinsta qui est fourni avec leur installation. Cela, ainsi que la fonction de minification du code, est intégré directement dans le tableau de bord MyKinsta. Cela permet aux clients d’activer la minification automatique de CSS et JavaScript d’un simple clic, accélérant ainsi leurs sites sans aucun effort manuel.
Étape 6 – Désactiver les scripts inutiles sur la page d’accueil
Une autre façon d’accélérer le site est de désactiver les scripts inutiles de chargement sur la page d’accueil, et dans le reste du site. WooCommerce a quelques scripts qu’il n’est pas nécessaire de charger sur la page d’accueil. Et si vous n’utilisez pas la fonction lightbox, vous pouvez aussi la désactiver. Pour ce faire, nous utilisons l’extension premium Gonzalez qui nous permet de désactiver individuellement les scripts de notre choix, comme les suivants :
//wpdev.ink/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js //wpdev.ink/wp-content/plugins/woocommerce/assets/css/woocommerce.css //wpdev.ink/wp-content/themes/Total/assets/css/wpex-woocommerce-responsive.css //wpdev.ink/wp-content/themes/Total/assets/lib/ilightbox/minimal/ilightbox-minimal-skin.css
Nous avons ensuite lancé 5 autres tests sur Pingdom. Cela nous a ramené à un temps de chargement de 1,18 secondes et a réduit le nombre total de requêtes HTTP de 5.
Étape 7 – Optimiser la vitesse Slider Revolution
Nous ne sommes pas un grand fan des diaporamas, mais ils sont encore très utilisés. Heureusement, il y a quelques choses que vous pouvez faire dans les réglages de Slider Revolution pour l’accélérer. Nous vous recommandons d’activer les options « Insérer le JavaScript dans le pied de page » et « Différer le chargement de JavaScript ».
Nous avons ensuite lancé 5 autres tests sur Pingdom. Cela nous a amenés à un temps de chargement de 1,15 secondes.
Un problème que nous avons trouvé avec Slider Revolution est que par défaut, il ne chargera pas tous ses actifs du CDN. Nous avons constaté que les trois scripts suivants étaient encore en cours de chargement à partir de notre serveur d’origine :
https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.layeranimation.min.js https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.navigation.min.js
This is something that should probably be addressed with the developer of the plugin.
Se souvenir de HTTP/2
Il est également important de se rappeler qu’avec HTTP/2, la concaténation (combinaison) de vos scripts n’est plus nécessaire. Dans certains cas, cela peut même ralentir votre site. Pour le tester, nous avons installé l’extension gratuite Autooptimize, l’optimisation HTML/CSS/JS activée, ainsi que l’option CDN. Nous avons ensuite lancé 5 autres tests sur Pingdom. En fin de compte, cela n’a pas du tout aidé le site et c’est même avéré plus lent. Avec HTTP/2 et le parallélisme, il fait un excellent travail pour charger rapidement plusieurs petits fichiers. Cependant, si vous n’utilisez pas encore HTTPS, ce qui est nécessaire pour HTTP/2, l’extension Autoptimize peut beaucoup vous aider !
Résumé
Dans l’ensemble, nous avons été assez impressionnés par le thème WordPress Total de l’équipe de WPExplorer. Grâce aux serveurs rapides de Kinsta, même une nouvelle installation avec Google Analytics s’est effectuée en 1,26 secondes. Et une fois un peu optimisée, un temps de chargement de 1,15 secondes est très rapide pour un site avec WooCommerce installé ! Si cette revue thématique du thème WordPress Total a été utile, faites-le nous savoir ci-dessous dans les commentaires. Nous pourrions faire un autre plongeon profond dans le thème Avada ou le Thème X si vous voulez.
Brian a une grande passion pour WordPress, l'utilise depuis plus de dix ans et développe même quelques plugins de qualité. Brian aime les blogs, les films et les randonnées. Connectez avec Brian sur Twitter.
Laisser un commentaire