Le projet Skool est présentement en développement. Il consiste à mettre sur pied différents types de formations spécialisées en affaires électroniques pour favoriser le développement et l'adoption des TIC dans vos organisations.
Osmose Interactif inc. /

Blogue

Suivez-nous sur les médias sociaux

Twitter Facebook YouTube

Améliorer la performance de votre application web facilement et rapidement

Si vous désirez améliorer l’expérience utilisateur de vos applications web, le temps de réponse est un élément crucial dont vous devez vous préoccuper. Votre peut être bien designer et réussir vos tests utilisateurs avec brio, mais si la page prend un temps interminable à charger, vos utilisateurs n’auront pas une expérience agréable.

Un temps de réponse de plus de quelques secondes brise le « flow » de l’utilisateur et fait en sorte que l’utilisateur perds le fil de ce qu’il était entrain d’essayer d’accomplir sur votre site.

Heureusement, il y a quelques trucs rapides et peu couteux qui peuvent vous permettre d’améliorer la performance de vos applications. En voici quelques uns.


Coté serveur

1. Utiliser un serveur séparé pour servir les images et utiliser la cache du client

Chaque fois qu’une requête est transmise à un domaine où un cookie existe, ce cookie est transmis avec la requête. Donc chaque fois que vous demandez au serveur une icône de 1Ko, 300 – 400 octets sont aussi envoyés pour rien du tout!

Pour régler ce problème, vous n’avez qu’à enregistrer un nom de domaine (ex. mystaticcontent.com) et d’installer sur ce domaine vos images. Puisque ce serveur n’enverra jamais de cookies aux utilisateurs, les requêtes pour les images n’auront pas ces cookies qui ralentissent votre site.

L’autre avantage est que le navigateur va commencer à télécharger les images en parralèle du reste des éléments de la page.

Les navigateurs peuvent ouvrir plusieurs connexions à différents serveurs. Donc, si le nom de domaine de votre site est différent du nom de domaine où sont hébergées vos images, elles seront téléchargées en parralèles.

Finalement, cette méthode vous permet de mettre en cache ce contenu. L’avantage est que le navigateur web de l’utilisateur va garder en mémoire les images et ne les téléchargera qu’une fois. Si vous utilisez la même image dans plusieurs pages, elle ne sera téléchargée qu’une seule fois.

Voici les instructions à ajouter dans le fichier htaccess de votre serveur de contenu statique : 

ExpiresActive on
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"

Temps requis : 15 min., Coût : 25$

2. Améliorer la performance de vos scripts

Cette partie dépend de votre code. La performance de vos scripts est dans vos propres mains.

Je ne peux donc pas vous donner de conseils généraux, sauf peut-être vous mentionner qu’une bonne pratique est d’afficher le temps de génération de vos scripts. Sinon, c’est difficile de savoir si le goulot d’étranglement est dans votre application, sur votre serveur ou coté client.

Afin de savoir le temps d’exécution de vos scripts en php, ajouter la ligne suivante au début de votre script : 

$mt1 = microTime();

Et ajoutez la ligne suivante à la fin de votre script. 

$mt2 = microTime();

Pour calculer et afficher le temps d’exécution, la ligne suivante : 

// Fonction qui calcule la différence entre 2 temps précis au millième de seconde
$time = DiffTime($mt1, $mt2);
printf("gentime : %2.3f sec.", $time);

Voici la fonction DiffTime :

function DiffTime($microtime1, $microtime2)
{
   // on sépare les secondes et les millisecondes
   list($micro1, $time1) = explode(' ', $microtime1);
   list($micro2, $time2) = explode(' ', $microtime2);
   // on calule le nombre de secondes qui séparent les 2
   $time = $time2 - $time1;
   // on calcule les fractions de secondes qui séparent les 2
   if ($micro1 > $micro2)
   {
      // si le nombre de millisecondes du 2° temps est supérieur au 1°, on a compté une seconde de trop
      $time--;
      $micro = 1 + $micro2 - $micro1;
   }
   else
   {
      // sinon, on fait juste la différence
      $micro = $micro2 - $micro1;
   }
   // A la fin, on ajoute les secondes et les millisecondes
   $micro += $time;
   // Et on renvoie le tout
   return $micro;
}

Une autre bonne idée est de sauvegarder les requêtes qui prennent plus de 5 secondes afin d’identifier où sont les problèmes et de savoir si ces problèmes sont fréquents.


// If time is bigger than 4 seconds, log the event and request
if ($time > 4) {
	foreach ($_SERVER as $key=>$value) {
		$request_details .= $key.' = '.$value.'\n';
	}
	foreach ($_REQUEST as $key=>$value) {
		$request_details .= $key.' = '.$value.'\n';
	}
	mysql_query("INSERT INTO performance_logs (event_time, event_details, execution_time) VALUES ('".date('Y-m-d H:i:s')."', '".$request_details ."', '".$time."')");
}



Coté Client

1. Utiliser les outils développeurs de Safari pour identifier le temps de réponse de vos scripts 

Safari contient une foule de fonction pour les développeurs. Il permet entre autre de savoir combine de temps est nécessaire pour télécharger chacun des éléments qui composent une page web.

Grâce à cet outil, vous pouvez mesurer le temps de chargement et surtout la latence.

La latence est le temps entre la demande d’un élément (image, fichier javascript, etc.) par le client et le temps du début de téléchargement. Généralement, vous pouvez augmenter significativement la performance de votre application simplement en réduisant la latence.

2. Minifier, regrouper et compresser les fichiers javascript et CSS

Chaque fois qu’un élément est demandé au serveur web, un délai est introduit. Premièrement, il y a des délais associé à l’envoi de la requête par le client. Ensuite, le serveur doit retourner le contenu. Finalement, le client doit télécharger ce contenu.

Afin de réduire cette latence, une bonne pratique est de regrouper les fichiers javascript et CSS en un seul fichier, ce qui réduit le nombre de requêtes nécessaires pour télécharger tous les éléments de la page.

Voici un exemple de la différence entre une page chargée sans que les fichiers soient « minifiés » et le temps quand les fichiers sont « minifiés » : 

Par contre, lorsque vous travaillez sur votre site, vous voulez pouvoir séparer vos fichiers afin de pouvoir travailler sur les fichiers individuellement. Comment faire? 

Minify est un outil qui regroupe automatiquement une série de fichiers Javascript ou CSS en un seul fichier et qui enlève tous les espaces et tabulations superflues. L’installation et la configuration est très simple et ne prends que quelques minutes

Afin de simplifier votre workflow, voici un petit truc. Utilisez une variable de configuration pour dire au script sur quel serveur il se trouve. S’il est en production, utiliser Minify, sinon, utilisez les fichiers séparés (afin d’éviter de cacher les fichiers qui vont changer constament pendant le développement).

3. Utiliser le code hébergé sur les serveurs de Google

Si vous utilisez Jquery ou d’autres outils open source de développement, vous pouvez utiliser les versions hébergées par Google. Cette méthode à plusieurs avantages : 

  • Les utilisateurs ont probablement déjà une version en cache
  • Le temps de latence est très bas
  • Le contenu est envoyé Gzippé

Voir http://code.google.com/intl/fr/apis/ajaxlibs pour la liste des libraries que vous pouvez inclure à partir des serveurs de Google

4. Tester sur une connexion basse vitesse

De nos jours, c’est plutôt rare qu’un développeur ait une connexion modem à sa disposition. Le plugin Firefox Throttle vient solutionner ce problème. Il s’agit d’un plugin qui vous permet de tester votre site web avec une connexion 56K afin de voir si l’expérience est satisfaisante pour les utilisateurs qui ne dispose pas d’Internet HV. Une bonne idée est de tester des sites souvent utilisés (Facebook, Hotmail, etc.) et de vous comparer à ceux-ci.

5. Utiliser un indicateur de progrès pour les opérations de plus de 10 secondes (ex.: upload de fichiers)

Afin de montrer à l’utilisateur que votre application n’est pas « buggée » pendant des opérations qui prennent plus de 10 secondes, une bonne pratique est de montrer un indicateur de progrès. Une panoplie d’indicateur peuvent être créés sur ajaxload.info 

Dans le cas des uploads de fichiers, vous pourriez utiliser un script d’upload asynchrone  comme celui-ci


Aller plus loin

Voici quelques liens qui peuvent vous aider à améliorer encore plus vos applications : 


Crédit photo : jonycunha

Publié le par André-F. Landry | Posted in Code | Commentaires fermés

Catégories