El proyecto de "Páginas móviles aceleradas" (AMP) de Google ha ayudado, últimamente, a influir en los sitios web para que sean más rápidos. Con una buena técnica y una potente red de distribución de contenido, Google ha hecho que los sitios mejorados por AMP directamente sean más rápidos. Sin embargo, AMP también ha trabajado indirectamente, alentándonos a analizar las optimizaciones y las mejores prácticas que contiene AMP. Incluso si no está dispuesto a hacer que su sitio web sea compatible con AMP, es útil entender a AMP como una lista de tareas pendientes para optimizar un sitio web que no sea de AMP..

Una de las optimizaciones en esta lista es una técnica llamada "carga perezosa", que vimos en acción en nuestro artículo reciente sobre el uso de AMP  elemento personalizado Con esta técnica, cuando un visitante llega por primera vez a una página, solo se cargan las imágenes en o cerca de la ventana gráfica. El resto se activan para cargar cuando el visitante se desplaza hacia abajo.

La carga diferida permite que un visitante comience a interactuar con el contenido antes, y la velocidad de carga mejorada puede mejorar su posicionamiento en los motores de búsqueda. Cuantas más imágenes tenga en una página, mayores serán las mejoras de velocidad que podrá obtener..

En este tutorial veremos cómo puede implementar la carga diferida en sitios web que no son de AMP usando un script llamado Layzr.js. Vamos a replicar la funcionalidad de AMP. elemento lo más cerca posible, pero también trabajaremos con algunas de las características específicas de Layzr.

Vamos a empezar!

1. Configuración básica

Como parte del artículo "Proyecto AMP: ¿Hará que sus sitios sean más rápidos?" He creado un diseño básico que contiene cinco imágenes. Para permitirle hacer comparaciones entre el uso de AMP y la implementación de la carga perezosa, volveremos a crear el mismo diseño de cinco imágenes. Te mostraré cómo ejecutar varias pruebas de velocidad de carga más adelante en este tutorial.

En los archivos de origen adjuntos a este tutorial encontrará la versión AMP del diseño y la versión completa de lo que estará haciendo aquí. Ambos se incluyen para ayudarlo a decidir cuál es el mejor enfoque para usted..

A medida que avanzamos en todo, le recomiendo que pruebe su trabajo con Chrome Developer ToolsF12) con el Red pestaña abierta, Deshabilitar caché revisado, y la regulación se establece en 3G regular. Esto simula una conexión móvil promedio, mostrándole un gráfico de cada imagen cargando en tiempo real y lo ayudará a obtener una visión clara de cómo está operando su carga perezosa.

Cuando actualice la página para probar, mantenga presionada la tecla recargar Botón, que hará aparecer un desplegable con diferentes opciones. Escoger Caché vacío y recarga dura para simular completamente a un visitante que llega a su sitio la primera vez.

Crear shell HTML

Vamos a empezar por lo básico. Primero, cree una carpeta para albergar su proyecto y dentro de él cree un archivo llamado index.html.

Ábrelo para editarlo y agrega el siguiente código:

         
Bienvenido a la web cargada perezoso
  

Con el código de arriba solo estamos colocando un shell HTML, e incluyendo un poco de CSS para asegurar que la página cuerpo Y las imágenes no tienen brechas inesperadas a su alrededor.. 

También estamos incluyendo margen: 0 auto; Así que las imágenes que añadamos más adelante estarán centradas..

Cargar Layzr

El script layzr.js tiene dos fuentes de CDN convenientes que puede cargar: usaremos una proveniente de Cloudfare.

Agregue este código a su html, antes del cierre etiqueta.

Si prefiere no cargar el script desde un CDN, puede descargarlo en su lugar y seguir las instrucciones breves en https://github.com/callmecavs/layzr.js#download

Instanciar Layzr

Ahora que hemos cargado Layzr, debemos hacer que se ejecute cuando se carga la página. Para ello, añade este código después de la guión Etiquetas que acaba de insertar en la sección anterior:

Este código primero crea una instancia que se usa para contener Layzr, luego, una vez que el contenido DOM de la página se ha cargado, usa esa instancia para activar la funcionalidad de Layzr.

Tu código general hasta ahora debería verse así:

         
Bienvenido a la web cargada perezoso
    

2. Añadir imágenes (resolución normal)

Con Layzr cargado y listo para usar, podemos comenzar a agregar algunas imágenes para que funcione su magia. Puede usar cualquier imagen que desee, sin embargo, si desea usar los ejemplos de código exactos que se ven en los siguientes pasos, puede descargar los archivos de origen adjuntos a este tutorial. Allí encontrarás una imagenes Carpeta que puedes copiar y pegar en tu propio proyecto..

Para agregar imágenes al usar Layzr usarás un regular img elemento, pero en lugar de utilizar el src atributo que usarás datos normales al igual que:

Asegurando que las imágenes tengan altura

Para que funcione cualquier script de carga lenta, debe conocer la altura de todas las imágenes en un sitio para que pueda decidir cuáles deben cargarse (porque están en la ventana gráfica o cerca de ellas) y cuáles deben esperar.

Sin embargo, la parte difícil es que una imagen no tiene altura hasta que se carga por completo en una página. Esto significa que si queremos que la carga diferida funcione, necesitamos una forma de proporcionar información a la página sobre la altura de la imagen. antes de las imagenes estan cargadas.

Cubriremos dos métodos para lograrlo, uno para imágenes de tamaño fijo y otro para respuesta. Darle altura a las imágenes haciendo que su tamaño sea fijo es el método más simple, ya que solo necesita agregar altura y anchura atributos.

Adelante ahora y agrega img elementos por encima de sus etiquetas de script, utilizando la datos normales atributo, e incluyendo altura y anchura, por cada imagen que quieras cargar.

Este método de tamaño fijo permitirá que la carga diferida funcione, sin embargo, evita que las imágenes respondan, y esto no es lo ideal. Cubriremos cómo dar imágenes de altura y capacidad de respuesta un poco más tarde..

3. Establecer un umbral de carga

Por defecto, Layzr solo traerá las imágenes que están a la vista en el momento de la carga. Sin embargo, los visitantes tienen una experiencia más suave si las imágenes de la siguiente línea (justo fuera de la ventana gráfica) también se cargan previamente.

Haga esto configurando una opción llamada límite al instanciar la secuencia de comandos. La forma en que funciona es que proporcionará un valor que representa un porcentaje de la altura de la ventana gráfica. Si establece un valor de 100, esto representaría el 100% de la altura de la ventana gráfica, por ejemplo. 1200px. En este caso, cualquier cosa fuera de la pantalla dentro de 1200px de la ventana gráfica también se cargaría.

Por ejemplo, si tenía dos imágenes grandes, una de ellas se empujó justo fuera de la ventana gráfica y su umbral se estableció en 100, ambas imágenes se cargarían:

Para establecer un valor de umbral, reemplace esta línea en su código:

const instance = Layzr ()

… con este:

const instance = Layzr (umbral: 100)

Puede cambiar este valor a lo que mejor se adapte a los sitios que cree. Como punto de interés, parecería que el umbral de carga lenta de AMP es aproximadamente equivalente a 200.

4. Añadir imágenes de Retina / HiDPI

Una de las mejores cosas de Layzr es que hace que sea muy sencillo agregar imágenes para dispositivos de alta resolución. Todo lo que necesitas hacer es incluir el atributo retina de datos. Por ejemplo:

Actualizar todos los img Elementos en su HTML para incluir imágenes de retina, como así:

5. Marcadores de posición de imagen receptiva y prevención de reflujo

Hacer que las imágenes cargadas perezosas respondan puede ser una propuesta difícil. Como mencionamos anteriormente, para determinar cuándo cargar las imágenes, Layzr primero debe conocer sus alturas. Debido a que las imágenes sensibles cambian sus dimensiones todo el tiempo, su altura es impredecible.

Además de esto, también queremos tener algo en el diseño de nuestra página para evitar el reflujo. El reflujo es lo que sucede cuando una imagen termina de cargarse y pasa de no tener tamaño a ocupar repentinamente espacio en el diseño, haciendo que todo a su alrededor se mueva. Esto puede ser muy frustrante para los visitantes que intentan enfocarse en su contenido solo para que salte por la página..

Podemos resolver ambos problemas si tenemos marcadores de posición sensibles en la página con el tamaño correcto para cada imagen. Los marcadores de posición se asegurarán de que el diseño de la página no tenga que volver a fluir, y también le dará a Layzr alturas con las que trabajar. Basaremos nuestro enfoque en una ingeniosa técnica de este artículo "A List Apart" de Thierry Koblentz en "Creación de proporciones intrínsecas para video".

La única condición es que deberá conocer la relación de aspecto de cada imagen que publica con antelación, ya que el CSS cambiará el tamaño de las imágenes según una relación de aspecto específica..

Añadir una envoltura de relación de aspecto

Lo primero que vamos a hacer es agregar un div envoltura alrededor de nuestra primera imagen-esto div se convertirá en nuestro marcador de posición. Estaremos redimensionando el div con CSS, luego configurando la imagen para que la llene horizontal y verticalmente.

Vamos a dar la div un nombre de clase que representa la relación de aspecto de la imagen que contendrá. En nuestro ejemplo, la primera imagen es de 960 píxeles de ancho por 640 píxeles de alto, así que vamos a averiguar qué relación de aspecto la hace.

640 (nuestra altura) es dos tercios de 960 (nuestro ancho), lo que significa que por cada 2 unidades de altura la imagen tiene 3 unidades de ancho. Las relaciones de aspecto se expresan típicamente como ancho: altura, Como en el caso de los conocidos. 16: 9. La relación de nuestra primera imagen de ejemplo es 3: 2.

Para representar esta relación de aspecto le daremos nuestra envoltura. div el nombre de la clase ratio_3_2.

Añadir estilo de relación de aspecto estándar

Ahora agregaremos el CSS para que todo esto funcione..

Entre lo existente etiquetas en la cabeza de tu index.html archivo, agregue este código:

 div [class ^ = "ratio _"] posición: relativa; ancho: 100%; 

Este selector recogerá nuestro ratio_3_2 clase, pero también recogerá cualquier otra clase que comienza con proporción_. Esto significa que podemos crear más clases más adelante para acomodar diferentes relaciones de aspecto.

Dentro de este estilo, nos aseguramos de que nuestra envoltura siempre se estire al 100% de su ancho principal. También lo estamos poniendo a posición: relativa; Como esto posicionará absolutamente la imagen en su interior, verás por qué un poco más tarde..

Dar la altura de envoltura de relación de aspecto

Ahora agregaremos este código específico a nuestro ratio_3_2 Sólo clase:

 .ratio_3_2 / * padding-top: calc (100% * (2/3)); * / padding-top: 66.666667%; 

los acolchado superior El valor es lo que nos permite mantener nuestra envoltura. div en la relación de aspecto que queremos. Cualquiera que sea el ancho de la div, este relleno mantendrá la altura en 66.666667% de esa cantidad, (dos tercios), por lo tanto, manteniendo nuestra relación de aspecto 3: 2.

Para determinar qué porcentaje poner aquí, calcule cuál es la altura de su relación de aspecto cuando se expresa como un porcentaje del ancho. Puedes hacer esto con el cálculo:

100% * (alto / ancho)

Por nuestra relación 3: 2 que lo hace: 100% * (2/3) = 66.666667%

Puede calcular el porcentaje correcto para su relación de aspecto deseada por adelantado, o si lo prefiere, puede usar el CSS calc () Funciona como se ve comentado en el ejemplo anterior:

relleno superior: calc (100% * (2/3));

Rellene el envolvente de relación de aspecto con imagen

Nuestra envoltura de relación de aspecto ahora mantendrá las dimensiones deseadas independientemente del ancho de la ventana gráfica. Así que ahora todo lo que tenemos que hacer es hacer que la imagen que contiene dentro llene la envoltura, heredando así sus dimensiones..

Lo haremos posicionando absolutamente cualquier imagen anidada dentro de un proporción_ envoltorio clasificado div, colocándolo en la esquina superior izquierda de la envoltura, luego estirándolo hasta el 100% de altura y ancho, así:

 div [class ^ = "ratio_"]> img position: absolute; arriba: 0; izquierda: 0; ancho: 100%; altura: 100%; 

Verifique su primera imagen y ahora debería ver que se extiende hasta el ancho de la ventana gráfica, pero se reducirá para ajustarse cuando cambie el tamaño, manteniendo su relación de aspecto todo el tiempo..

Añadir relaciones de aspecto adicionales

Es probable que tengas imágenes con todo tipo de relaciones de aspecto diferentes y querrás poder acomodarlas. En las imágenes de ejemplo con las que trabajamos en este tutorial, las tres primeras tienen una relación de aspecto de 3: 2, pero la cuarta y la quinta son 16: 9.

Para tener en cuenta esto, agregue una nueva clase nombrada según la relación de aspecto, es decir,. ratio_16_9, con un correspondiente acolchado superior valor:

 .ratio_16_9 / * padding-top: calc (100% * (9/16)); * / padding-top: 56.25%; 

Adelante y añade la relación de aspecto. div Envuelve todo el resto de las imágenes, utilizando las clases adecuadas para cada uno, dependiendo de su tamaño. También puede eliminar el altura y anchura atributos de sus imágenes, ya que ahora van a ser anulados por nuestro CSS.

Vuelva a cargar la vista previa de su navegador y cambie el tamaño de la ventana gráfica: ahora debería encontrar que todas sus imágenes responden al mismo tiempo que conserva su funcionalidad de carga lenta, sin reflujo.

6. Añadir srcset

Layzr también soporta el atributo srcset. En los navegadores que admiten srcset, se utilizará con preferencia sobre datos normales y retina de datos.

En lugar de usar el recto srcset atributo, sin embargo, debe ser precedido con datos- al igual que los otros atributos que hemos utilizado hasta ahora. 

Actualiza el código de tu primera imagen a:

Para ver cómo funciona, vaya a la vista previa de su navegador, reduzca la ventana gráfica a menos de 320px de ancho, vuelva a cargar y observe el panel de red. Debería ver primero la versión más pequeña de su imagen. Luego, aumente el tamaño de la ventana gráfica y verá cómo se cargan las versiones medianas y grandes a medida que avanza..

La carpeta de imágenes provista en los archivos fuente incluye versiones pequeñas, medianas y grandes de cada imagen. Actualice su código para usarlos todos en su srcset de datos atributos como tal:

Añadir una animación de carga

Ya casi terminamos, pero para crear una capa final de pulido vamos a agregar una animación de carga. Esto ayudará a comunicar a los visitantes qué partes del diseño actúan como marcadores de posición de imagen y que esas imágenes se están cargando..

Usaremos un cargador de CSS puro, una versión ligeramente modificada de esta gran pluma de Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr

Para evitar la necesidad de un marcado adicional, vamos a tener nuestra animación de carga contenida en un :después psuedo-elemento adjunto a cada envoltura de relación de aspecto. Agrega lo siguiente a tu CSS:

 div [class ^ = "ratio _"]: después de contenido: "; pantalla: bloque; ancho: 3rem; altura: 3rem; radio del borde: 50%; borde: .5rem doble # 444; borde izquierdo: .5rem doble blanco; posición: absoluta; parte superior: calc (50% - 2rem); izquierda: calc (50% - 2rem); animación: spin 0.75s lineal infinita; @ keyframes spin 0% transform: rotate (0deg); 100% transformar: rotar (360 grados);

El código anterior crea un pequeño icono de cargador con forma de círculo, lo centra y lo hace girar 360 grados en un círculo cada 0,75 segundos..

También agregaremos un color de fondo gris oscuro a nuestras envolturas de relación de aspecto para que se distingan fácilmente del resto del diseño. Agrega esto color de fondo: # 333; línea como sigue:

 div [class ^ = "ratio _"] posición: relativa; ancho: 100%; color de fondo: # 333; 

Finalmente, solo necesitamos asegurarnos de que nuestro cargador no se posicione por encima de nuestras imágenes. Para ello añadiremos la línea. índice z: 1; a nuestras imágenes, cambiándolas a una capa encima de los cargadores:

 div [class ^ = "ratio_"]> img position: absolute; arriba: 0; izquierda: 0; ancho: 100%; altura: 100%; índice z: 1; 

Actualice su página ahora y debería ver su animación de carga en acción.

Tu código final

Con todo lo anterior completo, su código ahora debería verse así:

         
Bienvenido a la web cargada perezoso
 
  
 
  
 
  
 
  
 
  
    

Terminando

Ahora ha implementado completamente la carga perezosa con la mano, lo más cerca posible de paridad con AMP.

Hay un par de cosas que AMP hace automáticamente, como manejar la preservación de la relación de aspecto en imágenes sensibles, pero en la otra cara, hacer las cosas usted mismo permite un mayor control, como especificar su propio umbral de carga.

Esperamos que este proceso lo haya ayudado a decidir qué enfoque prefiere..

Pequeños técnicos con cables de red, Kirill_M / Photodune.

Gracias a Michael Cavalea por un excelente guión! Para obtener más información sobre Layzr.js, visite: https://github.com/callmecavs/layzr.js