Dans cet article nous allons voir en détail quelques exemples d'optimisation à effectuer côté serveur web. Je n'ai pas souhaité classer ce post dans la catégorie "Tutoriels" car il s'agit ici plus d'une présentation de certains concepts plutôt que d'une véritable recette à suivre pas à pas. 

Gestion des connexions (TCP) persistantes :

La notion de connexion persistante vise à conserver la connexion TCP entre le client et le serveur pendant un bref instant. Ceci permet d'effectuer plusieurs requêtes HTTP avec une seule connexion. Pour activer les connexions persistantes, il est nécessaire de configurer le serveur de manière à ce qu'il notifie au client qu'il accepte celles-ci. Ceci s'effectue via l'en-tête "Connection" et la valeur "keep-alive" :

keep-alive

Voici un exemple de configuration Apache à placer dans le fichier de configuration (vhost ou htaccess) :

KeepAlive On #active la gestion des connexions persistantes
MaxKeepAliveRequests 100 #nombre de requêtes possibles
KeepAliveTimeout 15 #temps d'inactivité sur une même connexion

Attention, dans le cas où la majorité de vos documents statiques (css, javascripts, images) sont servis par un CDN (Content Network Delivery), il est préférable de ne pas autoriser les connexions persistantes. En effet, on sait dans ce cas que le client ne demandera pas d'autres ressources, il serait donc contre-performant de maintenir les connexions ouvertes.

Optimisation du cache navigateur :

Nous allons voir ici comment manipuler les en-têtes suivantes : expires, cache-control, Etag et Last-modified.

L'en-tête "Expires"

Cet entête définit la date d'expiration d'une ressource au sein du navigateur. Toute ressource arrivant au client avec cette en-tête sera mise en cache et permettra ainsi de délester le serveur Apache. Pour manipuler cette en-tête, il est nécessaire d'activer un module grâce à la commande : "a2enod expires". Vous pouvez ensuite configurer le cache au niveau de votre vhost ou .htaccess :

ExpiresActive On #on active l'expiration 
ExpiresByType image/gif "access plus 1 month" #les gif expirent un mois après leur accèsExpiressByType text/html "modification plus 1 week" #les fichiers HTML sont disponibles une semaine après leur mise à jour.

L'en-tête "Cache-Control"

Cet en-tête permet une plus fine gestion des caches en différenciant les navigateurs et les serveurs proxy. Voici les différentes valeurs possibles :

  • private : mise en cache possible pour les navigateurs mais pas pour les proxy
  • public : mise en cache possible pour les navigateurs et les proxy
  • no-cache : oblige les navigateurs et proxy à revalider systématiquement la ressource à chaque demande auprès du serveur
  • no-store : interdit la mise en cache de la réponse – must-revalidate : la ressource doit être revalidée si elle arrive à expiration (navigateur + proxy)
  • proxy revalidate : la ressource doit être revalidée si elle arrive à expiration (proxy uniquement)
  • max-age=xxx : temps relatif par rapport à la date de la réponse, pendant lequel le contenu est toujours vaide
  • s-maxage=xxx : identique à max-age mais s'applique aux proxy
  • no-transform : empêche les proxy d'encoder ou compresser les ressources

Généralement ces en-tête sont gérés automatiquement au sein des frameworks, applications, CMS etc. il est cependant possible de les configurer via le module "mod_header" d'Apache.

L'en-tête Etag (Entity Tag)

L'Etag correspond à une sorte d'identifiant de ressource. Ainsi, si la ressource est modifiée, l'Etag renvoyé par le serveur dans les en-têtes HTTP changera. L'Etag est structuré de la manière suivante :

  • numéro d'inode de la ressource sur le serveur (INode)
  • taille en octet de la ressource (Size)
  • date et heure de dernière modification (MTime)

La directive Apache "FileEtag" permet de modifier la structure de ce tag.

Compression des documents

Compresser ?

La compression des documents permet d'optimiser le chargement des pages. En effet, les contenus étant de plus en plus riches et variés (images, fichiers audios, fichiers vidéos, SVG, HTML, PDF etc), le poids des pages augmente, la consommation de bande passante est impactée en conséquence. 

Le fonctionnement est le suivant :

  1. Le serveur compresse les données
  2. Les documents compressés sont envoyés par le réseau
  3. Le navigateur décompresse les données avant d'en effectuer le rendu

Avantages / inconvénient ?

Bien que la compression ait un coût en terme de temps processeur, les gains concernant l'utilisation de la bande passante ainsi que le temps de chargement sont conséquents. Alors pourquoi s'en priver ?!

Quels fichiers compresser ? La compression est très efficace sur les données de type HTML, texte, PDF, CSS, Javascript ; en revanche il est quasiement inutile de compresser les fichiers binaires (images, vidéos, flash).

Mise en place sous Apache

  1. Activation du "mod_deflate" grâce à la commande : a2enmod deflate
  2. Configuration du vhost ou .htaccess :
<ifmodule mod_deflate.c>
   AddOutputFilterByType DEFLATE text/plain
   AddOutputFilterByType DEFLATE text/xml
   AddOutputFilterByType DEFLATE text/html
   AddOutputFilterByType DEFLATE text/css
   AddOutputFilterByType DEFLATE application/x-javascript
</ifmodule>
  1. Redémarrer Apache : service Apache2 restart (ou reload)

Conclusion

Cette article vous a présenté différentes oprimisations possibles avec Apache. Pour plus de détails, je vous conseil de lire l'excellent bouquin "Performances PHP – Audit et optimisation LAMP" aux éditions EYROLLES.

Je vous suggère également de consulter ce site http://browserdiet.com/ qui donne de très bon conseils pour améliorer les performances d'un site web. J'ai également rédigé une présentation consacrée aux web performances, ça se passe ici.

Il y à quelques semaines, je vous présentais un excellent outil de présentation Reveal.js. A cette occasion, je vous avais annoncé que je travaillais sur une présentation en rapport avec les web performances. Et bien, voilà, la présentation est disponible à cette adresse : http://supports.severin-bruhat.com/web-performance.

Au programme :

  • conseils sur les étapes de maquettage, d'intégration et de développement
  • les différents types de cache
  • quelques outils d'analyse
  • une démo

Cette introduction est basée principalement sur mon expérience LAMP, c'est pourquoi vous trouverez des références à Apache et PHP. Cependant, la majorité des concepts abordés s'applique à tous les languages.

Bonne lecture !

 

Chose promise, chose due ! Voici un nouvel article consacré aux conférences du BLEND Web Mix 2013.

Concevoir son API web

Speaker : Eric Dapset
Support de présentation : http://fr.slideshare.net/edaspet/blend-web-mix-2013-concevoir-son-api

Une présentation très "imagée" (cf support), basée sur des retours d'expériences. Eric nous a présenté une liste de bonnes pratiques à appliquer  :

  • Mettre en place un bac à sable
  • Développer des exemples d'utilisation : cas pratiques, pas à pas (plus utilie et interactif qu'une docuentation)
  • Commencer par une API simple, l'enrichir dans un second temps
  • Utiliser du SSL
  • Encoder en utf-8
  • Utiliser le format date/heure avec fuseau horaire (timestamp)
  • Limiter les versions (créer uniquement des versions majeurs)
  • Préciser le numéro de version dans l'URL (ex: http://monapi.fr/v1/methode)
  • Utiliser une authentification HTTP basic (+HTTPS)
  • Utiliser les codes d'erreur HTTP
  • Préférer le format XML au JSON (plus simple à faire évoluer)
  • Utiliser la compression gzip et le cache (côté Apache par exemple)

Tour d'horizon de Node.js

Speaker : Christophe Porteneuve
Support de présentation : http://delicious-insights.com/node-blend/#/

Une conférence très "vivante", pleine de trolls ani-java :). Personnelement, c'était ma première approche de Node.js, cette techno à l'air vraiment performante et intéressante. Je pense que je ne vais pas tarder à mettre les mains dans le bouzin !

Cette conférence m'a tellement intéressé que je n'ai malheureusement pas eu le temps de prendre de note… Heureusement, le support est là 😉

La technique au service de l'entreprenariat

Speaker : Maxime Valette

Maxime Valette nous a ici présenté sa vision du business en s'appuyant sur son parcours. Voici les points ayant retenu mon attention :

  • Bien choisir son/ses associé(s)
  • Etre passionné
  • Avoir de l'ambition et ne pas craindre l'échec
  • "sortez boire des bières", le phases de repos sont obligatoires pour être productif, de plus certaines bonnes idées arrivent en discutant autour d'un verre
  • Etre sceptique mais jamais cynique (le pessimiste se plaint du vent l'optimiste espère qu'il va changer le réaliste ajuste ses voiles)

Pourquoi les workers queues sont-elles importantes pour dynamiser votre application web ? 

Speaker : Clément Jobeili
Support de présentation : http://dator.fr/slides/blend13/#/13

"Avez-vous déjà essayer d'importer un csv de 1 000 000 de lignes dans mysql ?" -> fail !!!
Ce type de traitement est très gourmand en temps et en ressources, il peut rapidement devenir bloquant. Heureusement les workers queues sont là ! 

Le fonctionnement est plutôt simple : un message est stocké dans une file d'attente puis traité par un "worker". Le traitement est asynchrone donc non bloquant, ce qui permet de traiter plusieurs tâches en parallèle. 

Voici les différentes solutions présentées : RabbitMQ, Resque, Beanstalk.

Dart, one language to rule them all

Speaker : Sébastien Deleuze
Support de présentation : http://fr.slideshare.net/sdeleuze/dart-mixit2013en
 

Dart est un nouveau langage mis au point par Google. Et qui dit nouveau dit "plus ou moins stable". Les applicatins actuelles codées en Dart sont principalement des prototypes, une version stable de Dart devrait dependant voir le jour très prochainement.

Sébastien Deleuze nous a ici venter les mérites de ce language :

  • simple à prendre en main 
  • nombreuses API
  • fonctionnel sous tous les environements/navigateurs (support natif ou utilisation de dart2js)
  • performant

Je pense que ça vaut le coup de s'intéresser au sujer…

Mardi et mercredi dernier, j'ai eu l'occasion d'assister à certaines conférences du BLEND. Le Blend Web Lix, comme son nom l'indique, est un mélange : un mélange d'ingrédients du web. Les conférences étaient organisées autour des thématiques suivantes : business, design, marketing, recherche et technique.

Pour ma part, voici le programme que j'ai suivi :

jour 1 jour 2
Introduction aux design patterns avec PHP Concevoir son API web
Ciel, mes données ne sont plus relationnelles Tour d'horizon de Node.js
More CSS secrets La technique au service de l'entreprenariat
Le futur des effets graphiques en CSS3 / Automatisez vos tâches répétitives avec Grunt.js Pourquoi les workers queues sont-elles importantes pour dynamiser votre application web ? 
La web performance Dart, one language to rule them all

Je vais vous donner, dans ce post, un petit résumé de ce que j'ai retenu de ces différentes conférences. Cette article n'a pas vocation à vous "instruire" sur un sujet, c'est plus un retour d'expérience , je vous invite donc à vous référer aux supports de présentation pour plus de détails. 

Introduction aux design patterns avec PHP

​Speakers : Julien Pauli & Hugo Hamon
Support de présentation : 
https://speakerdeck.com/hhamon/introduction-to-design-patterns-with-php

Cette conférence étaient consacrée aux différents patrons de conception applicables dans le domaine professionnel. Tout le monde a appris durant ses études ce qu'était un patron de conception, mais qui applique réellement ces concepts au quotidien ? Si vous faites parti des développeurs qui, comme moi, travaillez avec des CMS ou framework au quotidien, vous manipulez probablement ces patterns sans même vous en rendre compte. Mais une petite piqûre de rappel ne fait de mal à personne, voci un petit résumé de ce qui a été dit.

Les design patterns reposent sur le principe SOLID :

  • Single Responsability Principle : « A class should have one reason to change. »
  • Open Closed Principle : « Classes, methods should be open for extension, but closed for modifications. »
  • Liskov Substitution Principle : « Subtypes must be substituable for their base types. »
  • Interface Segregation Principle : « Clients should not be forced to depend on methods that they do not use. »
  • Dependency Inversion Principle : « High level modules should not depend on low level modules. Both should depend on abstractions. », « Abstractions should not depend on details. Details should depend on abstractions. »

​Voici un aperçu des 5 design patterns étudiés :

Design Pattern Intérêt Cas d'utilisation
Composite Présenter un objet comme une collection d'objets Arbre, XML, formulaire (symphony)
Decorator Eviter trop de surcharge d'héritage, ne pas "casser" l'existant Ajout d'un système de log ou d'un système de cache
Strategy Encapsuler des algorithmes de même nature pour qu'ils soient interchangeables  Changer le système de stockage des sessions, comparaison/tri de tableaux
Factory Simplifier la création d'objets : une seule classe permet d'instancier des objets de différentes classes ("keep instanciation process in one single place") Gérer des produits et des "packages" de produits de manière transparente
Observer Permet de coupler les modules de manière à réduire les dépendances Gestion d'évènements, une classe déclenche des actions

Ciel, mes données ne sont plus relationnelles

​Speaker : Xavier Gorse

Dans certains cas, le classique schéma de données "relationnelles" ne permet pas de répondre aux besoins, notamment si la volumétrie est importante ou bien que la complexité d'un algorithme est élevée (domaine de la recherche par exemple). On peu alors mettre en place une architecture NoSQL (Not Only SQL) devant répondre à 4 problématiques :

  • Données non relationnelles
  • Scalabilité
  • Absence de schéma (structure)
  • Architecture distribuée

On distingue 4 grandes catégories d'outils (la dernière étant surtout réservée au domaine de la recherche) :

Key / value

Concept : hashmap permettant de stocker les informations sous forme de paire.
Cas d'utilisation : cache, session
Avantage : simple

Inconvénient : trop simple -> impossible d'effectuer une requête sur une partie de la valeur
Exemple d'outil : redis

Document

Concept : hashmap contenant une clé et une collection de valeurs (JSON)
Avantage: plus souple que le modèle clé / valeur
Inconvénient : performance limitée en cas de forte volumétrie
Exemple d'outil : mongoDB

Graph

Concept : modélisation des connexions entre les données ; manipulation de nodes, propriétés et relations
Avantage : puissant et rapide
Inconvénient : non scalable 
Exemple d'outil : Neo4j

Column-oriented

Concept : les données sont représentées sous la forme de blocs de colonnes stockés de manière triée. Ce système est conçu pour gérer des volumétries importantes de données
Avantage : très scalable
Inconvénient : complexe
Exemple d'outils : cassandra, bigtable

La modélisation a un impact sur l'applicatif, ainsi, le choix de l'outil à mettre en place dépend du projet. Pour faire simple : "il faut stocker les données en fonction de la manière dont vous devez les requêter" dixit Xavier Gorse.

More CSS secrets

​Speaker : Lea Verou
Support de présentation : http://lea.verou.me/more-css-secrets/#intro

Cette conférence était très technique et intéresante. Le speech étant en anglais, je n'ai malheureusement pas eu le temps de prendre de notes. Je vous conseille de jeter un oeil à la présentation qui est d'une excellente qualité (à l'image du speech).

Le futur des effets graphiques en CSS3

Speaker : ​Vincent De Oliveira
Support de présentation : http://www.iamvdo.me/conf/2013/blend/

Suite à un petit problème de timing, j'ai manqué le début de la scéance. Vincent De Oliveira présentait des fonctionnalités CSS encore à l'état expérimental. Une présentation très sympa donnant envie de tester ces différents effets.

Voici les différents points abordés :

  • fonctions d'image
  • masques
  • exclusions et formes
  • filtres

Je vous conseil de jeter un oeil au support. L'ensemble de ces effets sont foncionnels sous webkit.

Automatisez vos tâches répétitives avec Grunt.js

Speaker : Corinne Schillinger 
Support de présentation : http://fr.slideshare.net/inseo/grunt-corinne-schillinger-26743692 

Grunt est un outil permettant d'automatiser les tâches répétitives d'un projet telles que : compacter et minifier les fichiers JS et CSS, compiler les sources sass ou less, exécuter des tests unitaires, et compresser les images. Il repose sur node.js et npm (Node Packaged Modules), il est donc nécessaire de disposer de ces deux éléments pour l'utiliser.

De mon point de vue cet outil est très simple à manipuler et permet de gagner un temps précieux et d'améliorer la qualité de vos projets. 

Je pense rédiger prochainement un article consacré à cet outil.

Web performace

Speakers : Damian Le Nouaille, Goulven Champenois

Cette conférence fût pour moi, plus une piqûre de rappel, qu'un réel apprentissage, mais un petit "bourage de crâne" de temps en temps ne fait pas de mal. Damian et Goulvien ont principalement parlé des éléments suivants:

  • minification / compression js et css
  • minification des images
  • sprite css
  • chargement asynchorne (AJAX)
  • webfonts
  • cache busting
  • CDN

Cette conférence s'orientait autour de deux axes: une présentatrion théorique et une présentation plus concrète basée sur une timeline présentant les différents axes d'amélioration et leurs résultats. 

Conclusion

Ce fut une expérience très enrichissante, tant d'un point de vue professionnel qu'humain. Un tel évènement permet de rencontrer un tas d'acteurs du web intervenant dans des domaines différents et complémentaires à la fois (développement, marketing, référencement, design, veille…).

J'ajouterai les supports manquant lorsque je les aurai récupérés.

Et comme un peu de teasing ne fait de mal à personne, je vous annonce qu'un deuxième billet détaillant les conférences du deuxième jour est à venir 😉