Reconception de StevePavlina.com – Partie 8

Le présent article est le 8^e d’une série de 9 articles portant sur la reconception de StevePavlina.com . Comment améliorer son site web selon StevePavlina?

La monétisation

Lorsqu’on monétise un site Web, il est courant de penser en termes d’entonnoir de vente; une analogie que je trouve inhumaine et que je préfère éviter. Je comprends que ce modèle peut être efficace pour générer des ventes. Toutefois, considérer des gens comme les données d’une prospection ne satisfait ni mon cœur ni mon esprit. C’est une façon creuse et inhumaine de faire les affaires.

Bien sûr, c’est agréable de tirer un revenu de son travail, et je n’ai aucun problème avec cela en général. Je veux simplement m’assurer que toute approche de monétisation que j’utilise est holistique, c’est-à-dire qu’elle correspond à mon style de vie et à mes valeurs. J’aime les sources de revenus qui sont « humaines ».

En 2008, je gagnais entre 12 et 13 000 $ par mois rien qu’en faisant de la publicité sur mon site. Environ 9 à 10 000 $ provenaient de Google Adsense. L’argent était automatiquement déposé sur mon compte bancaire chaque mois, et je n’avais pas grand-chose à faire pour maintenir cette source de revenus. Plus tard cette année-là, j’ai retiré toutes les annonces parce que je n’étais pas content à l’idée de distraire mes lecteurs. Imaginez combien d’argent j’aurais accumulé aujourd’hui si tout ce temps j’avais maintenu ces publicités.

Prendre des raccourcis pour parvenir à l’abondance n’est pas une bonne chose pour ma croissance. À maintes reprises, j’ai sacrifié des revenus faciles à obtenir pour pouvoir mettre en pratique certaines leçons difficiles. Lorsque j’apprends et que je grandis beaucoup, j’ai tendance à sentir que je vis dans l’abondance, peu importe l’état de mes finances.

J’ai l’impression de prospérer lorsque je me trouve au cœur des défis, et je dois parfois abandonner les sources de revenus qui m’éloignent de cette zone.

Un an après avoir supprimé la publicité sur mon site, j’ai commencé à faire des ateliers publics. L’année qui a suivi, j’ai commencé à beaucoup voyager. Quelques années plus tard, j’ai commencé à donner des allocutions publiques à l’étranger. Je ne pense pas que j’aurais vite diversifié mes services si j’avais conservé ces revenus publicitaires que je trouvais faciles à obtenir. En me débarrassant de cette source de revenus qui ne s’alignait pas avec ma personnalité, j’ai commencé à sentir le besoin de varier les services que j’offre. Je n’avais plus besoin de gaspiller mon énergie à penser ou à me soucier des annonceurs ou de la publicité. Cela m’a permis de libérer plus d’énergie pour davantage me consacrer à mes lecteurs. Ce sont eux qui m’ont encouragé à commencer par organiser des ateliers.

Ma stratégie de revenu, à supposer que j’en aie une, consiste à faire passer mes valeurs, mon mode de vie et mon bonheur en premier, puis à générer des revenus d’une manière qui satisfasse mes valeurs, améliore mon mode de vie et prolonge mon bonheur. Heureusement, cela est bien possible.

Actuellement, mon moyen préféré de gagner de l’argent consiste à organiser des ateliers. Les ateliers permettent aux gens d’apprendre beaucoup, les frais de participation sont raisonnables et les avis des participants sont merveilleux. J’adore concevoir et organiser de nouveaux évènements. Une partie de ma stratégie de revenu pour le nouveau site consistait donc à parier davantage sur les évènements.

Nous avions prévu à l’époque (en 2016) quatre nouveaux ateliers, et j’avais l’intention de dévoiler les sujets et de lancer les inscriptions au mois de mai. Les dates de tous ces évènements étaient indiquées sur la page des évènements.

Quatre ateliers en quatre mois, c’était simplement le plus grand nombre d’ateliers que nous n’avions jamais organisé en si peu de temps.

C’était aussi la première fois que nous organisions des ateliers dans un lieu autre qu’un hôtel. Cette fois, nous avions décidé d’utiliser un espace créatif qui était une boite de nuit, et tout le bâtiment nous avait été loué pour l’occasion, ce qui nous a donné plus de flexibilité que jamais auparavant.

Une autre façon dont j’aime générer des revenus, c’est via des projets créatifs comme Imaginary Men que j’avais enregistré avec plusieurs amis pendant trois nuits à Santa Barbara en Californie. Nous avions partagé des leçons et des histoires sur la croissance, les fréquentations, les relations et nos plus grands défis personnels.

C’est bien d’avoir des revenus provenant d’une variété de sources telles que les droits d’auteur, les revenus d’affiliation et les entreprises communes, mais mon approche favorite est de créer une chose que les gens vont apprécier et le vendre directement. C’était aussi ma stratégie préférée pour mon entreprise de jeux vidéo. Lorsque je vends directement les produits, je reçois beaucoup d’avis personnels, d’encouragements ainsi que des suggestions pour l’amélioration du produit, ce qui peut être très motivant. Avec d’autres sources de revenus, par contre, la rétroaction est beaucoup plus faible, et il est donc plus difficile d’évaluer l’impact des produits.

Lorsque les gens partagent directement avec moi leurs impressions, ils ont tendance à me faire part de l’impact de mon travail sur eux. Par contre, lorsqu’ils font des critiques en ligne, ils se concentrent surtout sur le contenu lui-même, mais cela ne m’indique pas comment cela les a affectés.

En ce qui me concerne, cette philosophie du revenu relève du bon sens.

Pourquoi voudrais-je chercher des sources de revenus qui détériorent mon mode de vie ou qui créent des problèmes d’harmonisation avec mes valeurs ? C’est la raison pour laquelle je n’ai pas eu un emploi depuis 1992. Si j’essayais de trouver un emploi aujourd’hui, je serais probablement renvoyé en moins d’une semaine, car j’accorde plus de prix à la liberté qu’à l’obéissance. J’aime prendre mes propres décisions quant à la façon dont je passe mon temps.

Ma stratégie de monétisation pour le site Web devait aller de pair avec mon engagement à apprendre et à grandir, alors il était important de concevoir un site flexible. J’ai simplifié la conception des pages des ateliers et créé des modèles pour faciliter le lancement de nouveaux ateliers. J’ai fait la même chose pour la page des Produits et Services. La section Actualités et Mises à jour est également un endroit pratique pour annoncer le lancement de nouveaux produits et l’organisation d’événements. Toutefois, il s’agit de structures souples, de sorte qu’il serait facile d’ajouter différents types de flux de revenus sans toucher à la conception du site. Quelle que soit la façon dont je veux gagner de l’argent, la conception de mon site devrait pouvoir s’y adapter.

Je pense que si nous considérons la vie comme une école de croissance, cela nous aide à éviter le piège de considérer l’argent comme une source de pouvoir.

L’argent n’est rien d’autre qu’un nombre dans une base de données… ou du papier, du plastique ou des pièces de monnaie. L’argent est immobile ; nous sommes les moteurs qui le conduisent.

Si vous faites de bons choix de monétisation, alors gagner de l’argent peut être un jeu amusant et passionnant qui alimente votre croissance. Autrement, cela pourrait être déprimant ou frustrant. Vous aurez même des maux de tête. Chaque fois que vous succombez à cette dernière approche, remettez en question les décisions qui vous y ont conduit et motivez-vous à prendre de meilleures décisions. Vous pouvez toujours changer d’avis plus tard.

Test et lancement du site Web

Au cours du dernier mois qui a précédé le lancement du site, j’ai effectué de nombreux tests pour m’assurer que tout fonctionnait comme il faut. Ce travail a consisté à tester toutes les pages WordPress et une sélection d’articles sur les navigateurs Chrome, Safari, Firefox et Edge. J’ai également testé le site sur différents appareils, dont un iPhone, un iPad, un ordinateur portable et un moniteur de 27″.

J’ai utilisé le plug-in Responsible pour automatiser le test sur différentes tailles d’écran, ce qui m’a permis de simuler les tests sur des périphériques que je ne possède pas. WordPress a récemment ajouté une version limitée de cette fonctionnalité au Customizer (Apparence -> Personnaliser sur la barre d’administration de WordPress).

Après avoir testé le site sur mon ordinateur, je l’ai téléchargé sur un serveur intermédiaire temporaire. Un serveur intermédiaire est un sous-répertoire ou un sous-domaine dans lequel vous installez une copie de votre site à des fins de test. De cette façon, le site sera en direct sur Internet, mais il n’enregistrera aucun trafic.

Il y avait aussi quelques plug-ins que je pouvais configurer convenablement seulement une fois que le site était accessible sur Internet.

Il s’agit surtout de quelques éléments de Jetpack.

Une fois que tout fonctionnait correctement sur le serveur intermédiaire, j’ai rédigé un plan de lancement détaillé, étape par étape, pour copier le site du serveur intermédiaire vers l’emplacement du site en direct. C’était assez facile à faire, mais je voulais être prudent et ne rien gâcher. Je voulais également minimiser les temps d’arrêt.

J’ai d’abord décidé de faire un lancement en douceur. Mon trafic est généralement plus faible pendant les week-ends, alors j’ai lancé le site un vendredi dans l’après-midi. Cela m’a donné le temps de surveiller le site tout au long du week-end pour m’assurer qu’il fonctionnait comme prévu, sans que cela suscite du tapage, simplement au cas où il y aurait des problèmes à régler. Puis, le mardi qui a suivi, lorsque j’étais certain que tout était stable, j’ai annoncé le lancement du nouveau site via ma newsletter, ce qui a entrainé une augmentation du trafic et beaucoup plus de commentaires.

Dans l’ensemble, le lancement s’est déroulé sans problème. J’ai rencontré quelques bugs mineurs par la suite. Ainsi, pendant les jours qui ont suivi, j’ai surtout travaillé sur des corrections de bugs, des ajustements mineurs, des améliorations simples et j’ai répondu aux commentaires.

L’optimisation de la vitesse du site web

Même au moment du lancement, j’avais encore entre 50 et 100 améliorations mineures à faire ainsi que des idées à essayer. Améliorer un site Web, c’est comme lutter contre une hydre ; chaque élément que vous ajoutez donne naissance à deux autres idées. J’ai essayé de séparer les fonctionnalités importantes qui devraient être disponibles au lancement des autres idées qui pourraient être mises en œuvre plus tard.

Le domaine où j’ai le plus travaillé après le lancement était l’optimisation de la vitesse du site. Je voulais que le site se charge rapidement et qu’il soit très réactif. Je ne voulais pas que les gens soient obligés d’attendre plusieurs secondes pour que les pages se chargent.

Il existe un certain nombre de services Web gratuits qui peuvent tester la vitesse de votre site. Ces tests durent moins d’une minute, et vous obtenez ensuite un rapport gratuit que vous pouvez consulter. Voici les services de test que j’ai utilisés :

GTmetrix — c’est mon favori, même si parfois j’ai dû l’exécuter à plusieurs reprises avant d’obtenir un rapport précis (pour mon site, il avait tendance à présenter prématurément un rapport quand seulement 25% de la page a été chargé, manquant ainsi de considérer beaucoup d’éléments)
Pingdom — aussi bon, mais pas très spécifique ou détaillé dans ses suggestions comme peut l’être GTmetrix
Google PageSpeed Insights — un bon point de départ lorsque vous avez beaucoup de choses à améliorer, même s’il n’offre que des suggestions de base et un résultat trop sévère (même news.google.com n’obtient que 68% pour les appareils mobiles et 77% pour les ordinateurs).

Lorsque j’ai effectué ces tests de vitesse sur mon site pour la première fois, les résultats étaient au mieux médiocres — la plupart du temps ils se situaient dans une fourchette de 50 à 65%.

Heureusement ces sites m’ont fait beaucoup de suggestions pour améliorer la vitesse.

Mon outil de profilage préféré était sans conteste GTmetrix. Il m’a fourni deux résultats de profilage différents (PageSpeed et YSlow) avec une notation détaillée des différents facteurs et des notations alphabétiques allant de A à F pour chaque facteur. Sur environ la moitié des facteurs de vitesse, j’obtenais des A et des B, principalement parce qu’ils étaient déjà gérés par mon thème WordPress. Je me suis donc d’abord concentré sur tous les C, D et F.

Heureusement, GTmetrix m’a donné de bons conseils sur la façon d’améliorer chaque domaine où j’étais à la traine. J’ai commencé à travailler sur les plus grands problèmes et progressivement j’ai abordé les plus subtils.

Cela incluait :

L’activation de la compression gzip pour les fichiers, y compris les fichiers CSS, JavaScript et les fichiers de polices de caractères
L’analyse différée de JavaScript, il ne s’agit donc pas d’un blocage de rendu
La suppression des chaines de requête des ressources statiques
L’ajout du plug-in Autoptimize qui réduit et combine les fichiers HTML, CSS, et JS
L’ajout du plug-in EWWWW Image Optimizer qui compresse sans les perdre les fichiers image de mon site, réduisant la bande passante de l’image d’environ 10% à 15%
Et l’ajout du plug-in Disable Emojis pour éliminer une requête inutile de fichier WordPress (tout ce que fait ce fichier, c’est d’ajouter le support émoji aux navigateurs obsolètes, et il se charge inutilement dans les pages qui n’ont pas d’émojis)
L’ajout d’en-têtes appropriées liées à la mise en cache des fichiers, afin que les navigateurs puissent mieux les mettre en cache
La suppression de @import dans l’un de mes fichiers CSS et l’insertion des définitions de police dans le principal fichier CSS
L’inscription à CloudFlare, un réseau de distribution de contenu qui réduit considérablement le temps de réponse du serveur
L’activation de la fonction RocketLoader de CloudFlare et l’ajout d’une règle pour lui permettre de fonctionner avec BeaverBuilder
Et beaucoup d’autres petits ajustements

Avant que je n’aie fait n’importe quelle optimisation de vitesse, GTmetrix m’avait signalé qu’il fallait entre 2 et 4 secondes pour charger la page d’accueil de mon site. Pour charger cette page, il a fallu environ 80 requêtes de fichiers. Il y avait plusieurs problèmes qui ralentissaient aussi le rendu des pages.

Après ces optimisations, je voyais des temps de chargement de l’ordre de 600 à 900 millisecondes (0,6 à 0,9 seconde). Mes résultats de vitesse ont grimpé à 98% pour PageSpeed et 96% pour YSlow.

J’ai aussi testé d’autres pages comme la page principale du blog et quelques pages d’articles et j’ai obtenu des résultats similaires.

Atteindre 100% ne serait pas réaliste étant donné que les autres suggestions d’optimisation sont largement hors de ma portée. Par exemple, l’application de certaines suggestions nécessiterait de modifier les entêtes d’expiration de Google Fonts qui est hébergé par Google. Même le test PageSpeed de Google se plaint de leurs polices. Bien que ce problème mineur baisse un peu mes résultats de test, les polices Google se chargent si rapidement dans la pratique qu’elles ne constituent pas du tout un problème. Ainsi, pour obtenir ces derniers 2 à 4%, je devrais faire des choses qui ne rendraient pas mon site encore plus rapide ; elles ne feraient que satisfaire les idiosyncrasies de l’algorithme d’évaluation.

Ce travail d’optimisation m’a pris environ trois jours, mais je faisais environ 10 à 12 heures de travail par jour. Si je devais tout recommencer, en prenant en compte tout ce que je sais maintenant, je pourrais faire l’ensemble de ce travail en quelques heures. J’avais en effet passé la majeure partie de mon temps à faire des recherches sur la façon de faire des choses que je ne savais pas faire. J’ai aussi dû faire beaucoup de tests supplémentaires pour trouver la bonne façon d’apporter certains changements. L’ignorance et le manque d’expérience m’avaient ralenti.

J’ai trouvé l’onglet Waterfall dans GTmetrix particulièrement utile, car j’ai travaillé sur des changements de plus en plus subtils. Il m’a montré exactement combien de temps il fallait pour charger chaque ressource ainsi que les ressources qui bloquaient le rendu, afin que je puisse voir où se trouvaient les derniers problèmes. Une ressource qui bloque le rendu est une ressource qui doit être chargée avant que la page ne soit affichée pour la première fois au visiteur.

Les ressources qui ne bloquent pas le rendu, comme JavaScript pour les animations ou le traitement des formulaires, peuvent être retardées et chargées après l’affichage initial de la page.

Cela est particulièrement important pour accélérer les sites sur les appareils mobiles, où le chargement des pages peut sembler très lent.

J’ai passé des heures à parcourir tous les fichiers de ce graphique en cascade, ce qui m’a permis de trouver des problèmes que j’aurais pu négliger autrement. Par exemple, j’ai remarqué que le chargement d’une de mes polices prenait relativement plus de temps que nécessaire. J’ai vérifié le fichier et j’ai constaté que la police n’était pas compressée, pourtant je pensais que c’était le cas. J’ai donc ajouté quelques codes à un fichier de configuration Apache pour compresser les polices, ce qui a réduit la taille du fichier de cette police d’environ 75%. Cela a peut-être réduit de 200 à 300 millisecondes le temps de chargement des pages, ce qui équivaut au temps de deux clignements rapides ! Toutefois, si je peux épargner ces deux clignements supplémentaires à des milliers de personnes chaque jour, pourquoi hésiter ?

Ce niveau d’optimisation peut sembler un peu obsessionnel, et c’était certainement le cas, mais j’ai vraiment aimé l’expérience. Cela m’a semblé un peu intimidant au début parce que je ne connaissais pas grand-chose en matière d’optimisation de la vitesse quand j’ai commencé. J’ai abordé les choses une étape à la fois, et chaque petite augmentation de la vitesse m’a encouragé à continuer d’avancer. Une fois que j’ai compris comment les choses fonctionnaient, j’ai eu du mal à m’arrêter. Un soir, j’ai oublié de diner parce que j’étais trop absorbé par le désir de supprimer encore 50 à 100 millisecondes.

J’aime le fait que cela améliore également l’expérience pour mes lecteurs.

Bien sûr, il y a de nombreux facteurs qui peuvent affecter le temps de chargement des pages, y compris le navigateur, l’appareil utilisé et la qualité de la connexion Internet, mais il est bon de savoir que ces facteurs ne dépendent pas de moi.

Un site Web rapide et réactif est apparemment aussi bon pour les classements de recherche, il est donc possible que mon site puisse se classer un peu plus haut à l’avenir en raison de ce travail d’optimisation.

Délai et coût

J’ai commencé à travailler sur ce projet le 26 aout 2015 et le site a été lancé le 1^er avril 2016. Je n’y ai pas travaillé à plein temps pendant ces sept mois et j’ai voyagé au moins quatre fois pendant cette période. J’ai même passé deux semaines et demie au Mexique pendant la même période. Au total, j’ai probablement investi entre 600 et 800 heures dans ce projet jusqu’au point de lancement, ce qui équivaut donc à 15 à 20 semaines de travail à plein temps.

Je travaillais cependant rarement 40 heures par semaine. Parfois, je travaillais pendant 80 heures par semaine, d’autres fois, je me détendais et je faisais 20 heures de travail. C’était mon projet principal pendant ces sept mois, mais ce n’était pas mon seul projet. J’avais aussi d’autres tâches professionnelles à accomplir.

Depuis que le nouveau site a été lancé, j’y ai probablement consacré au moins 150 heures de plus, pour corriger les bugs, apporter des changements et faire des optimisations. J’ai facilement investi plusieurs centaines d’heures supplémentaires au fil du temps, car j’ajoutais des fonctionnalités d’une liste que j’ai élaborée. J’apportais également de petites modifications au fur et à mesure que j’enregistrais des suggestions.

En ce qui concerne la somme d’argent que j’ai dépensée pour ce projet, voici le décompte :

40 $ pour le WordCamp de Las Vegas en septembre 2015
199 $ par an pour l’abonnement Beaver Builder (thème et constructeur de page), mais ce montant baissera probablement après la première année.
81 $ par an pour les abonnements payants aux plug-ins
70 $ pour l’éditeur de texte Sublime

J’ai donc dépensé un total de 390 $ pour le projet, avec au plus 280 $ par an en dépenses courantes (probablement beaucoup moins étant donné que le renouvellement annuel de l’abonnement Beaver Builder devrait être fortement réduit). Si j’obtiens ne serait-ce qu’une inscription supplémentaire à un atelier chaque année en raison de la nouvelle conception du site, cela couvrira plus que les frais annuels que je dépense pour le maintien du site. De plus, ces dépenses sont toutes déductibles d’impôt.

Le reste des logiciels et outils que j’ai utilisés étaient déjà payés, et mes frais d’hébergement Web sont les mêmes qu’avant.

Par conséquent, en termes d’argent, ce projet était peu coûteux. J’étais prêt à dépenser plus, mais ce n’était pas nécessaire. La principale dépense était le temps, vous pouvez donc imaginer ce que ces heures investies m’ont couté en termes d’opportunités. Pour toute la croissance et l’expérience que j’ai acquise, je pense que cela en valait la peine.

Dans le dernier article de cette série, je partagerai un résumé des aspects de croissance personnelle de ce projet ainsi que ce que j’ai appris personnellement.

Passez à la partie 9 de cette série.

Note : Cet article est une traduction de l’article Redesigning StevePavlina.com – Part 8 de Steve Pavlina. C’est donc lui qui s’exprime dans le « je » de cet article !