Carga diferida (lazy loading) nativa en WordPress

Por si no te habías enterado aún, desde la versión 76, el navegador Chrome – tanto para ordenador como para Android – ya es compatible con la carga diferida (lazy loading) nativa.

Y aunque ya se está debatiendo incorporar esta característica en el núcleo de WordPress, de momento no está disponible, pero puedes añadirlo.

Pero espera, empecemos por el principio…

¿Qué es eso de la carga diferida nativa o native lazy loading?

La compatibilidad nativa de la característica de lazy loading significa que ya no es obligatorio el uso de JavaScript para ofrecer la carga diferida de imágenes y vídeos (iframes), ya que funcionará aunque esté desactivado el JavaScript en el navegador.

Es un fantástico y óptimo reemplazo de las soluciones de JavaScript para ofrecer la carga diferida.

Permitirá a los desarrolladores quitar código innecesario, como el que ahora se incorpora en los plugins WordPress de optimización que activan carga diferida..

De paso arreglará los problemas asociados a la carga diferida, como el uso de  data-src, que no muestra imágenes de manera nativa en el navegador sin el uso de JavaScript. Para solucionarlo los desarrolladores tienen que incluir noscript ay repetir el elemento img con el atributo src. Así funciona de momento.

Un ejemplo sería algo así:


Con la carga diferida nativa (native lazy-loading) los desarrolladores solo tendrán que incluir el atributo loading y especificar un valor de lazyeager.

Así:

El valor lazy le dice al navegador que quieres diferir (aplazar) la carga de la imagen o el iframe hasta que se alcance una cierta distancia de la parte visible de la ventana del navegador. Vamos, que no se verá hasta que llegues a su posición al hacer scroll en la página hasta esa posición.

Si usas el valor eager le dirás al navegador que quieres mostrar el recurso de inmediato, aunque esté por debajo de la parte visible actualmente.

Por resumir, los valores del atributo loading son estos 3:

  • auto: Comportamiento de lazy loading por defecto del navegador, que es lo mismo que no incluir el atributo.
  • lazy: Carga aplazada del recurso hasta que se llegue a una distancia calculada desde el viewport.
  • eager: Carga inmediatamente el recurso, da igual dónde esté situado en la página. Es como si no hubiese lazy loading.

¿Funciona también con las imágenes y vídeos de carruseles y similares?

Pues no, porque como está relacionada con el punto visible calculado, si el carrusel está antes del scroll el navegador cargará todas las imágenes en el código hasta ese punto, da igual si están detrás de un carrusel o no. Ahí no te ahorras nada.

Si el carrusel está por debajo del scroll entonces sí, pero cargará en su punto todas las imágenes/vídeos del carrusel cuando se llegue a él.

Compatibilidad de navegadores

Si ya tienes actualizado Chrome a la versión 76 o superior no tienes que hacer nada, la carga diferida nativa está activa por defecto.

En caso contrario, si aún tienes una versión anterior, puedes acceder a los ajustes de Chrome y activarla para imágenes y vídeo, en estas URLs:

chrome://flags/#enable-lazy-image-loading
chrome://flags/#enable-lazy-frame-loading

En cuanto al resto de navegadores, siento decirte que aún no incorporan esta característica, como puedes comprobar aquí:

¿Es realmente algo bueno esto de la carga diferida, aplazada, lazy o como se llame?

Pues claro, ten en cuenta que cuando alguien llegue a tu web, el navegador no intentará cargar todas las imágenes de la página si el usuario no hace scroll, con lo que obtienes las siguientes ventajas:

  • La percepción de carga es mucho más rápida pues el navegador solo descarga las imágenes antes del primer scroll.
  • El peso de página que descarga el navegador es mucho menor, porque solo descarga las imágenes y vídeos para mostrarlos a partir del punto en el viewport calculado.
  • Los analizadores de velocidad de carga te darán una puntuación mayor, especialmente el de Google.
  • Consumirás muchos menos recursos del servidor o la CDN al solo descargar y mostrar lo que el usuario está viendo sin hacer scroll.
  • Ahorrarás en costes, tanto si utilizas una CDN que cobre por contenidos como la de Amazon, como de los propios recursos del hosting. Menos bytes descargados igual a menos gasto en alojamiento.

Vamos, que es una joyita para la optimización web.

¿Puedo saber cuánto me ahorraría con esto de la carga diferida?

Claro, puedes hacerlo ahora mismo, con la herramienta de auditoría Lighthouse de Google Chrome, o sino en el analizador de imágenes de imagekit.io.

¿Tengo que hacer algo si ya uso Chrome?

A ver, que esto no es automático, y aunque tú tengas Chrome actualizado tu código actualmente es el que es, y no carga las imágenes y vídeos con los nuevos atributos de loading.

E imagino que no vas a ponerte a cambiar las etiquetas HTML de todas tus imágenes a mano para incluirlos ¿verdad?, además de que sería un error, porque solo ofrecerías carga diferida a tus visitantes que usasen Chrome y lo tuviesen actualizado.

Más abajo vemos cómo añadir fácilmente la carga diferida nativa, o la que sea.

¿Se va a incorporar la carga diferida nativa en WordPress?

Sí, se está debatiendo esta posibilidad, para crear una API específica que permitiese a los desarrolladores de temas y plugins incorporarla fácilmente sin tener que incluir su propio JavaScript, por ejemplo.

¿Has dicho JavaScript?

Sí, porque mientras no todos los navegadores y sus versiones sean compatibles con la carga diferida nativa, a no ser que te de igual desperdiciar la posibilidad de ofrecer carga diferida a todo ese tráfico, lo ideal es que sigas ofreciendo carga diferida aún no siendo nativa, mediante JavaScript, pues sigue siendo mejor ofrecer lazy loading que no hacerlo, da igual el método.

Aún utilizando JavaScript, la carga diferida supone una mejora muy relevante en la optimización y uso adecuado de recursos web, especialmente en dispositivos móviles y no digamos con conexiones lentas.

¡Lo quiero ya! ¿Cómo lo hago?

¡Bien dicho, así, p’alante!

Puedes ofrecer carga diferida de imágenes en WordPress de muchas maneras:

¡No hombre, me refiero a la carga diferida nativa, el native lazy loading ese!

Ah vale. En este caso no hay tantas opciones.

A la espera de que, o se incluya a WordPress o lo empiecen a incorporar los temas, de momento tenemos un plugin: Native Lazyload.

Además, no tienes que configurar nada, lo instalas, lo activas y listo. Tus imágenes e iframes se cargarán en modo diferido, usando los atributos nativos.

¿Pero no decías que esto de momento solo funciona en Chrome?

No hay que preocuparse, el plugin también ha pensado en ello, bueno, los ingenieros de Google, que son los autores del mismo.

Si el visitante utiliza una versión compatible con native lazy loading el plugin cargará tus imágenes y vídeos con los atributos de la carga diferida nativa, en caso contrario utilizará un JavaScript basado en IntersectionObserver.

Y si el usuario tiene JavaScript desactivado pero el atributo loading es compatible con el navegador, se añadirá una variante noscript del elemento respectivo que también incluya el atributo loading sin más cambios.

¿Y si quiero que una imagen o vídeo se salte la carga diferida?

Si por algún motivo quieres que se cargue automáticamente algún recurso añádele la clase skip-lazy para indicarle al plugin que te gustaría omitir la carga diferida para esta imagen o iframe.

Internet me necesita, no quiero cargar ningún JavaScript

Me parece bien, tus visitas son tuyas.

Si quieres que el plugin aplique siempre la carga diferida nativa, aunque el navegador de tu visitante no sea compatible y no tenga activo JavaScript, añade el siguiente filtro a tu plugin de personalizaciones o al archivo functions.php del tema activo:

add_filter('native_lazyload_fallback_script_enabled', '__return_false')

¿Nada más?

¿Te parece poco? Creo que he sido instructivo a la par de elegante y resultón.

Creo que ya sabrás algo más sobre qué es esto del native lazy loading, carga diferida nativa en español, y maneras de incorporarla ya a tu WordPress ¿qué mas quieres?

Si te han quedado dudas pregunta abajo, en los comentarios 😉

La entrada Carga diferida (lazy loading) nativa en WordPress la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Botones de compartir en redes sociales sin scripts ¿Qué clase de brujería es esta?

A la hora de optimizar el consumo de recursos y reducir los tiempos de carga de una web, y en concreto un sitio WordPress, siempre hay que utilizar aquellos que sean más óptimos.

JavaScript: ¿el problema?

Actualmente se está consolidando un exceso de uso de JavaScript para casi todo, y sí, ofrece funcionalidades avanzadas y dinámicas muy útiles y chulas, pero es un recurso que consume bastantes recursos, y ralentiza la carga de la web, al menos más que recursos estáticos como HTML y CSS.

Uno de los elementos más comunes que encuentras en toda web son los botones de compartir en redes sociales, normalmente generados por plugins WordPress, y estos botones utilizan JavaScript para mostrar dinámicamente los botones y contadores de cada red social, lo que supone un montón de:

  • Código JavaScript adicional en TODOS tus contenidos.
  • Scripts distintos por cada red social.
  • Scripts que no se pueden normalmente servir cacheados.
  • Llamadas y peticiones externas a la API de cada red social mediante los scripts para mostrar los contadores, etc.
  • Consumo de recursos del servidor.

Todo esto supone un montón de tiempos de espera en la carga de cada entrada o página, además de un gran consumo de recursos del servidor, y de batería en los navegadores móviles.

¿Tiene alguna ventaja usar JavaScript?

Claro, que se visualicen los contadores sociales, algo que si tienes una cantidad muy alta anima a que más gente los comparta a su vez. Somos animales sociales.

HTML y CSS: la solución

Pues sí, sería mucho más óptimo utilizar solamente HTML y CSS para mostrar estos botones de compartir, sin scripts, por varios motivos:

  • Muchas menos líneas de código generado.
  • El código HTML y CSS se puede cachear, en tu servidor o tu CDN.
  • Sin llamadas ni peticiones externas.
  • Menor consumo de recursos del servidor al no tener que cargar el motor de JavaScript.
  • Visualización más rápida en el navegador, pues nativamente renderiza HTML y CSS.

¿Tiene contraindicaciones usar solo HTML y CSS?

Pues sí, solo una, que no se mostrarán los contadores de las veces que se han compartido tus entradas, etc. Si esto es importante para ti, pasa a otro artículo, los hay y muy interesantes, puedes optimizar tu web con otras estrategias y tácticas WPO.

¡Convencido! ¿Y esto cómo lo hago?

Hay dos maneras principales de abordar esta técnica, tú eliges…

Añadir botones de compartir en redes sociales con código

Ya hace tiempo que está publicado en Ayuda WordPress este artículo, en el que se explica paso a paso como añadir botones de compartir en redes sociales manualmente, añadiendo tú el código necesario en cada archivo de la plantilla del tema WordPress que esté activo.

Básicamente, pasa por añadir en un archivo PHP enlaces en HTML como este por cada red en la que quieras ofrecer que se compartan tus contenidos:

Luego le añades algo de CSS a tu gusto y decides dónde incluir el código creado.

Si te animas aquí te dejo el enlace de nuevo, el artículo está muy detallado, con ejemplos para las principales redes sociales, y fácil de seguir paso a paso:

Añadir botones de compartir en redes sociales con un plugin

Ahora bien ¿se te hace bola aún lo de escribir código? Sin problema, hay un plugin que te va a enamorar.

Se llama Scriptless Social Sharing, creado por la gran Robin Cornett, y es lo mejorcito que hay para mostrar botones de compartir sin scripts, solo con HTML y CSS.

Una vez lo tengas instalado y activo pásate por su página de configuración, en «Ajustes > Scriptless Social Sharing». Ahí puedes personalizar cada aspecto del plugin y su visualización.

Podría entrar en detalle de cada ajuste pero el plugin viene configurado casi perfecto nada más instalarlo. Solo te doy algunos apuntes que considero importante destacar:

  • No cambies de SVG a fuente web o iconos personalizados si no es imprescindible, la fuente web es un recurso externo, y tendrás que activar Font Awesome; y tus iconos personalizados, salvo que también sean SVG, pesarán normalmente más que los SVG incluidos en el plugin.
  • En los ajustes de CSS deja «Flexbox» no cambies a tabla, ni por probar. Además de verse peor los botones de compartir no se adaptarán tan bien a los distintos dispositivos las tablas como sí lo hace flexbox.
  • Se ven y adaptan siempre mejor los botones sociales en ancho completo.
  • Cambia el relleno de los botones (espacio adicional aplicado mediante CSS) de 12 (por defecto) a un valor mucho menor, sino los botones serán demasiado grandotes … salvo que los quieras muy grandes claro. Enreda un poco con esto.
  • Acuérdate de añadir los botones de las redes sociales favoritas de tus lectores. Justo debajo puedes recolocar los botones.
  • Recuerda añadir ubicaciones de los botones a todos los tipos de contenido que utilices y que quieras que se puedan compartir. Puedes mostrarlos antes y después del contenido de la entrada, página, lo que sea. El plugin te mostrará todos los tipos de contenido registrados en tu sitio.
  • Si eliges la ubicación manual tendrás que añadir el filtro que ofrece el plugin para que se muestren en los distintos archivos del tema donde quieras que se vean:
    if ( function_exists( 'scriptlesssocialsharing_do_buttons' ) ) {
    	echo scriptlesssocialsharing_do_buttons();
    }
  • Si prefieres añadirlos manualmente en tus contenidos tendrás que usar el shortcode:
    [scriptless]

    .

  • No te olvides de poner tu perfil de Twitter que quieras que aparezca en los tuits (sin la @). Tienes un ajuste para eso.
  • Si usas el editor de bloques el plugin añade un bloque que te permite añadir botones sociales donde quieras dentro de tu contenido, además de con el shortcode.

Además de todos estos ajustes en la página del plugin también verás que en el editor hay una nueva caja meta.

Desde ella puedes hacer 2 cosas:

  • Marcar si no quieres que en esa entrada/página concreta se muestren los botones sociales de compartir.
  • Subir una imagen personalizada para Pinterest.

Esto de la imagen de Pinterest es por cosas de esta red social, que si el contenido no tiene ninguna imagen no funciona.

Para solucionarlo, el plugin ofrece 4 estrategias:

  1. Si has configurado una imagen personalizada para Pinterest es la que usará como primera opción.
  2. Si no la has establecido, y  la entrada tiene imagen destacada, usa esta.
  3. Si no tienes nada de lo anterior coge la primera imagen que encuentre en el contenido.
  4. Y si no tienes nada de nada simplemente no muestra el botón de compartir en Pinterest en esa entrada concreta.

Esto, que te parecerá una demasía si Pinterest no es lo tuyo, es vital para webs muy visuales, para las que una buena presencia y SEO en Pinterest es vital.

Dicho esto, si no sabes por dónde empezar, o te agobian tantas configuraciones, aquí te dejo capturas de cómo lo tengo yo, para que tengas un buen punto de partida:

Verás que yo no he puesto ningún texto antes de los botones para animar a compartir, eso ya lo decides tú si lo quieres poner o no.

Igualmente, revisa los apuntes que te he dejado arriba sobre posibles ajustes que  podrías querer cambiar.

Muy majo pero ¿funciona?

Pues claro, solo tienes que mirar la consola del navegador o el código fuente generado de tus entradas y páginas para comprobar que hay al menos un script menos que ya no se carga.

Pero sobre todo, que el código que genera el plugin es mero HTML y CSS, que se puede cachear, servir desde una CDN, como tengas definidas tus estrategias de optimización web.

No solo tus contenidos se cargarán más rápido, también liberarás consumo de recursos del servidor.

La entrada Botones de compartir en redes sociales sin scripts ¿Qué clase de brujería es esta? la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Twenty Twenty: El nuevo tema por defecto de WordPress usará fuentes variables … y ya puedes probarlo

Pues parece que sí tendremos nuevo tema por defecto de WordPress para 2020 que, como es habitual, se llamará como el año: Twenty Twenty.

¿Qué es lo más destacado en el nuevo tema Twenty Twenty de WordPress?

Pues lo más importante, como podrás imaginar, que viene totalmente preparado y pensado para el uso de bloques del editor Gutenberg.

Es un tema de ancho completo, desarrollado a partir del tema Chaplin de Anders Noren, que ahora mismo es prácticamente igual, salvo pequeños detalles estéticos, como puedes ver en las siguientes capturas:

¿Qué novedades incorpora?

Como la compatibilidad con bloques Gutenberg no es novedad, pues ya Twenty Nineteen la tiene, lo más novedoso de este tema, que lo distingue de los anteriores, es lo siguiente…

Enlace de «Volver arriba»

Al fondo de cada página tendrás un enlace para subir rápidamente a la cabecera, sin tener que hacer scroll de nuevo.

Menú y búsqueda emergente

Los iconos de la cabecera para la búsqueda y el menú, inicialmente plegado, se abren de manera emergente, ocupando la pantalla.

No obstante, en los ajustes de personalización, puedes ocultar el icono de búsqueda y hacer que el menú no sea emergente en ordenadores de escritorio.

Bloques como widgets

Esto sí que es nuevo, y es que si tienes instalado el plugin de pruebas Full Site Editing puedes añadir, desde el personalizador de WordPress, bloques en los widgets del pie de página, como puedes ver en la siguiente captura.

Ahora bien, como el tema está aún en pruebas, no se guardan los cambios, puedes añadir bloques, parece que se añaden al widget, pero luego no se muestran. Recuerda que el tema está aún en fase temprana de desarrollo … de estas cosillas nuevas.

Fuentes variables

Quizás lo más relevante y novedoso sea que Twenty Twenty usará fuentes variables, en concreto la tipografía Inter.

Inter es una fuente bastante alta en comparación con otras, lo que parece ser que facilita la lectura, pero sobre todo, lo importante, es que es una fuente variable, con los beneficios potenciales que conlleva.

En este vídeo puedes ver una entrada, el enlace para subir arriba que hay en el fondo que comentaba arriba y, lo que te estoy comentando, la tipografía variable Inter que utiliza.

Plantilla de página de portada

Otra novedad son los ajustes de personalización de la plantilla de página de portada, llamada en inglés «Cover Template».

Podrás configurar:

  • Imagen de fondo fija
  • Color de superposición
  • Color del texto superpuesto
  • Efecto de mezcla de superposición de texto
  • Opacidad de superposición de la imagen

Estos ajustes, unidos a las posibilidades de diseño del editor de bloques, están claramente orientados a crear portadas impactantes, muy pensadas en páginas de producto, presentaciones corporativas y webs de negocios de todo tipo.

Para utilizar estos ajustes de personalización solo tienes que seleccionar esta plantilla al crear tu página.

Esta característica de la plantilla de portada es diferente a la plantilla de ancho completo, también incorporada, donde no se aplican estilos diferentes.

Aquí puedes ver una página con la plantilla de portada:

Así se vería con la plantilla de ancho completo:

Verás que la imagen destacada ya no está bajo el título de la publicación sino por debajo.

Otras características

Además de estas novedades, Twenty Twenty tiene las siguientes características, estas ya más normalitas…

Dos áreas de widgets

Tiene 2 áreas de widgets en el pie de página en los que, cuando funcione, como vimos antes, podrás insertar bloques. De momento funcionan como widgets normales.

Colores del tema

Puedes elegir un color de fondo del tema, además de un color de acentuación, el que se aplica a los enlaces, botones, etc.

Lo que ves en esta captura son los colores por defecto, que te recomiendo cambiar, pues se me ocurrió realizar una auditoría de accesibilidad sobre el tema, y el único problema importante que presentaba (sin tener en cuenta los bloques) era precisamente ese fondo en color crema, que no ofrece el suficiente contraste con el color por defecto de los textos.

Lo ideal sería que lo cambies a un fondo blanco, o casi.

Menús

Twenty Twenty, como viene siendo costumbre en los últimos temas por defecto de WordPress, tiene 4 menús, aunque en principio parezca que solo tiene 2.

El principal será el que se mostrará en la cabecera, y luego el menú social que se mostrará en la parte inferior del menú emergente, en forma de iconos sociales si añades URLs de las principales redes, para lo que el tema incorpora una carpeta con iconos de Font Awesome.

El tercer menú tiene algo de truco, pues es una casilla adicional que puedes marcar en cualquiera de los menús principales (principal, social) para que también aparezca en el pie de página.

Y para terminar está el menú de atajos, que aparecerá visible, no oculto como el principal, en la zona de cabecera y en el pie de página. Por si prefieres poner ahí otros enlaces.

Eso sí, este menú no muestra iconos si pones enlaces sociales, así que para eso no vale.

¿Qué te ha parecido Twenty Twenty?

El tema se parece mucho a Twenty Nineteen en varias cosas, y es cuestión de gustos.

El nombre y descripción del sitio ocupan un pequeño espacio en la parte superior del diseño, sin aparentemente espacio para logos (ya aparecerán temas hijo que lo lleven), así que es un tema pensado principalmente para dispositivos móviles, donde la cabecera pinta poco o nada.

Para dar imagen corporativa o lo que quieras a tus páginas puedes usar las imágenes destacadas, pero esto no se aplica a la portada en modo blog, la más espartana.

Los tamaños de fuente por defecto son enormes en los títulos, y bastante hermosos en el resto, así que por la parte de legibilidad – e incluso accesibilidad – sin problemas.

La selección de la tipografía también me parece acertada,  y mucho más que sea una fuente variable que, al estar alojada en las carpetas del tema, no habrá necesidad de cargar fuentes desde URLs externas, algo que siempre va en contra del rendimiento del sitio.

Tienes que usar imágenes destacadas sí o sí, porque sino – especialmente en móviles – se verá un hueco enorme en la zona de título. Así que vete acostumbrando.

¿Lo usaré?

Pues yo no, pero es que este blog es un caso especial.

Al contrario que el resto del planeta, Ayuda WordPress tiene la mayor cantidad del tráfico desde ordenadores de escritorio (casi el 80%), y mucho de tabletas, siendo las visitas desde móviles algo menor, así que está estructurado pensando en eso, con su barra lateral, su menú superior y todo eso a lo que ya estás acostumbrado.

Si la mayoría del tráfico fuese móvil no lo descarto, podría ser una buena elección, pues es un tema limpio, de fácil lectura, con fuentes variables, carga rápida y compatible con todas las tecnologías que actualmente utiliza WordPress.

¡Lo quiero probar ya!

Twenty Twenty no estará disponible con WordPress hasta la versión 5.3, que está previsto se publique el 12 de noviembre de 2019, así que aún queda mucho para ver su estado final.

No obstante, si eres inquieto, quieres enredar y empezar a probarlo como he hecho yo, puedes descargarlo en la página de desarrollo en GitHub, no tendrás actualizaciones automáticas, así que tendrás que subirlo cada cierto tiempo para ver los avances, pero probarlo puedes.

Solo tienes que hacer clic en el botón «Clone or Download», y luego en «Download ZIP».

A partir de ahí instalas el tema subiéndolo desde el escritorio de WordPress, como cualquier otro tema que te descargas por ahí.

Verás que no tiene captura, y que a veces falla incluso la activación, pero recuerda, está en fase ßeta aún.

Una vez lo pruebes te pasas por aquí y nos cuentas qué te ha parecido ¿vale? 😉

La entrada Twenty Twenty: El nuevo tema por defecto de WordPress usará fuentes variables … y ya puedes probarlo la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.