He estado en una aventura tratando de conquistar Google PageSpeed Insights para mi sitio personal. Previamente implemente la recomendación de Formatos de imágenes de siguiente generacion la cual me dio una buena mejora en mi puntuacion y tiempo de carga, ahora trabajare en la siguiente recomendación la cual es Defer OffScreen Images .

Para este tutorial, escogí hacer videos tutoriales en ves de un articulo. Es una serie corta que consiste de 4 videos con una duración total de aproximadamente 25 minutos y aquí está la lista de reproduccion de youtube si quieres comenzar ahora mismo.

youtube-playlist

El audio está en ingles pero los videos contienen subtítulos en español si quieres activarlos.

01 Intro - Defer OffScreen Images

Una corta explicación de que es "Defer OffScreen Images", como es que google recomienda que la implementes, porque debería importante y una pequeña muestra de como sé cuando está terminado.


02 Img Tags - Defer OffScreen Images

Tiempo de codear, aquí cambio mí etiqueta html img y agrego un poco de código javascript usando Intersecion Observer para implementar la carga diferida


03 Improving UX - Defer OffScreen Images

Aquí trabajo en mejorar la UX cuando las imágenes se cargan a medida que el usuario se va desplazando, Creo una simple animación CSS de difuminado similar a la que se usa en Medium.


04 Picture Tag - Defer OffScreen Images

Aquí implemento la carga diferida para las imágenes que cargo por medio de la etiqueta picture y rehúso algo de mí función lazyLoad y la actualizo para poder cargar las pictures que usan imágenes webp con soporte en png para navegadores que no soportan webp.