12 mars 2011

ConFoo Jour 2: Sous le signe de la performance

Ma deuxième journée à ConFoo fût pratiquement dédiée aux "best practices" en matière de développement Web.  Nous n'en connaissons jamais assez à ce sujet et nous oublions trop souvent de les appliquer correctement.  Sachant que 75% des visiteurs ne reviendront jamais sur votre site si la page d'accueil prend plus de 4 secondes à charger (source), mieux vaut s'y attarder.

Alors voici un rappel pour certains ou des trucs à découvrir pour les autres:
  • Les définitions de style (css) devraient toujours se retrouver dans l'entête des pages, de cette façon, le rendu de la page se fait progressivement
  • Lorsque possible (s'il ne comporte pas de document.write par exemple), le code javascript devrait toujours se retrouver à la fin des pages afin de ne pas bloquer le téléchargement simultané des autres éléments (ex: images)
  • Les fureteurs ne peuvent pas télécharger plus de 2 fichiers provenant du même domaine en même temps. Il est donc possible de les déjouer en utilisant des CNAMES différents qui pointent vers le même serveur
  • Les cookies sont choses du passé, regardez plutôt du coté des "client-side storage" du HTML5
  • Réduire le nombre d'appel HTTP-Request en regroupant le code css et js (lorsque possible) et en utilisant davantage les css sprites
  • Très important d'utiliser les outils de "minify" (Closure Compiler, YUI compressor)
  • Favoriser les data URIs 
  • Compresser le contenu (gzip)
  • Retirer les noeuds du DOM qui ne sont plus requis
  • Utiliser le doctype de HTML5 (plus léger et humainement compréhensible)
Faire du "caching":
Utiliser des outils de "monitoring":
Après tout cela, si votre site ne vous offre toujours pas les performances attendues, il vous reste le refactoring...

Excellent article de Yahoo sur le même sujet ici (avec plus de détails en anglais).

9 mars 2011

ConFoo Day 1 - Top 10 links

  1. Nice HTML5 video player: http://videojs.com/
  2. Single URL for everything video: http://vid.ly/
  3. Useless but impressive canvas video blower demo
  4. WebSocket protocol (thinks AJAX on steroids)
  5. Be aware of ClickJacking
  6. Location-based API for your apps: http://www.yellowapi.com/overview
  7. Lots of API to integrate into your apps: http://developer.mashery.com/apis
  8. High quality, cross-platform native application development with Titanium
  9. StatusNet, a flexible, Open Source, "twitter-like" enterprise social software
  10. Complementary libraries for JQuery: Underscore.js and Modernizr
Top tweet of the day (by @muhdiekuh):

OH thats actually a good way to generate a random password: let a windows user try to exit vim

Ready for day 2?