Test de performance : Les meilleures ventes de thèmes WordPress sur ThemeForest

La performance est l’un des aspects les plus importants de tout site web, mais c’est quelque chose que les gens semblent rarement prendre en compte lors de l’achat de thèmes WordPress. Dans ce comparatif, nous allons prendre dix Best-Sellers thèmes sur Themeforest, par ordre d’apparition, exécuter quelques tests de performances de base et les classeront de haut en bas.

Les thèmes choisis

La liste de ThemeForest des meilleures ventes de thèmes WordPress est mise à jour toutes les semaines, mais vous aurez souvent vu des joueurs avertis tenir les premières places pendant quelque temps. Nous avons pris le top dix (voir ci-dessous) et dénoyautés les uns contre les autres avec des tests de performance communs.

Les Tests

Il existe de nombreux outils disponibles pour les tests de sites web, nous avons choisi quelques classiques : Google Pagespeed Insights, Webpagetest.org, Pingdom et Chrome dev tools. La plupart donnera des informations comme à quelle vitesse une page web charge, son importance pondérale globale, à quel point efficacement ses actifs sont acheminés, en fin de compte, ce qui donne une sorte de score. Nous avons testé une démo de chacun des thèmes par le biais de ces outils et rassemblés les chiffres (voir tableau à la fin du post).

En plus de ces tests, nous avons utilisé le plugin Accessibility Audit pour les outils de dev de Chrome. Ce n’est pas lié à la performance en tant que tel, mais les résultats donnent toujours un aperçu de comment un thème s’articule.

Quelques points à noter :

• Ces démos sont toutes hébergées par les auteurs de chaque thème. Les spécifications d'hébergement ne sont pas toutes égales.
• Une démo aléatoire a été choisie où plusieurs options étaient disponibles. WooCommerce, BuddyPress ou tout autres plugins de la plateforme étaient évités si possible. Aucun thème ouvertement influencé par des images (tels que les portfolios de photographie) n'a été utilisé.
• Toutes les URL ont été testés à partir de la Californie, lorsque possible.
• Des résultats précis peuvent varier de jour en jour.
• Les démos de thème sont souvent construites pour faire un impact visuel, rempli d’images de haute qualité et avec autant de fonctionnalités que possible. Cela signifie que les démos sont rarement un reflet exact de la façon dont un site web qui en résulte pourrait apparaitre et se comporter. Il est probable qu'avec votre propre exemplaire, vous feriez de meilleurs scores de performance par rapport à toutes ces démos.

Avada

• Pagespeed insights mobile : 46%
• Pagespeed insights desktop: 48%
• Webpagetest.org : Tout en A, sauf un gros F sur la compression de l’image. AAAFA☑
• Pingdom : 91% (note A)
• Vitesse de chargement sur Pingdom : 1,94 s
• Poids de page outils dev de Chrome : 2.8Mb
• Audit d’accessibilité : 94% score (excellent). Attributs d’ARIA suivent les meilleures pratiques, les éléments sont bien structurés, les balises méta utilisées correctement.

Les images lourdes jouent un rôle énorme dans le faible score insights de pagespeed ; 77,2% du poids de la page étant attribué aux images. Fichiers tels que avada-creative-home1.jpg aurait pu être réduits de 344,6 Ko à ~ 40 Ko sans trop d’effort. Il est certainement juste de dire que, avec bon sens, votre propre installation de Avada pourrait faire beaucoup plus léger et plus rapide. Bien de voir que Avada est construit avec l’accessibilité à l’esprit.

The7

• Pagespeed insights mobile: 64%
• Pagespeed insights desktop: 91%
• Webpagetest.org : A à tous les niveaux. AAAAA☑
• Pingdom : 68% (note D)
• Vitesse de chargement de Pingdom : 1,51 s
• Poids de page outils dev de Chrome : 1,3 Mo
• Audit d’accessibilité : score de 83% (pas mal). Certains éléments de l’image sont manquants, les attributs alt, le rapport de contraste de couleur pourrait être mieux sur une partie du texte (par rapport à son arrière-plan). Mais dans l’ensemble, les éléments sont bien structurés et l’accessibilité est solide.

De manière générale, cette démo charge assez rapidement ; ses images et ses éléments ne sont pas trop lourds, et la page est utilisable relativement tôt lors du chargement. Pourtant, son grade de Pingdom n'est pas optimal. Des améliorations pourraient être faites en combinant aussi bien certains fichiers JavaScript, de même CSS, tandis que la mise en cache pourrait être facilitée en ne forçant ne pas les numéros de version sur les noms de fichiers (par exemple : /assets/css/settings.css?ver=5.4.5.2).

BeTheme

• Pagespeed insights mobile : 76%
• Pagespeed insights desktop : 87%
• Webpagetest.org : A à tous les niveaux. AAAAA☑
• Pingdom : 98 (note A)
• Vitesse de chargement de Pingdom : 1.27 s
• Poids de page outils dev de Chrome : 1,8 Mo
• Audit d’accessibilité : 80% est insuffisante sur le taux de contraste (il s’agit d’un thème sombre, en passe) et son utilisation imparfaite des rôles ARIA.

Ce thème se charge très rapidement. Beaucoup de son contenu visible est priorisé en incluant l’essentiel des styles en lingne dans le head, et une grande partie de ce qui est chargé est minimisée et concaténée. Comme c’est souvent le cas, les images se taillent la part du lion du poids de la page (69,5%), alors il ne serait pas difficile de ramener la page d’accueil de cette démo sous le seuil en or de 1Mb.

Impreza

• Pagespeed insights mobile: 63%
• Pagespeed insights desktop: 68%
• Webpagetest.org: FAABF☒
• Pingdom : 80% (note B)
• Vitesse de chargement de Pingdom : 2,34 s
• Poids de page outils dev de Chrome : 2,5 Mo
• Audit d’accessibilité : 94% (excellent). Utilisation correcte des attributs sur des éléments, y compris les rôles ARIA. Noms d’éléments discernables et contenu bien décrit.

Alors que la vitesse de chargement de la démo Restaurant de Impreza n’est pas mauvaise, ses scores de performance sont gênés par des images de plus de 2 Mo. Il faut également noter l’absence de CDN et le temps de réponse serveur médiocre ; deux aspects qui sont spécifiques à l’hébergement de cette démo et que vous pouvez facilement améliorer.

Enfold

• Pagespeed insights mobile: 60%
• Pagespeed insights desktop: 60%
• Webpagetest.org: AAADB☒
• Pingdom: 70% (note C)
• Vitesse de chargement de Pingdom : 2,79 s
• Poids de page outils dev de Chrome : 5,2 Mo
• Audit dl’accessibilité : 89%, un des plus haut score pour un thème démos sur l’accessibilité, montrant une force sous-jacente dans sa qualité de construction.

Encore une fois, aucun CDN utilisé pour l’hébergement de cette démo, qui perd quelques points sur webpagetest.org. Un manque de HTTPS peut également être responsable d'une marque noire à l'encontre de Enfold. Comme d’habitude, cette démo tombe dans le piège d’être aussi visuellement superbe que possible, sacrifiant le poids de la page, au profit de la qualité d’image. À plus de 5 Mo, c’est le poids lourd du peloton, mais la taille de l’image est toujours quelque chose de facilement résolu.

X

• Pagespeed insights mobile: 77%
• Pagespeed insights desktop: 74%
• Webpagetest.org: DFAAB☒
• Pingdom: 87% (note B)
• Vitesse de chargement de Pingdom : 2,45 s
• Poids de page outils dev de Chrome : 2,1Mb
• Audit d'accessibilité : 91% A score A11y très sain, abandonné seulement par l’absence d’attributs alt sur certaines images, faible taux de contraste sur certaines zones (ce thème religieux est tout à fait muet) et absence d’un attribut title sur un iframe. Pourtant, étant donné que l’iframe est d’un YouTube embed, qui ne vient pas avec un attribut title en standard, nous allons pardonner cet oubli.

Cette démo est une des rares qui fait un travail raisonnable de conserver la taille d'image jusqu'à un minimum ; webpagetest lui accorde un solide 97/100 pour la compression de l’image. Au lieu de cela, ses humbles scores viennent principalement de l’hébergement ; aucun CDN, pas de HTTPS, temps de réponse initial faible et un manque de « keep alive »– autrement connu comme une persistance connexion HTTP, quelque chose qui peut facilement être activé. Comme toujours, des améliorations faciles que vous pouvez vous-même mettre en place.

Bridge

• Pagespeed insights mobile: 70%
• Pagespeed insights desktop: 83%
• Webpagetest.org: DAAAF☒
• Pingdom: 85% (note B)
• Vitesse de chargement de Pingdom : 2,12 s
• Poids de page outils dev de Chrome : 1,6Mb
• Audit d’accessibilité : 91% (très bon). Petits points qui tirent le score global vers le bas, mais les attributs de l’ARIA suivent les bonnes pratiques et les éléments de la page ont des noms discernables, décrivent bien leur contenu et sont correctement structurés.

Une des démos les plus légères ici, mais le diaporama image va toujours tourner la manivelle du poids de la page vers le haut, même avec des images bien optimisées comme celles-ci. M'initier le HTML et autres actifs aurait aidé le score de insights pagespeed, et un hébergement amélioré ferait à nouveau faire des merveilles au temps de réponse – meilleur serveur, un CDN et cache étant les fruits mûr.

Flatsome

• Pagespeed insights mobile: 53%
• Pagespeed insights desktop: 57%
• Webpagetest.org: AAAAA☑
• Pingdom: 96% (note A)
• Vitesse de chargement de Pingdom : 1,02 s
• Poids de page outils dev de Chrome : 3,7Mb
• Audit d’accessibilité : 83% Points perdus au bord de la A11y en omettant de nommer les boutons correctement (l’icône liste de souhaits WooCommerce boutons ne peut pas être lue correctement par les lecteurs d’écran) et quelques liens sont tout aussi vagues. Faible contraste sur certains éléments et l’ID d’élément dupliqué, correctifs faciles également.

Il n'est pas vu à son avantage par Pagespeed Insights, bien que les autres indicateurs de score adorent Flatsome ! Un bon hébergement sert la page efficacement (auteurs de thème prennez note), les actifs sont réduits au minimum, et des images à chargement différé aident, ce qui serait autrement un chargement de la page de poids moyen progressivement.

Jupiter

• Pagespeed insights mobile: 38%
• Pagespeed insights desktop: 44%
• Webpagetest.org: AAAFA☑
• Pingdom: 92% (note A)
• Vitesse de chargement de Pingdom : 1,07 s
• Poids de page outils dev de Chrome : 3,3Mb
• Audit d’accessibilité : 91% (très bon). En raison du caractère percutant du graphisme (que j’adore, soit dit en passant), le texte sur certaines des images donne un ratio faible de contraste. La structure de la page et une utilisation descriptive des éléments, ainsi que l’usage correct ARIA rattrapent les lacunes de contraste.

Je vais sonner comme un disque rayé ici, mais cinq minutes d’optimisation de l’image permettraient de réduire considérablement les frais sur cette démo. home-bg-08.jpg seul pèse presque un mégaoctet entier ; un passage par TinyPNG rase 87% tout de suite. Pourquoi pas vous ? Comme Pingdom et Webpagetest le suggèrent, la plupart d’autres aspects de performances sont très bons.

Newspaper

• Pagespeed insights mobile: 76%
• Pagespeed insights desktop: 77%
• Webpagetest.org: AAAAA☑
• Pingdom: 93% (note A)
• Vitesse de chargement de Pingdom : 1,19 s
• Poids de page outils dev de Chrome : 1,5 Mo
• Audit d’accessibilité : 86% un bon score – pourrait être amélioré en décrivant correctement les liens et les boutons qui sont réellement utilisés pour les contrôles JavaScript, les cabillots et autres.

De supers scores dans tous les domaines, les améliorations standards s’appliquent (optimisation de l’image, compression/concaténation JS et CSS), mais gardez à l’esprit que cette démo est également livrée meublée avec un gros pull-out pour promouvoir d’autres versions du thème (complication supplémebtaire dont votre version propre serait peu susceptible d’avoir besoin). Sans trop d’effort cette démo pourrait entrer dans la catégorie de poids inférieur à - 1Mb.

Comment rendre vos thèmes WordPress plus rapides

Après avoir acheté un thème WordPress, comment pouvez vous l'optimiser ?

Cela ne vous étonnera pas : un simple premier port d’escale lors de l’optimisation de votre site web c'est vos images. Supprimer les images indésirables, compresser celles dont vous avez besoin, enregistrez les fichiers JPEG comme « progressif » (afin qu’il y ait au moins quelque chose à voir pendant le chargement) et vous serez sur un bon pied de départ. Vous pouvez également installer un plugin de chargement progressif pour amener les choses un peu plus loin. Nous avons vu que très peu de ces démos priorisent l'optimisation de l’image, mais ce qui au moins signifie que vous serez en mesure d’améliorer leurs scores.

Concernant les scores Pagespeed Insights notoirement volages, vous aurez remarqué que toutes ces (à une exception près) scorent mieux pour le desktop que leurs versions mobiles. Cela ne correspond plus à la façon dont le web est utilisé, donc pour garder Google (et les utilisateurs) heureux donner un examen attentif aux performances mobiles. Une attitude de mobile-first aidera aussi votre référencement.

Comment est-ce que vous pourriez faire cela ? Concaténation et minification des CSS et JavaScript peuvent être difficiles avec WordPress ; se servir de plugins tiers signifie que les fichiers peuvent être nombreux et vous n’aurez pas beaucoup contrôle sur eux sans aide. Pourtant, faire votre possible pour inclure des styles vitaux « initiale vue » en ligne dans le head rend votre site utilisable aussi rapidement que possible en empêchant les scripts « render-blocking » de ralentir le processus de chargement. Si le curseur en haut de votre page d’accueil nécessite que la page entière soit chargée avant, il s’avère que Google va vous pénaliser.

En outre, examiner votre hébergement. Activer la compression GZIP. HTTPS ne fera aucun mal non plus. Utilisez un service de mise en cache aussi ; l'installation et la configuration de W3 Total Cache sont un jeu d’enfant. Utilisez un CDN si votre contenu est destiné à un large public. Enfin, jetez un oeil à ces tutoriaux et cours pour plus de détails et d’aide sur le sujet :

Ressources pour la performance de WordPress

• Optimize Your Website Without AMP par Kezz Bracey
• Why (WordPress) Performance Matters par Rachel McCollin
  
• Speeding Up WordPress par Barış Ünver
  
• Optimizing Google PageSpeed to 100 in WordPress par Jeff Reifman
  
• How to Use WordPress Plugins Without Hurting Performance par Barış Ünver