lazyload

lazy

load

loading

optimisation

html

commentaires

script

javascript

php

css

Le lazyLoading appliqué au HTML, pour un rendu plus rapide des pages web.

ACCÉLÉRER L'AFFICHAGE DU HTML

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é :

(autres navigateurs non testés)

Commentaires