Customizr WP theme with lazy load carousel


Customizr es el tema que he escogido para esta web ¿por qué? porque además de ser muy bueno, se actualiza y mejora constantemente.

Es un tema responsive para WordPress creado por Nicolas Guillaume con el framework Bootstrap. Una de las particularidades de este tema es el carrousel de imágenes a ancho completo, y que por supuesto también es responsive y tiene buen SEO.

La pega es que al igual que otros temas creados con Bootstrap, las imágenes del carrousel, que suelen ser numerosas y bastante pesadas, se cargan en el momento de la carga de la página, lo cual está desaconsejado por las buenas prácticas en WPO, pues aumenta el tiempo de carga y renderizado de la página web, algo que al SEO de Google no le gusta, ni tampoco es bueno para SEM con AdWords.

 

La solución para esto es usar la técnica llamada ‘lazy load‘, carga perezosa o en diferido (como las indemnizaciones de algún tesorero, sic!).

Te voy a explicar como lo he resuelto yo.

Voy a utilizar a lazy load version for the twitter bootstrap carousel, desarrollada por Maurizio Conventi y que te puedes descargar del repositorio de GitHub.

Doy por hecho que estás usando un child theme de Customizr.

Primero vamos a crear las carpetas ‘mychildtheme/inc/js’ y ‘mychildtheme/parts’, para que actúe el theme override de WordPress.

En ‘inc’ copiaremos el fichero ‘class-fire-resources.php’, y en ‘parts’ copiaremos el fichero ‘class-content-slider.php’ de los respectivos directorios de Customizr. Además, en ‘inc/js’ copiaremos ‘lazy-bootstrap-carousel-v2.js’.

Ahora editaremos nuestra copia de los ficheros, abrimos ‘class-fire-resources.php’ y tras la linea que carga ‘bootstrap.min.js’, añadiremos el código para cargar el javascript ‘lazy-bootstrap-carousel-v2.js’.

        if ( is_home() )
            wp_enqueue_script( 'lazy-carousel', get_stylesheet_directory_uri() . '/inc/js/lazy-bootstrap-carousel-v2.js', array( 'jquery' ), '1.0', true );

Después, al fichero ‘class-content-slider.php’, le cambiaremos la línea 102, por:

      $param_img              = array( 'class' => 'slide' , 'alt' => $alt );
      if ( $i > 0 ) {
         $image_attributes      = wp_get_attachment_image_src( $id, $img_size );
         $param_img['lazy-src'] = $image_attributes[0];
         $param_img['src']      = '';
      }
      $slide_background       = wp_get_attachment_image( $id, $img_size, 0, $param_img );

 

Con esto, se cargará con la página la imagen de la primera slider, y el resto de imágenes se irán cargando según se vayan mostrando, con lo que disminuiremos el tiempo de carga de la web.

Otro handicap de este theme, aunque sea otro de sus puntos fuertes, son las imágenes que se muestran al lado de los artículos, y que también son de un tamaño importante. Existe el plugin jQuery.Lazy() con el que se podría eliminar este handicap y disminuir la velocidad de carga. Esto, para otro día.

 

Recuerda que si tienes en el theme de tu WordPress un slider o un carrousel con imágenes de mucha resolución, tienes que aplicar técnicas de WPO para mejorar su rendimiento y consecuentemente, el SEO.

Dejar un comentario

Para comentar has de leer y aceptar la Política de privacidad.

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.