Share
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 cette synthèse, nous allons passer en revue, par ordre d'apparition, les dix thèmes les plus vendus sur Themeforest, en effectuant quelques tests de performance de base, et voir quelles conclusions nous pouvons tirer..
La liste des thèmes WordPress les plus vendus chez ThemeForest est mise à jour chaque semaine, mais vous verrez souvent des joueurs familiers détenir les premières places pendant un certain temps. Nous avons pris le top dix (voir ci-dessous) et les avons comparés avec des tests de performance courants.
Thèmes WordPress les plus vendus - mis à jour chaque semaineIl existe de nombreux outils disponibles pour tester les sites Web. Nous avons choisi des classiques: Google Pagespeed Insights, Webpagetest.org, Pingdom et les outils de développement Chrome. La plupart feront des commentaires sur la rapidité avec laquelle une page Web se charge, son poids total, l'efficacité avec laquelle ses ressources sont redistribuées, pour finalement donner une sorte de score. Nous avons exécuté une démonstration de chaque thème à travers ces outils et rassemblé les chiffres (voir tableau à la fin du post).
En plus de ces tests, nous avons utilisé le plug-in Accessibility Audit pour les outils de développement de Chrome. Ce n'est pas lié à la performance en tant que telle, mais les résultats donnent toujours un aperçu de la construction d'un thème..
Quelques points à noter:
Avada: démo créativeExcellents scores à tous les niveaux. Les tests initiaux étaient moins puissants, mais ThemeFusion a pu améliorer considérablement les chiffres en optimisant les images utilisées dans cette démo. Le score de bureau de Pageview Insights est passé de 48% à 88% uniquement à l'arrière du poids de l'image, ce qui montre à quel point l'optimisation de l'image est importante! Heureux de voir qu'Avada est également conçu pour l'accessibilité.
The7: Démo de construction
Accentsconagua
alt attributs, le rapport de contraste des couleurs pourrait être meilleur 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 se charge assez rapidement. ses images et ses ressources ne sont pas trop lourdes et la page est utilisable relativement rapidement au chargement. Pourtant, sa note Pingdom n'est pas optimale. Des améliorations pourraient être apportées en combinant une partie du JavaScript, de même que le CSS, tandis que la mise en cache pourrait être facilitée en évitant d'imposer des numéros de version aux noms de fichiers (par exemple: /assets/css/settings.css?ver=5.4.5.2).
BeTheme: démo 3DCe thème se charge très rapidement. Une grande partie de son contenu visible est priorisée en incluant des styles essentiels en ligne dans la tête, et une grande partie de ce qui est chargé est minifiée et concaténée. Comme souvent, les images représentent la part du lion du poids de la page (69,5%), il ne serait donc pas difficile de placer la page d'accueil de cette démo sous le seuil minimal de 1 Mo.
Impreza: Démo de restaurantAlors que la vitesse de chargement de la démo de restaurant d'Impreza n'est pas mauvaise, ses performances sont gênées par plus de 2 Mo d'images. Il convient également de noter le manque de CDN et le temps de réponse du serveur médiocre; deux aspects qui sont spécifiques à l’hébergement de cette démo et ceux que vous pouvez facilement améliorer.
Enfold: démonstration de gymEncore une fois, aucun CDN n’est utilisé pour l’hébergement de cette démo, ce qui lui fait perdre quelques points sur webpagetest.org. Un manque de HTTPS aurait peut-être aussi valu à Enfold une marque noire. Comme d'habitude, cette démonstration tombe dans le piège d'être aussi belle que possible, sacrifiant le poids de la page pour la qualité de l'image. Avec plus de 5 Mo, c'est le poids lourd du groupe, mais il est toujours facile de remédier à la taille de l'image..
X: démo d'églisealt attributs sur certaines images, faible rapport de contraste sur certaines zones (le thème de cette église est assez sourdine) et absence de Titre attribuer sur un iframe. Néanmoins, étant donné que l'iframe provient d'une intégration YouTube, qui ne vient pas avec un attribut title en standard, nous allons pardonner cet oubli..Cette démo est l’une des rares à faire un travail raisonnable en minimisant les frais généraux d’image; webpagetest lui attribue un solide 97/100 pour la compression d'image. Au lieu de cela, ses faibles scores proviennent en grande partie de l'hébergement; pas de CDN, pas de HTTPS, un temps de réponse initial insuffisant et un manque de connexion persistante, également appelée connexion HTTP persistante, ce qui peut être facilement activé. Comme toujours, des améliorations faciles que vous pourriez apporter vous-même.
Bridge: démo de SpaUne des démonstrations plus légères ici, mais les curseurs d’image vont toujours augmenter le poids de la page, même avec des images bien optimisées comme celles-ci. Réduire au minimum le contenu HTML et d’autres ressources aurait aidé le score de pagespeed insights mobile, bien que le score de bureau soit extrêmement bon. Un meilleur hébergement ferait encore des merveilles: un temps de réponse du serveur, un CDN et la mise en cache plus faciles.
Flatsome: Démo Go ExplorePas vu par Pagespeed Insights, mais les autres indicateurs de score aiment absolument Flatsome! Un bon hébergement sert efficacement la page (les auteurs du thème en prennent note), les ressources sont minimisées et le chargement d'images paresseux aide ce qui serait autrement une charge de page de poids moyen progressivement.
Jupiter: modèle BellonaJe vais ressembler à un disque cassé, mais cinq minutes d’optimisation de l’image réduiraient considérablement les frais généraux de cette démo.. home-bg-08.jpg seul pèse presque un mégaoctet entier; Le faire passer par TinyPNG réduit immédiatement 87%. Pourquoi pas vous Comme Pingdom et Webpagetest le suggèrent, la plupart des autres aspects de la performance sont très bons.
Journal: Nouvelles techniquesGrands scores dans l'ensemble, des améliorations standard sont appliquées (optimisation de l'image, compression / concaténation JS et CSS), mais gardez à l'esprit que cette démo est également fournie avec un grand pull-out faisant la promotion d'autres versions du thème (complication supplémentaire que votre propre version peu probable avoir besoin). Sans trop d'effort, cette démo pourrait entrer dans la classe de poids inférieure à 1Mb.
Voilà qui conclut notre résumé des scores. Après avoir acheté un thème WordPress, comment optimiser le site que vous créez avec?
Cela ne vous surprendra pas: vos images constituent un premier point de contact facile lorsque l'optimisation de votre site Web est effectuée. Supprimez les images indésirables, compressez celles dont vous avez besoin, enregistrez les JPEG au format «progressif» (pour qu'il y ait au moins quelque chose à voir pendant le chargement) et vous partirez du bon pied. Vous pouvez également installer un plugin Lazy Loading pour aller encore plus loin. Nous avons constaté que très peu de ces démos accordent la priorité à l'optimisation de l'image, mais cela signifie au moins que vous pourrez améliorer leurs scores..
En ce qui concerne les scores notoirement inconstants de Pagespeed Insights, vous aurez remarqué que toutes ces démos (à l’exception d’une) obtiennent de meilleurs résultats pour le bureau que pour leur version mobile. Cela ne reflète plus la manière dont le Web est utilisé. Par conséquent, pour que Google (et les utilisateurs) soient satisfaits, accordez une attention particulière à la performance mobile. Une première attitude mobile aidera également votre référencement.
Comment pourriez-vous faire cela? Concaténer et minimiser CSS et JavaScript peut être difficile avec WordPress; L'utilisation de plugins tiers signifie que les fichiers peuvent être nombreux et que vous ne pourrez pas les contrôler sans aide. Néanmoins, faites de votre mieux pour inclure des styles vitaux de «vue initiale» en ligne dans la et rendre votre site Web utilisable aussi rapidement que possible en empêchant les scripts de "blocage du rendu" de ralentir le processus de chargement. Si le curseur situé en haut de votre page d'accueil nécessite le chargement de toute la page avant de s'afficher, Google vous sanctionnera..
Au-delà, considérez votre hébergement. Activer la compression GZIP. HTTPS ne fera pas de mal non plus. Utilisez également un service de mise en cache. installer et configurer W3 Total Cache est un jeu d'enfant. Utilisez un CDN si votre contenu est destiné à un large public. Enfin, jetez un coup d’œil à ces tutoriels et cours pour plus de détails et une aide sur le sujet:
