Muy buenas, les saluda Miguel y hoy les traigo otro post.
Comencemos con el conjunto de imágenes usando HTML.
Así es como se hace conmigo:
<img src="/img/sample_image.png?nf_resize=fit&w=250" loading="lazy" alt=". . ." />
Índice
Carga de imágenes optimizadas desde Netlify Large Media
Añado ?nf_resize&w=250 para cargar una imagen con un ancho reducido a 250 píxeles y altura proporcional.
¿Por qué elegí 250px? Verifiqué cuál es el ancho máximo de la imagen en particular cuando se renderiza y configuré el ancho en consecuencia.
En mi sitio, las imágenes generalmente se muestran en diferentes tamaños. Para los navegadores de escritorio, es de ancho fijo.
En dispositivos móviles, está conectado al ancho de la pantalla, por lo que podría variar desde 30px a 236px (algo como esto), así que simplemente elegí 250px ya que nunca se vuelve más grande que esto.
Parámetros adicionales que se pueden especificar en la solicitud de imagen de Netlify Large Media que puede encontrar en los documentos.
Carga lenta
Añadiendo loading="lazy" digamos que el navegador debería cargar una imagen solo cuando esté cerca de la ventana gráfica visible.
Cuando no configuré eso al principio, la página se cargó de la siguiente manera: en la página abierta, el navegador pinta el primer HTML y comienza a cargar todas las imágenes utilizadas en la página actual y hasta que termina, la página se muestra como carga.
Si la página contiene muchas imágenes, eso lleva tiempo. A veces mucho.
Cuando estableces loading="lazy" el navegador carga solo las imágenes que están en la parte visible de la página y en el área de 1250px– 2500px bajalo (Doc). Al menos en los navegadores Chromium debería funcionar de esta manera.
Entonces, sí, podría acelerar mucho la carga de la página, ya que cargar las primeras 3 imágenes y luego otras, según sea necesario, es más rápido que cargar más a la vez.
Sin embargo, no configuré esto para las primeras imágenes en las páginas, como se informó oficialmente. aquí. De todos modos, estas imágenes se cargarán en la página abierta.
Probando srcset y sizes
También intenté realizar una carga de imágenes receptiva con el siguiente código de Mozilla:
<img srcset="path_to_image.png?nf_resize=fit&w=180 180w, path_to_image.png?nf_resize=fit&w=250 250w" sizes="(max-width: 400px) 180px, 250px" src="path_to_image.png?nf_resize=fit&w=250" alt=". . ." />
A partir del código, significa que en pantallas con un ancho de hasta 400 píxeles el navegador debe solicitar una imagen con estos parámetros: ?nf_resize=fit&w=180 180w.
Por lo tanto, con un ancho de 180 píxeles. Mientras esté en pantallas con un ancho de más de 400 píxeles, debe cargar una imagen con estos parámetros: ?nf_resize=fit&w=250 250w. Entonces el ancho debería ser 250 píxeles.
Pero estos no funcionaron
Al especificar sizes en el porcentaje de vw (ventana gráfica), todo funciona, como verá más adelante con las imágenes de Markdown. Pero con px especificaciones nada funcionó.
Las imágenes siempre se cargaban con estos parámetros: ?nf_resize=fit&w=250 250w.
Después de jugar con él durante algún tiempo, entendí que simplemente podía dejarlo con uno. ?nf_resize=fit&w=250 250w parámetro.
Como lo había hecho antes, así:
<img src="/img/sample_image.png?nf_resize=fit&w=250" loading="lazy" alt=". . ." />
Mis imágenes se vuelven realmente receptivas en el móvil y se dan cuenta vw para diferentes diseños es un dolor considerable (al menos para mí).
También he descargado imágenes para comparar sus tamaños. 250px uno era de 114 kb, donde 180px uno era de 63,3 kb.
Una diferencia bastante doble, pero después de ejecutar pruebas de Page Speed con 180px imagen, no vi ninguna mejora.
Cargando imágenes optimizadas desde Markdown
Hacer toda esta optimización para publicaciones de blog es un poco más complicado.
Todas mis publicaciones están escritas en Markdown y se convierten a HTML mediante el complemento markdown-it .
El lenguaje Markdown tiene algunas especificaciones y limitaciones sobre cómo se describen las imágenes. Aquí está la estructura de la especificación de la imagen: .
No podemos especificar tantas cosas. Afortunadamente, podemos hacer muchas modificaciones sobre cómo Markdown se traduce a HTML con el adicional complementos markdown-it-.
Imágenes de lazy
En primer lugar, encontré y agregué un complemento que agrega loading="lazy" a cada imagen renderizada por markdown-it.
Aquí es: markdown-it-image-carga diferida. Si también planea cargar imágenes optimizadas agregando parámetros de URL a las imágenes, espere un poco antes de agregarlas.
Hay una forma de usar solo el complemento que mostraré a continuación sin la necesidad de instalar este. Simplemente continúe con la siguiente sección.
Después de configurar loading="lazy" la velocidad de carga de las páginas del blog con muchas imágenes se disparó. Este atributo es realmente imprescindible. Consulta los resultados en el siguiente artículo.
Imágenes con srcset y sizes
srcset y sizesEntonces intenté agregar el paquete markdown-it-responsive que debería agregar srcset y sizes atributos a cada imagen, pero esto no funcionó en absoluto. He estado recibiendo un error de renderizado HTML y páginas rotas.
Después de una búsqueda adicional, encontré este complemento: markdown-it-modificar-token. Después de verificarlo, entendí que funcionaría muy bien y que puedo hacer todo lo que necesite con él.
En algún momento y nació este código:
modifyToken: function(token, env) {
switch (token.type) {
case "image":
token.attrObj.srcset =
`${token.attrObj.src} nf_resize=fit&w=300 300w, ` +
`${token.attrObj.src}?nf_resize=fit&w=600 600w`;
token.attrObj.src = token.attrObj.src + "?
nf_resize=fit&w=600";
break;
}
},
Especificando srcset de esta manera le digo al navegador: aquí hay dos imágenes, con el ancho de 300px y 600px, decida usted mismo qué imagen cargar de acuerdo con el 100% del ancho de la ventana gráfica.
Primero también agregué el atributo size, de esta manera:
Pero lo eliminó después de leer a Chris Coyier en su artículo. Es el valor predeterminado para el navegador, por lo que no es necesario especificarlo adicionalmente.
Funciona, pero el comportamiento es un poco extraño (al menos para mí). Cuando el ancho de la pantalla es 200px imagen de carga del navegador con 300px ancho, pero cuando el ancho de la pantalla se establece en 250px imagen con 600px el ancho está cargado … no entiendo eso.
Y nuevamente especificando sizes en px solo condujo a 600px imagen a cargar …
Aquí está el código que he probado:
token.attrObj.sizes = "(max-width: 400px) 300px, 600px"
Ok, dejaré los tamaños como 100vw y deje que el navegador decida cuándo cargar qué. Espero que el navegador sea inteligente.
Como escribí antes, el uso de markdown-it-image-carga diferida el complemento podría soltarse aquí para obtener código adicional en
modifyToken: function(token, env)
Solo agrega esto:
token.attrObj.loading = "lazy";
Aquí en case "image":
modifyToken: function(token, env) {
switch (token.type) {
case "image":
token.attrObj.srcset =
`${token.attrObj.src}?nf_resize=fit&w=300 300w, ` +
`${token.attrObj.src}?nf_resize=fit&w=600 600w`;
token.attrObj.src = token.attrObj.src + "?
nf_resize=fit&w=600";
token.attrObj.loading = "lazy";
break;
}
},
Por cierto, si desea cargar siempre imágenes con un tamaño, simplemente elimine srcsetsetter. Se vería de esta manera:
switch (token.type) {
case "image":
token.attrObj.src = token.attrObj.src + "nf_resize=fit&w=600";
// token.attrObj.loading = "lazy";
break;
}
Como recordará, es mejor tener las primeras imágenes sin carga diferida, pero es un poco difícil hacerlo con las imágenes de Markdown.
Se debe escribir una lógica adicional para markdown-it, y la inversión de tiempo no vale la pena para mí. Sí, hay una pequeña caída en la actuación, como dicen los chicos de Google, pero creo que no romperá el banco.
Eso es todo lo que he hecho para mejorar la carga de imágenes en mi sitio. En el siguiente artículo, puede comprobar las mejoras en la velocidad de la página que obtuve. Son bastante sólidos.
Gracias por leer este post.
Añadir comentario