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

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

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

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

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

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

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

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

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

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 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

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

Rock Star ou Ingénieur ?

Benjamin Debon
bdebon.com