ACCÉLÉRER L'AFFICHAGE DU HTML

illus

script : jQuery.lazyRender v1.0
langage : javascript
catégorie : module
usage : Le lazyLoading appliqué au HTML, pour un rendu plus rapide des pages web.
tags : jQuery - optimisation - technique

Concept

lazyRender accélère l'affichage des pages web.

Sergey Chikuyonok publiait fin 2010 un article à propos du lazyloading, appliqué au code HTML.

Il exposait dans cet article comme l'analyse et le rendu d'une page web très longue ou complexe pouvait prendre beaucoup de temps, et dégrader le fameux "user experience".

Il expliquait également, que les commentaires dans le code html étaient traités bien plus rapidement. Aussi proposait-il, pour accélérer le rendu d'une page web, de mettre une partie du contenu en commentaire, afin que la page soit chargée rapidement, puis d'afficher ces commentaires, une fois le contenu principal opérationnel.
Son article rapporte quelques statistiques impressionnantes.

lazyRender est un plugin jQuery permettant de tirer parti des trouvailles de Sergey Chikuyonok avec la plus grande facilité, et même d'aller un peu plus loin.

Avertissement : Avec cette technique, pour pouvoir afficher les zones mises en commentaires, le visiteur devra impérativement avoir javascript activé sur son navigtaeur.
Aussi est-il est préférable de ne faire appel à lazyRender que si le site requiert de toute façon l'activation de javascript, où si l'on peut être certain qu'il sera actif.

Démo

La démo suivante vous permet de comparer les temps d'affichage d'une page web plutôt lourde et complexe, avec ou sans lazyRender : Démo

Intégration

L'utilisation de lazyRender tient en deux points :

1/ Mettre en commentaires les portions de html dont vous voulez différer le chargement

Pour éviter tout risque de confusion avec de véritables commentaires, vous devrez marquer lesquels vous voulez traiter, en leur ajoutant une mention "lazyRender" après la balise de début de commentaire, comme dans cet exemple :

<div>Code html normalement affiché. Un header, par exemple.</div>
 
<!-- lazyRender
  <p>Ce commentaire sera affiché</p>
-->
 
<!-- 
  <p>Ce commentaire ne sera PAS affiché</p>
-->
 
<div>Encode du code normalement affiché. Un footer.</div>

2/ Charger/exéctuer le script

Commencez par insérer les balises suivante, pour charger jQuery et le plugin lazyRender. (Dans une logique d'optimisation, vous placerez ces balises en toute fin de body.)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jquery.lazyRender.min.js" type="text/javascript"></script>

Puis déclenchez le script par une simple commande javascript :

<script type="text/javascript">
$(function(){
  $( "body" ).lazyRender();
});
</script>

Options

Le script accepte également quelques options. Celles-ci devront être paramétrées dans un tableau associatif, et passées comme argument de la fonction.

$(function(){
  // préparer les options dans un tableau associatif
  var options = {
	  opt1 : valeur1,
	  opt2 : valeur2,
	  optN : valeurN
  };
 
  // les passer dans la fonction
  $( "body" ).lazyRender( options );
});

Voici la liste des options disponibles :

options type description par défaut
onShow Function fonction a éxécuter quand un commentaire est affiché.
Un tableau contenant la liste des noeuds créés sera transmis comme premier paramètre de la fonction onShow.
Le second paramètre correspondra au noeud de commentaire supprimé.
[rien]
onComplete Function fonction à éxécuter à la fin du traitement de l'ensemble des commentaires.
Un tableau contenant la liste de l'ensemble des noeuds créés sera transmis comme premier paramètre de la fonction onShow.
Le second paramètre recevra un tableau de l'ensemble des noeuds de commentaire supprimés.
[rien]
label String|RegExp plutôt que "lazyRender", vous pourrez préférer utiliser une autre expression pour marquer les commentaires à afficher. L'option label vous permet de définir cette expression.
Pour traiter absolument tous les commentaires, mettez "".
Pour une définition plus précise de la chaîne recherchée, il est également possible de fournir une expression régulière.
"lazyRender"
showMode String Indique à quel moment afficher les commentaires :
- "instant" : affiche immédiatement l'ensemble les commentaires.
- "scroll" : affiche les commentaires à mesure qu'ils entrent dans la zone visible de la page.
"scroll"
tolerance Integer En mode scroll, pour assurer la fluidité de l'affichage, il es possible d'afficher les commentaire légèrement avant qu'ils entrent dans la zone visible de la page. Cette tolérance est spécifiée dans cette options, et exprimée en pixel. 200

Téléchargement

Vous trouverez dans ce zip deux versions du script : l'une compactée (<1,2Ko), et l'autre commentée. 

compatibilité :
Internet Explorer (6+) Firefox Safari Opera Google Chrome
(autres navigateurs non testés)

Commentaires

  • Publier un nouveau commentaire
  • gravatar
    Lire le blog en entier, tres bon
  • gravatar
    Bonne trouvaille d'optimisation

    JE pense qu'on peut coupler Le LazyRendering avec ton application d'infobulle (le commentaire est dans cas "plié") et de n'en faire le rendu qu'une fois la souris dessus a travers une requete ajax. Ceci permettrai d'éviter la "mise en commentaire" qui est imprecise et limitative en soi.

    Le tout donnerais un rendu Trés efficace visuéllement et en performance j'espere une réaction

    merci
  • Navré, le formulaire de commentaires est temporairement indisponible.