Lazy load des images avec Advanced Custom Fields

BJ Lazy Load et Advanced Custom Fields

BJ Lazy Load, comme son nom l'indique se charge de "lazy-loader" les images, c'est à dire ne les charger que lorsqu'elles doivent être rendues par le navigateur. Quel est l'avantage de cette technique ?

Cela permet de ne pas charger des images qui risquent de ne jamais être vues par le visiteur et donc d'accroitre le temps de chargement initial. Prenons l'exemple d'une home page qui liste 30 articles avec une image, pourquoi charger ces 30 images si le visiteur clique sur le premier lien ? Dans la pratique le lazy load offre à mon sens beaucoup d'avantages même si dans certains cas il peut être une contrainte.*

BJ Lazy Load utilise des filtres pour vous permettre de différer le chargement des images contenues dans vos articles et pages mais aussi pour les thumbnails, les gravatars et les iframes. On lui précise simplement un nombre de pixels sous la ligne de flottaison du navigateur. Dès que l'image passe ce nombre le chargement commence.

Dans le cas des champs personnalisés ajoutés par Advanced Custom Fields, comme ils se trouvent en dehors de "the_content()", BJ Lazy Load ne les voient pas et ne peut donc pas différer le chargement. La parade est alors d'utiliser le filtre bj_lazy_load_html sur ces champs.

Snippet et fonction personnalisée

Le snippet qui suit permet d'appliquer le lazy-load sur un champ personnalisé de type image. Il est important, lors de la création du champ de spécifier que l'on souhaite récupérer les données de l'image (array) afin de récupérer les alt, title, class...

Ce bout de code se présente sous la forme d'une simple fonction que l'on ajoute dans le fichier functions.php. Pour le moment cette fonction permet d'afficher une image dans sa plus grande taille et ne prend donc pas en compte le choix d'une taille personnalisée, des dimensions width et height, title et caption.

/**
 * ----------------------------------------------------------------------------------------
 * - Lazy loader pour les images de champs ACF
 * ----------------------------------------------------------------------------------------
 */

if ( ! function_exists( 'lazy_load_acf_image' ) ) {
  function lazy_load_acf_image($field) {

  $image = get_field($field);
    if ( ! empty($image) ): 
      $image_html = '<img src="'. $image['url'] .'" alt="'. $image['alt'].'"/>';
      $image_html = apply_filters( 'bj_lazy_load_html', $image_html );
      echo $image_html;
    endif;
  }
}

Côté template, il suffit d'appeler la fonction lazy_load_acf_image() en passant le nom du champ comme argument. Exemple pour un champ se nommant team_portrait :

// Dans le fichier .php du template de page 
<?php lazy_load_acf_image('team_portrait');?>

Comme dit plus haut, cette fonction ne permet pour le moment que de charger les images à leur taille d'origine et seulement si elles proviennent d'un champ de type image. Cela ne fonctionne donc pas pour les champs de type textarea. La fonction ne soucie pas non plus que vous ayez ACF d'installé. Si vous le désactivez, l'appel à get_field() retournera une belle erreur.

Ces améliorations ne peuvent pas tenir dans une courte fonction à coller dans functions.php et feront probablement partie d'un plug-in spécifique.

* Lire cet article de @HTeuMeuLeu sur les connexions lentes et les chargements différés.