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 !

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.

total wordpress theme

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

total wordpress theme demo

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.

fresh wordpress install speed test

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 ».

download total wordpress theme

É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.

install total wordpress theme

Étape 3

Cliquez ensuite sur « Activer ».

activate total wordpress theme

É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 ».

install plugins

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.

install total theme demo data

É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.

import data total theme

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.

total wordpress theme base lite

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.

woocommerce setup wizard

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.

total theme base speed

É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.

complete analytics optimization suite plugin

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.

normal google analytics script

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.

local google analytics speed

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.

embed script wordpress

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.

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.

disable embeds speed test

É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.

query strings remover plugin

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.

remover query strings speed

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.

imagify image optimizer

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.

optimize wordpress media library

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é.

image optimization speed test

Étape 5 – Activer un CDN

L’étape suivante consiste à activer un (CDN) sur le site. Cela nous permet de diffuser notre contenu plus rapidement dans le monde entier. Dans cet exemple, nous utilisons KeyCDN sur le site. Nous avons ensuite lancé 5 autres tests sur Pingdom. Cela nous a amenés à un temps de chargement de 1,19 secondes.

cdn speed test

É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

disable scripts

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.

disable unnecessary scripts speed

É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 ».

slider revolution speed optimize

Nous avons ensuite lancé 5 autres tests sur Pingdom. Cela nous a amenés à un temps de chargement de 1,15 secondes.

optimize revolution slider speed

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 !

http2 scripts concatenate

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.

8
Partages