WPBeginner v6 - Dans les coulisses de notre nouveau design de site

Si vous avez visité WPBeginner au cours des dernières semaines, vous avez probablement remarqué que nous avons un nouveau design de site Web. Bien qu'il présente de nombreuses similitudes avec le dernier, il y a beaucoup de choses qui ont changé dans les coulisses.

Comme je l'ai promis dans la newsletter, je souhaite partager le processus de réflexion derrière notre refonte, ce que nous avons appris, les nouveautés du site et, surtout, comment vous pouvez utiliser certains de nos apprentissages pour améliorer votre site Web.

Un peu de contexte

J'ai lancé WPBeginner en 2009 et, comme la plupart des nouveaux créateurs, j'ai changé la conception du thème de notre site Web quatre fois au cours des 3 premières années.

Au fur et à mesure que mon entreprise grandissait, j'ai réalisé que les refontes de sites Web prenaient beaucoup de temps et de ressources qui pourraient être mieux utilisées pour remplir notre mission principale :

Je me suis donc fait un devoir de me concentrer entièrement sur notre mission principale et notre entreprise a énormément grandi.

La dernière refonte de WPBeginner a été lancée en 2016, et nous avons parcouru un long chemin depuis lors.

Voici ce qui s'est passé au cours des 5 dernières années :

• Nous avons créé plus d'un millier de tutoriels WordPress gratuits sur le blog WPBeginner et ajouté des centaines de nouveaux tutoriels vidéo sur notre chaîne YouTube.
• Nous avons lancé notre communauté WPBeginner Engage sur Facebook qui est maintenant le plus grand groupe Facebook WordPress avec plus de 80 000 membres (l'adhésion est gratuite).
• Nous avons lancé le fonds WPBeginner Growth pour investir dans certains de nos plugins WordPress préférés, notamment MemberPress, Pretty Links, Formidable Forms, Uncanny Automator et 6 autres.
• Nous avons lancé deux nouveaux plugins WordPress, TrustPulse, un plugin WordPress de preuve sociale, et RafflePress, un puissant plugin de cadeaux et de concours WordPress.
• Nous avons acquis cinq plugins de croissance WordPress, dont le célèbre AIOSEO (plugin SEO tout-en-un pour WordPress), SeedProd (créateur de site WordPress par glisser-déposer), Smash Balloon (plugin de flux de médias sociaux n° 1), PushEngage (plugin de notification push de site Web) et AffiliateWP (plugin de gestion d'affiliation pour WordPress).
• Nous avons également acquis cinq plugins de plate-forme et d'infrastructure WordPress, dont le célèbre plugin WP Mail SMTP (pour corriger la délivrabilité des e-mails), SearchWP (puissant plugin de recherche WordPress), Easy Digital Downloads (plugin de commerce électronique populaire pour la vente de produits numériques), WP Simple Pay (plugin facile pour accepter les paiements par carte de crédit) et Sugar Calendar (plugin de calendrier d'événements simple pour WordPress).

Collectivement, nos plugins sont maintenant utilisés par plus de 19 millions de sites Web , et 4 de nos plugins figurent parmi les 20 meilleurs plugins WordPress de tous les temps.

Bien que toutes ces réalisations soient de grandes réalisations, nous avons un nouvel ensemble de défis à relever, afin que nous puissions continuer à nous améliorer et à servir notre mission.

Cela m'amène à WPBeginner v6.

Conception axée sur la découvrabilité du contenu

WPBeginner a commencé comme un simple blog de didacticiel, mais il est vraiment devenu le Wikipédia de WordPress.

Nos utilisateurs nous ont dit à plusieurs reprises que lorsqu'ils voulaient trouver une réponse à leurs problèmes WordPress, ils se contentaient de rechercher le mot clé sur Google et d'ajouter WPBeginner à la fin pour trouver la meilleure solution.

Pour aider nos lecteurs à trouver rapidement la réponse à leurs questions WordPress, nous avons fait de la fonction de recherche une grande priorité sur notre nouvelle page d'accueil.

Que vous soyez un visiteur récurrent venant chercher dans notre bibliothèque de contenu ou un nouveau lecteur débutant avec WordPress, la page d'accueil de WPBeginner vous permet désormais de trouver facilement ce que vous cherchez.

Vous remarquerez également un widget de recherche similaire dans notre barre latérale sur toutes les pages de publication unique ainsi que sur l'en-tête de notre site Web lorsque vous cliquez sur l'icône de recherche.

L'une des raisons pour lesquelles WPBeginner est devenu le plus grand site de ressources WordPress pour les utilisateurs non techniques est que nous expliquons des sujets WordPress complexes en langage simple, étape par étape.

Dans le nouveau design, nous avons ajouté une fonction de recherche en direct à notre section glossaire WordPress, afin que vous puissiez facilement vous familiariser avec le jargon WordPress courant. C'est fondamentalement comme un dictionnaire pour les termes WordPress.

En tant qu'utilisateur WPBeginner, vous bénéficiez d'un accès exclusif aux meilleures remises WordPress sur les plugins populaires, les thèmes premium, l'hébergement et d'autres outils marketing.

Notre équipe a vraiment fait un excellent travail en négociant les meilleures offres pour vous, et cette section s'est considérablement développée pour avoir plus de 100 coupons et offres.

En raison de la demande populaire des utilisateurs, nous avons également ajouté la recherche en direct dans notre section Offres, afin que vous puissiez trouver rapidement la meilleure offre sur vos produits WordPress préférés.

À l'approche de 2022, une grande priorité pour nous est la découvrabilité du contenu.

Cela nous aide à offrir la meilleure expérience utilisateur, à augmenter le temps passé sur le site, à augmenter les pages vues et à réduire notre taux de rebond global.

Je pense qu'en 2022, l'optimisation de l'expérience utilisateur (UXO) jouera un rôle essentiel dans le référencement.

Si vous voulez battre vos concurrents et obtenir un avantage concurrentiel, je vous recommande fortement de prêter attention aux UXO.

Je partagerai des conseils tout au long de cet article sur la façon dont vous pouvez implémenter des fonctionnalités similaires sur votre site, comme nous l'avons fait dans notre nouveau thème.

Comment améliorer la recherche WordPress

La fonction de recherche par défaut de WordPress n'est pas très puissante, donc si vous souhaitez personnaliser l'algorithme de classement et contrôler ce qui s'affiche pour chaque recherche, je vous recommande d'utiliser le plugin SearchWP.

Alternativement, vous pouvez également utiliser la recherche de site personnalisée de Google qui utilise l'algorithme de Google, mais l'inconvénient est que Google affichera des publicités sur vos pages de recherche, ce qui n'est pas très beau.

Si vous cherchez à ajouter une recherche en direct sur votre site comme nous l'avons fait dans la section Offres ou dans le glossaire, suivez ce didacticiel sur la façon d'ajouter la recherche en direct AJAX dans WordPress.

D'autres tutoriels de recherche WordPress que vous pourriez trouver utiles sont comment créer un formulaire de recherche WordPress personnalisé et comment ajouter une barre de recherche dans le menu WordPress.

Nouveau méga menu WordPress

Sur le thème de la découvrabilité du contenu, nous avons mis à niveau nos anciens menus déroulants WordPress en nouveaux méga menus multi-colonnes.

Cela permet à nos nouveaux utilisateurs de trouver rapidement et facilement notre meilleur contenu.

Cela nous permet également de mieux mettre en valeur nos nouveaux produits, les outils commerciaux gratuits que nous avons créés, et plus encore.

Comment ajouter un méga menu dans WordPress

Bien que nous ayons créé une solution personnalisée pour WPBeginner, vous pouvez suivre ce didacticiel sur la façon d'ajouter un méga menu dans WordPress pour mieux mettre en valeur vos meilleures pages.

L'éditeur de blocs WordPress (enfin)

En 2019, WordPress a introduit l'éditeur de blocs super puissant (alias Gutenberg) pour créer du contenu.

J'ai immédiatement commencé à l'utiliser sur mon blog personnel, mais comme WPBeginner utilisait un thème hérité avec de nombreuses fonctionnalités codées personnalisées, le changement n'était pas aussi simple.

Ainsi, au cours des deux dernières années, nous avons été bloqués en utilisant l'éditeur classique sur le site WPBeginner, tandis que tous nos nouveaux sites Web disposaient des dernières et meilleures fonctionnalités de l'éditeur de blocs WordPress.

Enfin, avec notre nouveau thème, nous pouvons désormais utiliser toutes les fonctionnalités impressionnantes de l'éditeur de blocs WordPress.

Par exemple, maintenant je peux ajouter un bloc "Le saviez-vous" vraiment cool sans écrire de code :

Nous avons également complètement repensé plusieurs de nos pages de destination à l'aide de l'éditeur de blocs WordPress.

Par exemple, consultez notre nouvelle page de destination de configuration de blog WordPress gratuite.

Nous avons également repensé nos outils commerciaux gratuits à l'aide de l'éditeur de blocs pour mettre en évidence certains des outils gratuits récents que nous avons créés.

Nous utiliserons toujours SeedProd pour créer des pages de destination entièrement personnalisées en cas de besoin, car il s'agit d'un véritable générateur de pages WordPress par glisser-déposer.

Bien qu'il soit amusant d'apprendre à utiliser Gutenberg pour créer des pages de destination personnalisées, cela nécessite encore BEAUCOUP de codage à faire pour la configuration avant que les équipes marketing puissent créer une page de destination personnalisée.

Alors que lorsque vous utilisez un plugin de création de pages, les équipes marketing peuvent rapidement créer des pages de destination personnalisées, des mises en page d'entonnoir, etc. sans l'aide de l'équipe de développement.

L'équipe principale de WordPress travaille dur sur les fonctionnalités d'édition complète du site, mais il lui reste encore beaucoup de travail à faire avant de pouvoir rivaliser avec les fonctionnalités puissantes que vous obtenez avec les constructeurs de pages comme SeedProd, Divi ou Beaver Builder.

Cela dit, l'éditeur de blocs est vraiment génial, et il existe de nombreux plugins de blocs WordPress que vous pouvez utiliser pour créer des éléments de conception sympas pour améliorer votre contenu.

Voici un autre bloc sympa que notre nouveau thème a pour mettre en évidence les plugins en vedette :

SeedProd est le constructeur de pages glisser-déposer le plus convivial pour les débutants pour WordPress. Il est livré avec plus de 150 modèles prédéfinis et leur fonction de création de thèmes vous permet de créer des thèmes WordPress entièrement personnalisés (sans aucun code). Essayez SeedProd aujourd'hui »

Dans les prochains articles de blog, je suis sûr que vous verrez plus de blocs de conception de contenu dont nous disposons pour améliorer encore la lisibilité de notre contenu.

Passer de Yoast à AIOSEO

Pendant très longtemps, le site WPBeginner utilisait une version très ancienne et personnalisée du plugin Yoast SEO (v 2.3.5).

Pour mettre en perspective, ils sont sur la version 17 en ce moment.

Je ne voulais pas mettre à jour Yoast car leur équipe avait supprimé certaines fonctionnalités essentielles que je pensais importantes pour le référencement.

J'ai également senti que l'espace SEO global de WordPress avait cessé d'innover.

Ainsi, début 2020, nous avons acquis AIOSEO, le plugin SEO tout-en-un original, et mon équipe l'a complètement remanié.

Je suis très fier du travail accompli par notre équipe, et elle possède toutes les fonctionnalités de référencement dont vous avez besoin pour obtenir un avantage concurrentiel.

Comme l'éditeur de blocs, nos nouveaux sites Web ont commencé à passer à AIOSEO et ont commencé à voir leur classement s'améliorer, j'étais donc impatient de commencer à l'utiliser sur WPBeginner.

Maintenant, nous utilisons les dernières et meilleures fonctionnalités SEO de All in One SEO.

Nous avons maintenant des fonctionnalités telles que le plan du site vidéo pour aider à améliorer le classement de notre contenu avec des vidéos, le plan du site RSS pour aider notre contenu à être indexé plus rapidement, des modules de référencement avancés pour avoir un contrôle plus précis sur le référencement de notre site, et bien plus encore.

Je crois vraiment que c'est le meilleur plugin SEO sur le marché, et surtout, son prix est équitable pour les petites entreprises et les agences.

Je prévois de faire un article complet dans les semaines à venir sur les raisons pour lesquelles nous avons changé avec une ventilation détaillée des fonctionnalités, mais en attendant, vous pouvez essayer la version gratuite de All in One SEO, ou consulter la version Pro qui a tout le puissant fonctionnalités que j'utilise sur WPBeginner.

Améliorations de la vitesse de WordPress

De nombreuses études ont montré que les sites Web plus rapides améliorent l'expérience utilisateur, augmentent le temps passé sur le site et les conversions globales.

C'est aussi pourquoi Google a fait de la vitesse du site Web un facteur de classement SEO.

Maintenant, si vous suivez le site depuis un certain temps, vous savez que je suis obsédé par l'optimisation des performances.

Le site WPBeginner était déjà assez rapide grâce à notre incroyable partenaire d'hébergement WordPress SiteGround. Ils offrent une solution d'hébergement WordPress hautement optimisée basée sur la plate-forme cloud de Google.

Et bien sûr, nous suivions les meilleures pratiques de vitesse WordPress, mais avec notre nouvelle conception de thème, nous avons apporté plusieurs améliorations notables à la vitesse.

Voici nos résultats Google Page Speed :

Voici le résultat de la page d'accueil de GTMetrix et Pingdom :

Et nous avons obtenu ce résultat malgré l'ajout de nouvelles sections, plus de contenu sur la page d'accueil, des images plus larges, etc.

Et avant de demander, le site WPBeginner compte actuellement 68 plugins actifs .

Alors vous vous demandez peut-être comment j'ai réussi à ajouter plus de contenu sur le site tout en réduisant la taille de la page et en rendant tout plus rapide ?

Eh bien, j'ai supprimé des choses dont je pensais que nous n'avions plus besoin, et ce sont des choses que je veux vraiment que davantage de propriétaires de sites Web envisagent de faire également.

Non seulement cela aidera à accélérer votre site, ce qui contribuera au classement SEO, mais cela réduira votre consommation globale de bande passante, réduira les coûts et améliorera l'empreinte carbone de votre site Web.

Désactiver Gravatar à partir des commentaires WordPress

WordPress est livré avec un service tiers intégré appelé Gravatar, abréviation de Globally Recognized Avatars.

Cela vous permet de voir la photo de profil ou l'avatar d'un utilisateur lorsqu'il laisse un commentaire sur votre site WordPress.

Le défi est qu'il oblige les visiteurs de votre site Web à créer un compte Gravatar, ce que la plupart des utilisateurs ne font pas. Donc, à la place, votre site Web charge simplement l'avatar de l'homme mystérieux gris qui n'a pas l'air bien.

Supposons maintenant que vous ayez un article de blog populaire avec 50 commentaires où seulement 10% des utilisateurs ont une image Gravatar et 90% n'en ont pas. Eh bien, ce sont 50 images supplémentaires que votre page charge qui n'ajoutent vraiment pas de valeur significative au contenu.

C'est pourquoi de nombreux blogs populaires ont commencé à désactiver Gravatar, et nous faisons de même sur WPBeginner.

Ce simple changement a considérablement amélioré les temps de chargement de nos pages et le score de vitesse du site.

Suppression de polices personnalisées tierces

Je vais être honnête, je n'ai jamais pensé à deux fois aux polices personnalisées dans le passé.

C'était quelque chose qui semblait normal et qui donnait au site une belle apparence d'un point de vue typographique, du moins si vous avez la chance d'avoir un Internet rapide.

Dans l'ancien thème WPBeginner, nous avons utilisé une police Adobe personnalisée appelée Proxima Nova, une police d'icônes populaire appelée FontAwesome, et nos popups OptinMonster utilisaient les polices Source Sans Pro de Google.

Lorsque j'ai visité le site à distance avec une mauvaise qualité Internet, j'ai vraiment réalisé l'impact important de ces polices sur les performances de l'expérience utilisateur.

Dans notre nouveau design, je voulais résoudre ce problème, afin que nous puissions faciliter l'accès des étudiants et des propriétaires d'entreprises des pays en développement à WPBeginner, apprendre WordPress et développer leur présence en ligne.

Le nouveau thème WPBeginner v6 utilise les polices système par défaut qui ont parcouru un long chemin. Ils ont fière allure sur tous les appareils, et bien sûr c'est super rapide.

Pas de clignotement de texte sans style (FOUT), pas de changement de mise en page cumulatif (CLS) et temps de blocage considérablement réduit.

Si vous vous connectez au tableau de bord WordPress ou utilisez Github, vous remarquerez que nos polices sont similaires car ces deux plates-formes sont passées aux polices système plus tôt.

Bien que la suppression des polices personnalisées ne soit pas une solution viable pour tous les sites Web d'entreprise, je pense que les concepteurs et les développeurs doivent faire attention à la vitesse.

Quelques bonnes pratiques qui peuvent vous aider :

• Au lieu d'utiliser deux polices distinctes pour le titre et le contenu, pensez à utiliser la même police pour les deux.
• Au lieu d'utiliser plusieurs poids et styles de police différents tels que mince, normal, semi-gras, gras, extra gras, noir, puis italique, envisagez de réduire les poids de police à seulement deux : normal et gras.
• Au lieu de charger l'intégralité de FontAwesome ou une autre bibliothèque de polices d'icônes, pensez à ajouter des SVG directs des icônes dont vous avez besoin.

Désactivation des polices personnalisées dans OptinMonster

Une fois le thème conçu et codé, il me restait encore à résoudre un problème de polices.

Les fenêtres contextuelles de mon site Web et les formulaires d'abonnement aux e-mails utilisent OptinMonster, et ils chargeaient toujours les polices Google.

Maintenant, désactiver OptinMonster n'était pas une option car cela m'aide à obtenir plus d'abonnés par e-mail et à augmenter les conversions de notre site Web.

Heureusement, c'est une de mes entreprises, j'ai donc demandé à l'équipe de développement une solution pour désactiver les polices Google.

Il s'est avéré que je n'étais pas le premier à demander cette fonctionnalité, et OptinMonster disposait déjà d'une solution API qui permet non seulement de désactiver les polices Google, mais également de charger toute police Web personnalisée de votre choix.

Je suis assez féru de technologie et je peux implémenter le petit extrait que l'équipe a partagé dans la documentation, mais je sais que beaucoup de nos clients ne le sont pas.

Alors maintenant, notre équipe a en fait construit cette fonctionnalité dans le générateur de campagne (aucun codage nécessaire).

Mais si vous êtes à l'aise avec le code et que vous ne souhaitez pas désactiver manuellement ce paramètre pour chaque campagne, vous pouvez simplement suivre le hack que j'utilise.

Ajoutez d'abord l'extrait de code JS suivant pour empêcher OptinMonster de charger des polices Web sur votre site :

<script type="text/javascript">
document.addEventListener('om.Scripts.init', function(event) {
event.detail.Scripts.enabled.fonts= false;
});
</script>

Ensuite, ajoutez le CSS suivant dans votre fichier style.css :

html .Campaign * { font-family: "Proxima Nova", Helvetica, "Helvetica Neue", Arial, sans-serif !important; }

Bien sûr, n'oubliez pas de changer les polices pour qu'elles correspondent aux polices de votre site Web. Cela appliquera essentiellement la famille de polices ci-dessus à toutes les campagnes OptinMonster qui se chargent sur votre site.

Passé de W3 Total Cache à WP Rocket

Pendant très longtemps, j'ai exécuté une configuration hautement personnalisée du plug-in W3 Total Cache sur WPBeginner.

Bien qu'il ait fait le travail, ce n'était pas à la hauteur de WP Rocket que nous utilisons sur tous nos sites de produits.

Donc, avec cette refonte, je suis finalement passé à WP Rocket qui est livré avec BEAUCOUP de fonctionnalités de vitesse de site Web, notamment un préchargement de cache fiable et une minification de fichiers.

Ce plugin est crucial si vous souhaitez améliorer la vitesse de votre site Web.

Juste un petit mot si vous utilisez ThirstyAffiliates ou Pretty Links pour gérer vos liens d'affiliation, assurez-vous de les exclure de la mise en cache.

Accédez simplement à l'onglet Règles avancées et ajoutez votre slug d'affiliation sous le paramètre Ne jamais mettre en cache les URL.

Si vous ne le faites pas et que le préchargement du cache est activé, WP Rocket tentera de mettre en cache vos liens d'affiliation car ils ressemblent à des liens internes.

Cela peut gonfler artificiellement votre nombre de clics et avoir un impact sur vos statistiques d'affiliation.

J'ai demandé à l'équipe WP Rocket de voir si elle pouvait détecter automatiquement les plugins d'affiliation populaires et pré-remplir la balise d'URL exclue pour la rendre plus conviviale pour les débutants, et j'espère qu'elle mettra en œuvre la suggestion.

Qu'est-ce qui s'en vient ?

J'ai de grands projets pour 2022, c'est pourquoi je voulais mettre en ligne le nouveau design du site avant la fin de cette année.

Nous prévoyons de lancer une toute nouvelle section sur WPBeginner que beaucoup d'entre vous demandent depuis 2 ans.

Il arrive bientôt et j'espère le lancer au début du deuxième trimestre 2022.

Je prévois également d'expérimenter davantage dans le nouvel éditeur de blocs pour créer une meilleure expérience de lecture globale pour vous.

En dehors de cela, gardez un œil sur notre chaîne YouTube car nous allons y faire des choses vraiment cool en 2022.

Comme toujours, je tiens à vous remercier tous pour votre soutien continu et vos commentaires au fil des ans.

Votre sincèrement,
Syed Balkhi
Fondateur de WPBeginner