Améliorer les performances : partie 1

Voilà je viens de recevoir le livre « High Performance Web Sites« . j’ai donc décidé de commenter une à une les différentes règles et d’essayer de les appliquer sur Wanarun.

Au départ :

  1. Make fewer HTTP requests => note : B
  2. Use a CDN => note : F
  3. Add an Expires header => note : F
  4. Gzip components => note D
  5. Put CSS at the top => note A
  6. Put JS at the bottom => note B
  7. Avoid CSS expressions => note A
  8. Make JS and CSS external => n/a
  9. Reduce DNS lookups => note B
  10. Minify JS => note B
  11. Avoid redirects => note A
  12. Remove duplicate scripts => note A
  13. Configure ETags => note F

Première règle : Réduire la taille du javascript

Ca me semble être une bonne idée, je ne me suis jamais penché sur cette problématique.

Yahoo nous donne quelques pistes et je décide d’utiliser YUI Compressor.

Je décide de compresser la librairie Prototype et la librairie de Wanarun

Résultats de la compression :

  • Wanarun : 62 ko => 37 ko
  • Prototype : 71 ko => 43 ko

Par contre mauvaise nouvelle, une erreur dans le javascript de prototype.

Je teste ensuite ShrinkSafe :

Résultats de la compression :

  • Wanarun : 62 ko => 40 ko
  • Prototype : 71 ko => 50 ko

La compression est moins bonne mais pas d’erreur javascript dans prototype.

L’expérience est globalement positive, les temps de chargement sous firebug sont moins long qu’avant et dans Yslow wanarun passe de B à A sur le « Minify JS »

Note globale : D (62)

A suivre….

Modification javascript pour les tables

Comme plusieurs d’entre vous veulent connaitre les modifications que j’ai fait pour les tableaux javascript (suite des commentaires sur l’article « Economisez votre serveur : Triez en javascript »

Pour rappel, la page d’exemple se trouve ici : la page des entrainements de MARC78 sur Wanarun

Les modifications de la librairies sortable.js
Ajout d’une variable pour la taille des pages

var maxRows=20;

Ajout de la fonction showPageTable()

function showPageTable(table,number)
{
  for (j=1;j<table>{
    if (j=(maxRows*(number)+1))
    {
      table.rows[j].style.display='none';
    }
    else
    {
      table.rows[j].style.display='';
    }
  }
}

Modification de sortables_init()

//après la ligne
ts_makeSortable(thisTbl);
//j'initiliase mon tableau sur la premiere page
showPageTable(thisTbl,'1');

Dans le php

//il faut définir une variable commune avec le javascript
define("NB_LIGNE_TABLEAU",20);
 
$list=$data["performance"];
$page_str="";
$separator=" | ";
$nb_page=floor(sizeof($list)/NB_LIGNE_TABLEAU)+1;
if ($nb_page&gt;1)
{
        for($i=1;$i&lt;=$nb_page;$i++)
        {
                $page_str.="<a href="#">".$i."</a>";
                $page_str.=$separator;
        }
        echo substr($page_str,0,-strlen($separator));
}

Firebug

C’est sans aucun doute la meilleure extension firefox que j’ai vu ! Elle m’a même reconcilier avec le CSS et le Javascript !

Console pour la gestion des erreurs : Javascript, CSS,..

Exploration HTML :

Exploration CSS :

Mesure des temps de chargements :

Télécharger Firebug

Javascript : attention aux chargements

Vous avez surement remarqué depuis l’apparition des sites web 2.0 avec l’apparition d’Ajax, le code Javascript des sites a pris de l’embonpoint. Raison à cela : la multiplication des librairies javascript (prototype, script.aculo.us, dojo et autres librairies).

On se retrouve avec 5 / 6 voire 10 includes javascript au début de la page (sans compter les tags google analytics et autres).

Donc parfois la première page est souvent laborieuse à venir . Après je vous accorde que le navigateur fait son boulot et gère correctement le cache mais le chargement de la première page c’est aussi la première impression de l’internaute.

En fait le probleme est très simple, un navigateur ne parallelise pas le chargement des includes javascript, il les lit dans l’ordre car il interprete le code. On se retrouve donc avec une suite de requetes de chargements / interpretations de fichier javascript.

La solution est simple, vous pouvez développer avec une liste de fichiers javascript mais lors de la mise en production, concatenner tous vos fichiers javascript en 1 seul (plus gros mais unique donc un peu moins rapide à charger mais une seule requete et pas d’attente)

Economisez votre serveur : Triez en Javascript

Avec un peu de javascript, on peut assez facilement dimunuer le nombre de requetes vers le serveur et ainsi le soulager de travail inutil. En effet, il est toujours mieux de faire le travail sur le poste du client que sur le serveur !

Un exemple très simple est « les tris sur les tables HTML« , vous avez un tableau triable avec la possibilité de trier selon plusieurs colonnes. En php, c’est un peu long a mettre en place il faut gérer le « ORDER BY« , les différentes clés… pour la plupart du temps une petite liste.

Bien sûr, quand la requete renvoit 10000 élements c’est plus difficile de faire autrement mais est-ce vraiment le cas ?

Personnelement j’utilise une petite libriairies Javascript sortable, qui permet de rendre une table HTML toute simple en veritable petite tableau Excel.

Voici un exemple sur mon site Wanarun. Vous y verrez aussi une petite surprise pour la gestion des pages…

Ajax / PHP : Trucs et Astuces #1

Le tips le plus important est de trouver le bon framework, personnellement j’utilise principalement Prototype.

Un exemple tout simple pour mettre a jour un div par le contenu d’un page php

/*
fonction qui permet de charger le html renvoyé
par /ajaxdiv/contenu.php?isajax=1
dans le div page_contenu
*/
function litContenu()
{
  //parametre pour la page
  var pars = 'isajax=1';
  //object utilisé pour la mise à jour
  var myAjax = new Ajax.Updater(
    //identifiant du div à mettre à jour
    'page_contenu',
    //url
    '/ajaxdiv/contenu.php',
    {
      parameters: pars,
      method: 'get',
    });
}


Check out our best movie collection. Latest CD, DVD, HQ DVD movie downloads. Buy and download movies instantly.