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

touch.gg – Intro & partie technique

Fin 2012 j’ai eu une nouvelle idée de site internet. C’est pas la première fois, mais cette fois-ci les astres s’alignaient enfin pour que je m’y mette :

  • contrairement à d’autres idées que je traine depuis des années celle ci est relativement simple à mettre en place
  • j’ai pris une grande claque en 2012 en suivant le blog et les tweets de Anahkiasen, faire mon propre site est l’occasion parfaite pour me remettre à jour sur un tas de trucs
  • ma tendinite qui ne me lâche plus depuis deux ans m’empêche de me lancer dans le développement d’un nouveau jeu mais m’autorise enfin à passer quelques heures par semaines sur le développement d’un site

Me voilà donc lancé dans le développement d’un site sur une idée ultra simple : proposer les meilleurs jeux iOS disponibles, et uniquement la crème de la crème !

Pour en savoir un peu plus sur ma démarche et sur la philosophie du site je vous laisse lire cette page d’information.

Partie technique

Voilà un domaine dans lequel j’avais peu d’expérience, cela s’avérera être une partie des plus intéressantes pour moi.

Serveur

Je voulais avoir la main sur l’ensemble du serveur, je me suis donc tourné vers un VPS qui me permet d’avoir l’équivalent d’un serveur perso mais à moindre coût. J’ai passé de nombreuses heures à chercher le bon hébergeur, je me suis finalement fixé sur un hébergeur travaillant exclusivement avec des disques SSD : Ramnode (lien affilié, lien classique). Cela n’avait finalement que peu d’importance au final (on verra plus tard pourquoi), néanmoins je suis content d’avoir trouvé ce petit hébergeur « familiale », il fait du très bon boulot !

Quelques stats sur cet hébergeur : http://serverbear.com/622-1024mb-svz-ramnode

Installation

Ne connaissant pas grand chose aux différentes distributions Linux je me suis laissé guider vers Ubuntu.

S’en est suivi les étapes classiques d’installation d’un serveur LAMP, étant relativement novice dans la gestion d’un serveur j’ai pris soin de noter toutes les étapes et de me renseigner sur internet avant chacune d’entre elles.

webmin/sqlite/phpmyadmin/imagemagick/…

J’ai ensuite passé de nombreuses heures à essayer de configurer Apache au mieux, l’objectif étant d’avoir un serveur suffisamment robuste pour accueillir une centaine de visiteurs simultanés. Je me suis donné cet objectif comme un exercice d’apprentissage sachant très bien que je n’avais que peu de chance d’avoir autant de visiteurs sur mon site.

J’ai choisi d’utiliser le module « MPM Worker » pour Apache puisque c’est celui qui semblait le mieux répondre à cet objectif. Le plus gros problème à ce niveau-là et qu’il y’a peu de documentation sur ce module et sur la façon de le configurer correctement. J’ai donc perdu beaucoup de temps sur ce point là.

Sécurité

D’un point de vue de la sécurité j’ai fait quelques petites erreurs que je ne détaillerai évidemment pas ici (j’ai la flemme de les corriger…).

Si j’ai un seul conseil à donner de ce point de vue là c’est de lire le guide suivant avant de faire quoi que ce soit sur votre VPS :

http://plusbryan.com/my-first-5-minutes-on-a-server-or-essential-security-for-linux-servers

Logwatch et Fail2ban me semblent être deux outils incontournables pour sécurisé un serveur.

Dans les prochains articles je détaillerai :

touch.gg

http://touch.gg

http://twitter.com/touchGG

Ouverture de touch.gg – « Les meilleurs jeux iOS sont ici »

Vous aimez jouer sur votre iPhone/iPad mais vous avez du mal à trouver de bons jeux ?

Il y’a un site web pour ça : http://touch.gg

touch.gg

Je vais très vite revenir dans un post beaucoup plus long sur la mise en place de ce site qui m’a pris quelques mois (sur mon temps libre évidement).

D’ici à ce que cet article soit prêt je vous laisse découvrir le site.

http://touch.gg

http://twitter.com/touchGG