Refonte du site de musique music.gameandme.fr

Peut être ne connaissez-vous pas encore mon site de musique permettant de naviguer dans Youtube à travers une interface épurée et un algorithme de similarité exceptionnel 🙂 – un peu comme Youtube Music.
J’en avais déjà parlé dans cet article « la musique de Youtube dans une belle interfaçe », et pour ceux qui veulent l’essayer, il se trouve sur l’adresse https://music.gameandme.fr .
Bref, j’avais créé cet outil avec du code propriétaire et le petit framework Limonade. Mais, je voulais offrir une meilleur expérience, et une meilleure maintenabilité, alors j’ai tout recodé. Voyons ensemble le détail de cette opération.

Optimisation SEO:

J’ai fait en sorte d’avoir des urls plus SEO que précédemment. Avant, tout était appelé en AJAX, et il n’y avait donc aucun contenu dans le code-source des pages. Désormais, les blocs de contenus sont toujours dans des templates séparés mais ils sont aussi appelés depuis la page /artist/nom_de_lartiste. Ce qui provoque de fait une meilleure indexation. Il n’y a plus de template appelé en javascript avec un eval …, mais bien un template full html qui permet d’améliorer la lisibilité du code, et d’encoder plus facilement toutes les variables . Ex : K’s choice , et oui l’apostrophe ne pose plus de problème lorsqu’il est encodé en JSON 🙂

De plus, avec Laravel, il est possible d’accélérer le rendu assez simplement. En utilisant le webpack.min.js à la racine, vous concaténez vos ressources CSS et JS dans un seul fichier.
Il faut alors lancer la commande « npm run production »
Le mode Debug, vous permet ainsi de continuer à utiliser les différents fichiers, et le mode prod d’en avoir qu’un seul pour gagner en performance.

Laravel et minification du code:

La librairie https://github.com/HTMLMin/Laravel-HTMLMin vous permet également de faire en sorte que votre compte soit concaténé au niveau du rendu (supprimant les espaces, les retours à la ligne…), ainsi, une fois encore vous gagner en performance, et donc en SEO.

Base de données:

Auparavant, j’utilisais une base SQLite pour stocker les données car dans une base mysql, j’atteignais trop rapidement le quota OVH. Mais plus la base grossissait, et plus la recherche dans SqlLite était lente. J’ai donc passé tout mon modèle en format NOSQL avec le Datastore de Google. Normalement, je devrais avoir plus de mémoire avant de devoir passer à la caisse, et coté performance, ça ne se dégradera pas avec la volumétrie.

Refonte graphique:

J’ai effectué quelques ajustements graphiques. Le logo a été vectorisé, facilitant ainsi son redimensionnement. J’ai également pu mettre en place quelques règles CSS 3 qui ajoutent un certain confort visuel. Le loader devient le logo qui tourne sur lui même grâce aux directives:
-webkit-transform: rotate(360deg);
-webkit-animation:spin 2s linear infinite;

L’emplacement des blocs de la version mobile est différent de la version Desktop et permet d’accéder plus facilement aux vidéos grâce à ses quelques règles CSS:
display: flex;
flex-direction: row;
#row1 :nth-child(1) { order: 6; }

Les images n’étant pas hébergées par moi ne peuvent être optimisées davantage. Un javascript a été placé au chargement de la page afin de ne charger que celles qui sont visibles. Les suivantes sont chargées en différées.

Micro données:

Des micro données ont étés placées un peu partout pour définir les artistes (http://schema.org/MusicGroup), les albums (http://schema.org/MusicAlbum) et aussi les titres avec (http://schema.org/MusicRecording). Normalement, cela devrait aider à l’indexation.

Sécurité:

J’ai abandonné la fonction qui permettait d’ajouter des favoris à ses comptes LastFM. Très peu utilisée, elle nécessitait que les utilisateurs enregistrent leur mot de passe Last FM sur l’application (pas très sécurisant) . On en revient donc uniquement à indiquer son nom d’utilisateurs pour récupérer ses artistes préférés et l’information est directement stocké dans les cookies des internautes. Donc sans base utilisateur, plus de problème de failles 🙂

Conclusion:

Dites-moi ce que vous en pensez en commentaires. J’ai vraiment l’impression d’avoir fait un programme utile (pour une fois), alors j’aimerais qu’ils servent au plus grand nombre…