touch.gg – Développement et optimisations (web)

Précédemment : intro & partie technique

CMS

J’utilise SPIP depuis des années et ce projet me permet de me mettre à jour sur certaines fonctionnalités de la version 3.X de ce CMS.

Quelques avantages :

  • C’est un CMS simple, robuste et très bien conçu. Il n’est pas parfait mais je le porte dans mon coeur depuis des années.
  • Il est bien sécurisé et n’étant pas très répandu il ne risque pas de faire l’objet d’une quelconque attaque.
  • La boucle DATA me permet de travailler sur le flux JSON de l’AppStore très facilement.

Outils

MAMP pour le développement sur ma machine perso, Sublime Text pour l’édition du code et Pixelmator les 2 images que je vais avoir à créer.

CSS / JS

Vu que le site s’adresse en particulier à des utilisateurs d’iPhone/iPad je me devais de le rendre le plus accessible possible sur ces machines.

Voilà une parfaite excuse pour me mettre à niveau sur un truc très à la mode ces deux dernières années dans le milieu du web : le Responsive Design.

C’est bien la première fois que j’avais envie d’en faire, jusqu’à présent c’était pour moi une expression à la mode que des clients mettaient dans leurs appels d’offres sans trop savoir ce que ça pouvait impacter sur leur site, les budgets ou si ils en avaient vraiment besoin.

Bref, j’ai pris comme base le framework Kube.css qui à l’avantage d’être léger et de ne pas trop s’éloigner de ce pourquoi il est fait : une très bonne base pour commencer un site en RWD.

Au niveau des scripts JS il n’y a rien de très folichon hormis :

  • FastClick – une librairie qui permet d’éliminer de délais de 300ms entre le moment ou on touche l’écran d’un appareil mobile et où le clic est pris en compte.
  • OffCanvas-nav – un superbe menu ultra rapide car il est animé avec des transitions CSS plutôt qu’en JS. Combiné à FastClick c’est très chouette !

Je ne sais pas trop quoi dire de plus sans rentrer trop dans les détails. Si vous avez des questions n’hésitez pas à me les poser.

Sur la page About this website vous trouverez un changelog assez light du site depuis sa version Beta, il est accompagné de screenshots d’anciennes versions du site… si vous avez envie de vous marrer…

Optimisations

J’ai voulu aller le plus loin possible au niveau de l’optimisation du serveur et de mon application, plus par défi personnel que pour autre chose.

J’ai usé et abusé de GTmetrix pour mesurer la performance de mon code HTML, l’idée étant d’avoir le meilleur score Page Speed & YSlow possible.

Pour cela :

  • mes CSS et JS sont minifiés et combinés
  • mes requêtes HTTP sont réduites au minimum vital
  • mes images très compressées (JPEG à 40% mais de tailles importantes pour un rendu correct sur écrans retina)
  • tout est GZIPé au niveau du serveur
  • la mise en cache des navigateurs est sollicité par des directives Apache
  • j’utilise plusieurs sous-domaines pour dispatcher les requêtes des navigateurs sur mes medias (images/css/js)

http://html5boilerplate.com a été une très bonne source d’inspiration et de conseils.

J’obtiens des scores très corrects (82%-85%), si je ne gérais pas les images retina (ou si je le faisait d’une autre façon) j’obtiendrais très aisément un score au dessus de 90%.

Autre outil intéressant pour mesurer les performances de son site : blitz.io.

Du côté du serveur cela a été un peu plus compliqué, comme je l’ai expliqué précédemment je me suis concentré sur le module PHP « MPM-worker » pensant qu’il serait la réponse à tous mes besoins.

Au dernier moment, deux jours avant la sortie officielle du site, j’ai décidé de tester le reverse-proxy Varnish. Je pensais m’embarquer dans quelque chose qui allait me prend beaucoup de temps et me rajouter du travail mais il en a été tout autre. En un quart d’heure Varnish était installé et configuré, tournait correctement, et les performances étaient au-delà de mes espérances !

150 utilisateurs simultanément et le serveur ne répond plus qu'avec un délais de 600ms
Avant Varnish - 150 utilisateurs simultanément et le serveur ne répond plus qu'avec un délais de 600ms
Après Varnish
Après Varnish - 250 utilisateurs simultanément, réponse du serveur en 100ms !

A suivre : communication et réception du site.

touch.gg

http://touch.gg

http://twitter.com/touchGG

6 réflexions au sujet de « touch.gg – Développement et optimisations (web) »

  1. En tant que nouvel utilisateur d’iPad, ton site tombe à point nommé pour moi !
    J’ai pu découvrir pas mal de jeux, j’ai hâte que ta base de données soit encore enrichie (c’est le moment de ressortir tous les Canard Console pour lister leur sélection).

    A mes yeux la feature la plus intéressante est la catégorisation des jeux. J’en cherche qui se jouent à 2 sur iPad, même si la partie Multiplayer n’est pas encore très fournie je sais que je peux espérer y trouver mon bonheur.

    Le design est coloré, peut-être un poil chargé.

    Bref une bonne idée, compte sur moi pour suivre l’actualité du site.
    Félicitations pour le travail accompli.

  2. Merci Valryon.
    Ouais la chronique de Netsabes m’a orienté sur quelques jeux 🙂

    C’est pas la première fois qu’on me dit que la catégorique multi-joueurs est intéressante, c’est finalement pas facile de trouver des jeux comme ça sur l’App Store… Il faut que je revois les jeux de cette catégorie, j’en ai à tester et certainement certains à virer.

  3. Tu devrais peut-être virer « So Long, Oregon. Let’s go find El Dorado. »

    J’ai suivi ton conseil, je l’ai acheté, sauf que ce n’est pas un jeu, mais une blague, un peu comme le M.E.R.D.E. de Chaka, sauf que là les mecs le vendent 1,80€. Pour le coup, je me méfie du reste de ta sélection…

  4. Bon, t’as pas choisi le plus simple.
    Moi j’y ai passé une très bonne heure, c’est déjanté, bordélique mais pas trop frustrant pour autant.

    T’as regardé la vidéo avant de l’acheter ? Elle résume bien ce qu’est le jeu.

    Mais je dis pas que je vais le garder indéfiniment dans ma liste, ce sera probablement un des premiers à partir lorsque j’arriverai aux alentours des 110-120 jeux.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *