Share
En este tutorial, le mostraré cómo mejorar el rendimiento de sus páginas web utilizando in-view.js. Esta biblioteca de JavaScript informa cuando algo se ha desplazado en la ventana gráfica y nos ayudará a cargar dinámicamente nuestras imágenes según sea necesario..
El rendimiento web es importante, especialmente si su sitio web está dirigido a países en desarrollo donde las conexiones son lentas y los planes de datos son caros. Algunas de las tareas básicas que comúnmente emprendemos para mejorar el rendimiento de nuestros sitios web incluyen la reducción de los archivos JavaScript y las hojas de estilo, los recursos de "gzipping", la compresión de los tamaños de las imágenes, después de lo cual estamos prácticamente listos. Pero somos nosotros?
Tiempo de carga de la página y la línea de tiempo del inspector del navegadorEl ejemplo del inspector anterior muestra una sola página cargando 24 imágenes en una vista de tamaño móvil a una velocidad 3G normal. ¡Y como podemos ver, la carga de la página se completa en aproximadamente once segundos! Esto es realmente lento dado que estamos tratando con una página simple con nada más que unas pocas imágenes y una hoja de estilo. La página aún no está contaminada con anuncios, ni secuencias de comandos de seguimiento que generalmente agregan más lastre a la página.
También vale la pena tener en cuenta, es que esto es simplemente una emulación. Ni siquiera tiene en cuenta la configuración del servidor, la latencia y otros obstáculos técnicos. El rendimiento podría ser peor en la realidad..
Entonces, ¿cómo podemos mejorar el rendimiento de carga de la página?
En primer lugar, tenemos una serie de imágenes. La razón por la que nuestra página se carga lentamente es porque todas las imágenes se inundan juntas en la carga inicial de la página. Si observa de cerca la imagen anterior, verá que esto no sucede en paralelo: solo se cargan algunas imágenes una vez que se procesan otras, lo que atasca la página como un todo..
Si tenemos una gran cantidad de imágenes en una sola página, podemos considerar cargar estas imágenes asíncrono y solo cuando el usuario los necesita. Esto permite que el navegador complete la carga de la página visible sin necesidad de esperar a que se representen todas las imágenes, lo que finalmente ahorra el ancho de banda del usuario.
Para seguir adelante, toma el index-starter.html del repositorio. También hay un css / styles-starter.css adjunto que puedes usar también.
Para empezar, necesitamos reemplazar las fuentes de imagen con una imagen realmente pequeña, preferiblemente codificada en base64 para evitar cualquier solicitud HTTP adicional. Utilizamos esta imagen como un marcador de posición antes de servir la imagen real. Dicho esto, también debemos almacenar la fuente de la imagen real en un atributo personalizado denominado src de datos.
Una vez que haya hecho esto y actualizado la página, debería encontrar que las imágenes están actualmente en blanco y que sus dimensiones no son necesariamente lo que deberían tener sus imágenes finales..
Así que vamos a arreglar los estilos.
Las imágenes que queremos utilizar están configuradas en 800 por 550 píxeles. Dividiremos la altura de la imagen (800px) por el ancho de la imagen (500px), y multiplica esto por 100%. Usa el resultado para configurar el acolchado superior del pseudo-elemento del contenedor de imágenes. Por último, tenemos que establecer la posición de la imagen a absoluto y establecer la altura máxima a 100%, por lo que no aumentará la altura.
figura posición: relativa; figure img top: 0; izquierda: 0; posición: absoluta; altura máxima: 100%; figura: antes de padding-top: 69.25%; // (554/800) * 100%
En este punto, las dimensiones de la imagen deben ser correctas. Sin embargo, la fuente de la imagen real aún reside en un atributo personalizado, por lo que el navegador no puede recuperar ninguna imagen todavía..
La imagen está en la proporción adecuada, pero la imagen aún está cargada..Nuestro siguiente paso será agregar algún JavaScript que cargará la imagen..
En primer lugar, necesitamos cargar in-view.js en la página. Como se mencionó, esta biblioteca liviana (que no depende de jQuery o una biblioteca central como Waypoints) detecta si un elemento está dentro o fuera de la ventana del navegador..
Ahora cree un nuevo archivo JavaScript donde escribiremos nuestro JavaScript y lo cargaremos después de in-view.js, de la siguiente manera:
La biblioteca in-view.js expone el en vista() Función que toma un selector como argumento. En este caso, pasaremos el figura elemento; El elemento que envuelve las imágenes. La razón por la que seleccionamos el elemento de envoltura es porque vamos a agregar un par de clases para realizar transiciones de estilo; esto se hace más fácilmente cuando la clase está en el elemento de envoltura en lugar de la imagen en sí, por lo tanto:
Accentsconagua
inView ('figura')A continuación, utilizamos el .en() Método para enlazar el elemento con el entrar evento para comprobar si el elemento está dentro de la ventana gráfica. Además, in-view.js también expone la salida evento que hace lo contrario; Esto detecta cuando el elemento está fuera de la ventana gráfica..
inView ('figure') .on ('enter', function (figure) var img = figure.querySelector ('img'); // 1 if ('undefined'! == typeof img.dataset.src) / / 2 figure.classList.add ('is-loading'); // 3 // 4 newImg = new Image (); newImg.src = img.dataset.src; newImg.addEventListener ('load', function () figure.innerHTML = "; // 5 figure.appendChild (this); // 6 setTimeout (function () figure.classList.remove ('is-loading'); figure.classList.add ('is-loaded') ;, 300);););los entrar evento activará una función, que hará lo siguiente:
figura.src de datos atributo.esta cargando a la envoltura, figura, elemento.src de datos atributo.esta cargando clase con el está cargado clase.Como puede ver en el código anterior, hemos introducido dos nuevas clases esta cargando, y está cargado. Usamos el esta cargando clase para agregar una animación de giro mientras se carga la imagen. Entonces usamos el está cargado clase, como su nombre lo indica, para agregar el efecto de transición a la imagen cuando la imagen se ha cargado completamente.
figure.is-loaded img animación: fadeIn 0.38s lineal 1s hacia adelante; figure.is-loading position: relative; figure.is-loading: after content: "; display: block; color: #ddd; font-size: 30px; text-indent: -9999em; overflow: hidden; width: 1em; height: 1em; border-radius : 50%; margen: automático; posición: absoluta; superior: 50%; izquierda: 50%; margen izquierdo: -0.5em; margen superior: -0.5em; transformada: translateZ (0); animación: cargando 1.7s facilidad infinita; @ keyframes cargando 0% transform: rotate (0deg); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 5%, 95% box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; 10%, 59% box-shadow: 0 -0.83em 0 -0.4em, -0.087em -0.825em 0 -0.42em, -0.173em -0.812em 0 -0.44em, -0.256em -0.789em 0 -0.46em, -0.297em -0.775em 0 -0.477em; 20% box-shadow: 0 -0.83em 0 -0.4em, -0.338em -0.758em 0 -0.42em, -0.555em -0.617em 0 -0.44em, -0.671em -0.488em 0 -0.46em, -0.749em -0.34em 0 -0.477em; 38 % box-shadow: 0 -0.83em 0 -0.4em, -0.377em -0. 74em 0 -0.42em, -0.645em -0.522em 0 -0.44em, -0.775em -0.297em 0 -0.46em, -0.82em -0.09em 0 -0.477em; 100% transformar: rotar (360 grados); box-shadow: 0 -0.83em 0 -0.4em, 0 -0.83em 0 -0.42em, 0 -0.83em 0 -0.44em, 0 -0.83em 0 -0.46em, 0 -0.83em 0 -0.477em; @keyframes fadeIn 0% opacidad: 0; 100% opacidad: 1;
espera lo mejor, pero planea para lo peor. Entonces, en caso de que JavaScript esté deshabilitado de alguna manera (un caso raro, pero perfectamente posible) necesitamos asegurarnos de que la imagen se seguirá mostrando. Utilizar el Elemento con la fuente de imagen que apunta inmediatamente a la fuente de imagen real.
¡Ya estamos listos! Actualice la página, y si inspeccionamos la línea de tiempo de la red en DevTools, podemos ver que la velocidad de la página ahora ha mejorado significativamente ya que solo estamos cargando lo que los usuarios pueden ver..
Más rápido!La carga de la página ahora está completa en solo 1.95s a una velocidad 3G normal; Más de un 500% de mejora de velocidad.!
En este tutorial, observamos cómo mejorar la carga de la página mediante la representación de imágenes solo cuando el usuario las ve. Este método se conoce popularmente como "carga lenta" y puede ayudar enormemente al rendimiento de su sitio web..
Hay muchas bibliotecas de JavaScript y complementos de jQuery que hacen esto, así que ¿por qué optar por in-view.js? Personalmente, in-view.js ha sido el tipo de script que he estado buscando ya que no intenta hacer demasiado. Solo maneja una cosa y lo hace bien. Este tipo de biblioteca da más control y mayor flexibilidad..
Por ejemplo, no solo podemos usar in-view.js para realizar una carga lenta, sino que también podemos usarlo para cosas como realizar un desplazamiento infinito, tal vez mostrando un formulario de suscripción flotante cuando el usuario llega al final de la página (tome un vistazo a la demostración para ver eso en acción, o crear una línea de tiempo vertical sin tener que ingresar otra biblioteca de JavaScript. Háganos saber cómo lo usa!
Formulario de suscripción flotante, animado a la vista una vez que el usuario llega al final de la página