En WordPress, y en el mundo digital, el tiempo de carga es un factor crítico para mejorar la conversión y la retención de usuarios. En esta publicación, nos centraremos en estrategias clave para acelerar la carga de imágenes, una pieza fundamental en la eficiencia de tu sitio en WordPress.
Una carga rápida no solo mejora la experiencia del usuario, también impulsa el SEO de manera significativa. Al aplicar los consejos y técnicas específicas que presentaremos, avanzarás hacia una notable mejora en la carga de imágenes de tu sitio en WordPress, un paso esencial para capturar la atención de tus visitantes y mejorar tu visibilidad en los motores de búsqueda.
Un sitio web con tiempos de carga lentos no solo aleja visitantes, sino que también puede disminuir tu visibilidad en las búsquedas online. Así, optimizar la carga de imágenes en WordPress es más que un ajuste técnico: es una acción estratégica. La elección del formato de imagen adecuado, el uso efectivo de herramientas y plugins, y la implementación de prácticas recomendadas en WordPress son elementos clave en este proceso.
Te invitamos a descubrir cómo transformar tu sitio con nuestras soluciones prácticas para la carga ágil de imágenes en WordPress.
Ajustes en el lazy load para imágenes destacadas en WordPress
En muchas ocasiones, la imagen destacada se coloca en la parte superior de las páginas web. Para su visualización, es común el uso de the_post_thumbnail en WordPress.
Sin embargo, el enfoque convencional puede retrasar la carga inicial de la página debido a la técnica conocida como lazy load. Es esencial comprender cómo manejar correctamente el lazy load para optimizar el rendimiento de tu sitio.
Gestión selectiva del lazy load en imágenes destacadas
La implementación del lazy load en imágenes destacadas puede tener efectos tanto positivos como negativos, variando según el contexto de tu sitio web. Ajustar esta funcionalidad a las necesidades particulares de tu página, asegura una mejor experiencia de usuario y optimiza la eficiencia de carga. Vamos a descubrir cómo activar o desactivar el lazy load en estas imágenes fundamentales.
Al usar the_post_thumbnail, se genera la estructura HTML necesaria para mostrar la imagen en la página web. Una práctica recomendada es añadir el parámetro fetchpriority="high", lo que contribuye a una mejora en la velocidad de carga y optimiza el parámetro LCP de las CWV (Core Web Vitals).
Sin embargo, en situaciones donde creas desarrollo web WordPress personalizados, o manejas un desarrollo web específico, puedes necesitar colocar esta imagen en una ubicación distinta, como por ejemplo, al final de la página web.
En este escenario, no es deseable que el navegador otorgue prioridad a la imagen; más bien, resulta conveniente aplicar un lazy load para que la imagen se cargue únicamente cuando sea necesario. Para añadir el atributo lazy load utilizando la función the_post_thumbnail, emplearemos el siguiente código:
$args = array (
'loading' => 'lazy'
);
the_post_thumbnail('full', $args );Con este código se elimina eficazmente del atributo de la imagen fetchpriority y se añade loading con el valor lazy, permitiendo que la imagen se cargue de manera perezosa.
Según vemos en las imágenes, hemos cambiado el tratamiento de la imagen destacada. Añadiendo el lazyload, indicando que no se le da prioridad inmediata y que la carga de la imagen se retrase hasta que sea visible para el usuario, un cambio significativo que optimiza la carga para imágenes que no requieren atención inmediata. También vemos en las DevTools que ya no se carga la imagen de inmediato y tiene prioridad «Low».
Optimizando el lazy load en el contenido de WordPress
En algunas páginas de WordPress, puede suceder que no tengamos una imagen destacada y que la estructura comience con texto, reservando las imágenes para más adelante en el contenido. En estas situaciones, WordPress podría asignar por defecto el atributo fetchpriority="high" a la primera imagen que aparezca, asignándole una carga prioritaria que no siempre es deseable.
Para rectificar esto, y asegurar que la carga de imágenes esté alineada con la navegación del usuario, podemos valernos de la API HTML WP_HTML_Tag_Processor de WordPress. Este enfoque nos permite manipular los atributos de las imágenes directamente en el contenido del sitio.
El siguiente fragmento de código muestra cómo hacer precisamente eso:
$html = new WP_HTML_Tag_Processor( $content );
if ( $html->next_tag( 'img' ) ) {
$html->set_attribute( 'loading', 'lazy' );
$html->remove_attribute( 'fetchpriority' );
}
echo $html->get_updated_html();Inicializamos el procesador con el contenido de nuestra página y luego buscamos la primera etiqueta <img>. Si la encontramos, modificamos sus atributos para eliminar fetchpriority, lo cual previene la carga prioritaria, y añadimos loading="lazy", lo que indica al navegador a posponer la carga de la imagen hasta que sea necesaria, es decir, cuando el usuario se aproxime a ella en la página.
Este método es esencial para mejorar la performance y el SEO al reducir el tiempo de carga innecesaria de imágenes.
Añadir Lazyload a las imágenes de un bloque de WordPress
En algunos casos, podríamos encontrarnos con un slider de logos ubicado después de varios bloques sin imágenes, donde WordPress no implementa automáticamente el lazyload en algunas imágenes del slider.
En esta ocasión vamos a modificar el bloque galería para implementar Lazyload, asegurándonos de que las imágenes no se carguen inicialmente. Para esto, utilizaremos la API HTML de WordPress, como en ejemplos anteriores.
Mediante esta API, procesaremos el HTML del bloque usando el filtro render_block. Añadiremos los atributos necesarios a cada etiqueta img con el siguiente código:
function custom_render_block_core( $block_content, $block ) {
if ( 'core/gallery' === $block['blockName'] && !is_admin() && !wp_is_json_request() ) {
if ( isset($block['attrs']['className']) && str_contains($block['attrs']['className'], 'logo-slider') ){
$tags = new WP_HTML_Tag_Processor( $block_content );
while ( $tags->next_tag( 'img' ) ) {
$tags->set_attribute( 'loading', 'lazy' );
}
$block_content = $tags->get_updated_html();
}
}
return $block_content;
}
add_filter( 'render_block', 'custom_render_block_core', null, 2 );Como se observa en el código, el lazyload se aplicará únicamente al bloque de galería que tenga asignado el estilo «logo-slider». Para ser más específicos en nuestras acciones, podemos optar por el filtro render_block_core para especificar exactamente el bloque, en lugar de usar render_block , y emplear una condición if para este propósito.
Esta modificación asegura una carga más eficiente de las imágenes, mejorando la velocidad de la página y la experiencia del usuario, factores cruciales en SEO.
Cómo solucionar el problema de las imágenes pesadas en WordPress
El tamaño de las imágenes es uno de los factores que más impacta la velocidad de carga de una página. Si bien plugins como Imagify son útiles para comprimir las imágenes, debemos reconocer una limitación importante: las imágenes de gran tamaño solo pueden comprimirse hasta cierto punto.
Aquí es donde Bubuku Media Library se convierte en un complemento esencial. Este plugin no solo te asiste en la localización de imágenes pesadas, sino que también automatiza su detección. Al enviarte informes directos a tu email, te ahorra la tediosa tarea de inspección manual y facilita la optimización continua.
Para más detalles sobre cómo Bubuku Media Library puede ser la solución a tus problemas de imágenes grandes en WordPress, te invitamos a explorar nuestra página sobre gestión inteligente de imágenes pesadas.
Cómo evitar poner imágenes en el fichero css
En algunas ocasiones necesitas insertar flechas en el CSS para indicar la dirección en un slider, apertura de desplegables, etc. Normalmente, añadimos una url de una imagen o la ponemos en base64. Los dos casos anteriores afectan a la carga del CSS. El primero tiene que hacer una petición retrasando la carga del CSS, y el segundo añade peso al fichero CSS.
Siempre que sea posible, lo mejor es sustituirlo por caracteres ASCII. Para la flecha derecha podemos usar la que vemos en esta url y la izquierda en esta otra, y lo aplicaríamos como se muestra en el siguiente código.
.arrow-left:after{
content: '‹';
font-weight: 700;
color: #ff0000;
}Conclusión
La optimización de imágenes es crucial para mejorar la velocidad de carga y, por consiguiente, la retención y conversión de usuarios en tu sitio de WordPress.
La velocidad de carga trasciende las simples métricas; es un compromiso con la eficiencia y la calidad que ofreces a tus visitantes. Te animamos a aplicar estos consejos y compartir tus logros. ¿Observaste mejoras en la velocidad de tu sitio? ¿Tienes técnicas adicionales para el manejo eficiente de imágenes en WordPress?
Para descubrir más estrategias, explora nuestra publicación sobre cómo acelerar la carga de las imágenes en los menús de WordPress.
¿Necesitas asistencia para optimizar tu sitio WordPress? Estamos aquí para ayudarte.
