Choixdemerde.fr le buzz couteux

De l’idée de base, à ses 3 millions de réponses en quelques jours, découvrez comment le questionnaire choixdemerde.fr a affronté les tempêtes d’un buzz mal anticipé et couteux après le partage inattendu par de grands acteurs du web comme Squeezie sur sa chaine YouTube.

Le contexte

Le lendemain du premier des deux tours des élections, sous la douche me vient une idée. Toujours à la recherche de sujets pour écrire des paroles de chansons, je puise dans le climat de l’entre deux tours son idée principale.

Peu importe ce qu’il se passe dans la vie, vient toujours un moment où nous devons faire des choix de merde.

Dans l’optique de fournir à cette chanson un package médiatique afin de la distinguer de toutes les autres musiques qui sortent dans l’anonymat tous les jours, je me dis que je peux l’accompagner d’un site internet où les principales punch-lines de la chanson s’y retrouvent.

  • Ton père ou Ta mère
  • Bac S ou Bac L
  • Jus de Pisse ou Tarte à la merde ?

Très vite mon cerveau entre en ébullition et le site se dessine dans ma tête bien plus vite que ne le font les paroles sur mon cahier. La chanson attendra, le site doit sortir maintenant dans ce climat de Macron / Le Pen.

choixdemerde.fr

La réalisation

Travaillant la journée dans une agence, je n’ai que les soirées pour concocter le site internet. J’ai la chance d’être développeur Full-Stack et de savoir manier aussi bien la mécanique d’un site que son aspect visuel. Le développement s’étalant sur trois soirées se passent sans encombre. 
Pour les développeurs qui me lisent, je m’appuie sur les technologies Symfony3, InuitCSS, Pug, jQuery.

Mon objectif est donc de mettre en ligne le plus rapidement possible une version du site assez grand public pour faire un buzz et surfer sur la vague de l’actualité. J’appelle donc une poignée de mes amis les plus marrants pour m’aider à remplir le questionnaire pour qu’il soit à la fois drôle et accessible à tous. Parmi ces derniers, je tiens à remercier tout particulièrement mon ami Maxenss, devenu célèbre grâce à sa vidéo sur la démonétisation de YouTube pour les contenus “grossiers”. Maxenss a dès le début validé l’idée du site et s’est chargé d’un grand nombre de questions. Je remercie les autres aussi bien entendu mais je n’ai pas de vidéos d’eux avec le million de vues à partager.

La publication

Dès la publication, je vois que quelque chose est en train de se passer. Quand je poste une de mes musiques sur lesquelles j’ai travaillé des mois et des mois, je n’obtiens en général guère plus de 4 ou 5 partages. Là, les compteurs s’enflamment et atteignent les 30 dans la demie heure. Bon point.

Je soumets ensuite le site à Brain Magazine qui le partage aussitôt. Plusieurs autres grand comptes Facebook partagent le site dans la foulée : Ivre, , Snooz, Maxenss, …
Google Analytics, l’outil qui me permet de suivre la fréquentation du site s’enflamme. Depuis son lancement, on a une moyenne d’utilisation du site de 50 utilisateurs simultanés avec des pointes à 500 !

On apprend aussi via cet outil que les visiteurs répondent en moyenne à 25 questions avant de quitter et passent en moyenne 6 minutes dessus.

Le Drame

Avec une telle affluence, le serveur lâche. Les images à charger font tomber le serveur. 
Ce qu’il se passe sommairement : Trop de personnes demandent en même temps au serveur les images du site. Les images sont des resources un peu lourdes à charger et quand trop de monde les demande en même temps, le serveur ne parvient plus à répondre et l’on se retrouve avec la fameuse Erreur 500.

Une page 500, c’est comme avoir son bébé qui pleure et ne pas savoir ce qu’il lui faut pour aller mieux. C’est la panique total et le temps est compté vu qu’au même moment, on perd des visiteurs.

Optimisations : Partie 1 — Le CDN

Les images sont des ressources trop lourdes à charger pour mon petit serveur ? Soit ! On va utiliser des serveurs bien plus gros pour cela, on va emprunter les serveurs d’Amazon. Je mets donc les images sur le CDN d’Amazon en comprenant plus ou moins que c’est gratuit ou ne coûte vraiment pas grand chose. De toute manière, pas le temps de réfléchir, le bébé pleure.

Image récupéré sur Google Image en tapant : Baby crying

Je modifie le site de manière à utiliser le CDN Amazon et non mon serveur pour tout ce qui concerne les images. Après quelques galères tout semble bien fonctionner et le serveur est remis sur pied. Hourra ! Je peux me coucher et mettre un terme à cette première nuit d’optimisation.

La journée du lendemain se passe sans encombre, les partages continuent de se faire sur tout l’internet : Facebook, Twitter, blogs… En fin de journée je décide de vérifier la facturation du CDN Amazon : je tombe de haut.

En à peine 24h, je me retrouve à devoir la coquette somme de 54€ à Amazon. A cette allure, si je ne m’étais rendu compte de rien, j‘aurais dû à la fin du mois verser à la firme Américaine la coquette somme de 1000€. Chic pour un buzz qui ne me rapporte strictement rien !

Optimisations : Partie 2 — La logique du site

Le serveur ne tombe désormais plus à cause du chargement lourd des images. Seulement le chargement des images s’est transformé en un robinet d’eau qui dilapide mon argent personnel sans trop de scrupules à mon égard…

Image récupérée sur Google Image en tapant Money Wasted

Il est temps de réfléchir un peu mieux le site. La première mouture fait certes le job mais n’est pas du tout adaptée à une fréquentation massive. Vous allez hurler quand vous allez voir comment le site fonctionnait avant cette optimisation :

  • L’utilisateur accède au site
  • L’intégralité du questionnaire est téléchargé sur votre ordinateur (les stats + les images de chaques questions)
Tu es en train de me dire que même en répondant à une seule question, ton utilisateur télécharges tout le site ?

Oui. C’est ce que je dis. Et tu veux en savoir une autre aussi bonne ? 
Les images ne sont pas du tout optimisées. J’en ai certaines qui pèsent 40 Ko, ce qui est cool, mais j’en ai d’autres qui pèsent, elles, 8 Mo, ce qui est bien moins cool !

Pour résumer, un utilisateurs moyen répondant à 25 questions est sensé télécharger 25 questions × 2 images = 50 images. 
Une image moyenne pour le site doit peser aux alentours de 200 Ko ce qui donne une session moyenne de 10 Mo.
Avant optimisation, les utilisateurs téléchargent tous 56 Mo et ce, même s’il ne répondent qu’à une question qui devrait ne peser que 400 Ko. En réalisant cela, je comprends qu’Amazon se serve goulûment sur la montagne de ma stupidité.

Les solutions mises en place sont très simples :

  • Modification de toutes les images du site pour qu’elles ne pèsent plus que 200 ko en moyenne. (largeur : 800px, et imageOptim pour tout le monde)
  • L’utilisateur ne télécharge que les images de la question sur laquelle il se trouve ainsi que celles de la question suivante. On évite ainsi de télécharger les images des questions sur lesquelles il n’ira peut être jamais.

Après la mise en place de ces optimisations, je passe de 50€ en 24h à 2€ les 24h suivantes ce qui est bien plus sympathique il faut se l’avouer !

Image récupérée sur Google Image en tapant : Cool

Optimisation : Partie 3 — Les requêtes SQL

À mesure que nous empilons les réponses, plus d’un million au moment de ce dont je vais vous parler, le questionnaire se charge de plus en plus lentement. Les requêtes basiques sur la base de données pour récupérer le nombre de votes pour chaque réponses marchent bien sur de petits volumes mais commencent à ramer à mesure que notre base grossit ! Tout est optimisé de ce côté là de manière à ne plus ralentir. Il faut faire des concessions, abandonner les méthodes simples mais gourmandes pour des méthodes un peu plus alambiquées mais mieux optimisées.

A ce niveau du projet je me rends compte à quel point chaque choix qui semble anodin à petite échelle, quand on teste le site sur notre petit ordinateur avec un jeu de donnée minuscule, est ultra important quand on passe à l’échelle du buzz. J’imagine alors un peu mieux le génie qui se cache derrière des sites comme YouTube ou Facebook qui gèrent des quantités monumentales de données sans jamais présenter un seul temps de latence ou une chute de service. Bravo les gars.

L’inattendu qui fait tomber le site

Vous connaissez Squeezie ? Vous n’êtes pas obligés mais pour l’intérêt du récit à suivre, une présentation sommaire du personnage s’impose. C’est le troisième plus gros Youtubeur de France. Cela représente un cumul de 8 millions d’abonnés. Pour vous aider à réaliser ce que cela représente, dites vous qu’au moment où Squeezie poste une nouvelle vidéo sur Youtube, dans les 20 minutes qui suivent, il se retrouve avec 500k vues dessus.

Ah quand même !

Bien, imaginez maintenant ceci quand après une petite semaine à être content de votre petit buzz, Squeezie fait une vidéo sur votre site et qu’il la partage un dimanche soir.

Cela donne les stats suivante :

Puis

Noooo !

image trouvée sur Google Image en tapant : noooo

Bon, d’abord, dinguement content que le site soit partagé par un compte aussi gros mais aussitôt tellement triste que le site tombe à ce moment fatidique après une semaine d’optimisation en tout genre pour éviter cela !

Mais t’es une quiche ou quoi ? Pourquoi ton site fait que tomber ?

A ce moment là, je n’ai aucune idée de ce qu’il se passe et le bébé, le bébé pleure très très fort. La panique est totale. Le programme du dimanche soir s’envole loin et avec lui le sourire de ma douce, me voila reparti en mer pour trouver la faille. Et la faille, c’est le seul point que je n’ai pas anticipé bien sûr. La base de données…

La Base de Données

Sur OVH (que je ne remercie pas), le nombre de connexions simultanées à une base donnée est limité à un nombre ridiculement petit. Et c’est ça qui fait péter le site. Devant le nombre trop important de connexion, la base de données ferme ses portes et devant une base de données fermée, pas possible de télécharger les questions du questionnaire et les stats des questions, donc forcément, le site crache. Une fois de plus.

Dans le stress du capitaine qui voit son navire couler, je décide de souscrire à l’offre OVH supérieure me disant qu’elle offrira une base de données un peu plus permissive. Dans l’urgence 120€ sont débités de mon compte pour passer sur une formule plus permissive… qui ne changera au final absolument rien vu que pour toutes les fomules OVH, les bases de données offrent les mêmes performances ! Mon dieu…

J’aurais du faire comme pour les images et héberger ma base de données sur Amazon… Ca m’aurait peut être coûté des sous en fonction des accès mais au moins, ça n’aurait pas breaké comme ça… et je n’aurais peut être pas souscrit à une offre débile qui ne me sert finalement à rien.

Optimisation Partie 4 : Fin

La partie qui suit n’est intéressante que pour les développeurs, je prierai donc les néophytes non masochistes de passer à la partie suivante pour porter un toast à toute cette aventure.

La dernière optimisation consiste donc à rebrancher le cache de mon site. Les développeurs qui me lisent se demanderont pourquoi diable à ce niveau là du buzz le cache n’est pas déjà en place. Et bien figurez vous qu’encore une fois OVH mutualisé me pose problème. Je ne peux pas utiliser le cache Varnish alors j’utilise le système de cache de Symfony qui copie un peu Varnish mais qu’avec du PHP et non avec du C.

Ce cache douteux de Symfony fonctionne très bien sur Chrome et sur une bonne partie des navigateurs. Seulement sur Safari et surtout Safari iOS, ce cache entraine une perte de la connexion qui fait que le site n’est pas consultable depuis les iDevices ! Vous comprendrez bien que je voulais éviter au maximum cette solution quand on considère que plus de 30% de mes utilisateurs sont sur iPhone. En même temps ce bug ne se manifeste pas sur tous les iPhone alors je décide de réactiver le cache en solution temporaire.
Je mets ici pour les curieux un lien vers le forum Apple qui décrit à peu près le problème que j’ai et pour lequel la solution ne semble pas exister : https://discussions.apple.com/thread/1189131?tstart=0

Conclusion

Tout d’abord, je suis ultra content. 
Penser qu’une idée aussi bête, réalisée aussi rapidement, donnerait naissance à un véritable buzz avec plus de 3 millions de réponses en moins de cinq jours, je n’aurais jamais cru ça possible.

J’ai adoré lire les réactions de tout le monde sur les réseaux sociaux, dans les commentaires de la vidéo de Squeezie, et partout ailleurs. Merci à tous pour ces nombreux partage et ces mots doux. J’ai adoré aussi préparer le questionnaire avec mes amis, découvrir les questions toujours plus folles que vous avez trouvées. Merci à vous, je vous dédie ce buzz. Merci aussi à Toki-Woki pour le soutient dans les moments d’erreur 500 et pour tout ce qu’il m’as appris en informatique ces dernières années !

Cette semaine aura été une course de tous les jours entre le buzz grandissant et la capacité de mon petit site à résister à vos assauts toujours plus nombreux. J’avais anticipé une grande partie car je croyais à mon idée, mais le buzz a été plus gros que ce que je pensais et certains points que je n’avais pas anticipés m’ont couté beaucoup d’argent. Je pense qu’en fin de mois, cette idée toute bête m’aura coûté beaucoup de temps et quelques 500€.
Je ne regrette absolument pas. Ce projet qui peut sembler simplissime m’a permis de me frotter à des problématiques du monde de l’internet que je ne connaissais pas vraiment, les problématiques liées au buzz et aux fortes fréquentations. J’imagine que quand Kim Kardashian a voulu casser l’internet avec la photo que vous connaissez tous, les ingénieurs du site on du faire quelques cauchemars !

Bien sûr je ne peux pas conclure sans remercier Olivia B., Daniel K., Maxence L., Quentin T. & Hélène C., Mateï C., Eliott F., et Cyrielle M. pour leur géniales contributions !

Ouverture — La Pub

Vous remarquerez que le site ne comporte aucune pub. J’ai estimé que la pub casserait l’expérience utilisateur et que de toute manière elle ne me rapporterait pas grand chose. Peut être que je me suis trompé dans mes estimations et qu’elle m’aurait en fait rapporté plus que prévu (au moins de quoi éponger les différentes factures du projets). Si quelqu’un a une idée de pub qui aurait pu s’intégrer comme il faut au site et qui aurait rapporté quelques deniers, qu’il n’hésite pas à m’en parler en me donnant des chiffres et des références. Quoi qu’il arrive, je ne regrette pas de ne pas avoir mis de pub, on a qu’à dire que je paie la tournée pour mon premier buzz mais que sur le prochain, ça ne sera pas la même !

Rock Star ou Ingénieur ?

Je vous laisse sur la seule question personnelle que j’ai mis dans le questionnaire. C’est un choix qu’on a toujours voulu me faire faire mais que par chance, je n’ai toujours pas eu le besoin de faire, je continue d’essayer de faire les deux !

Benjamin Debon
bdebon.com