Haz tu Pagina Web más Rápida con Lazy Loading y Optimización de Imágenes
ฝัง
- เผยแพร่เมื่อ 5 ต.ค. 2024
- En este tutorial aprenderás a hacer que tu sitio web cargue mas rápido. Aprenderás muchos trucos como lazy loading y optimización de imágenes.
🚀 Blog de Diseño Web:
www.falconmaste...
⭐ Curso de Diseño Web desde Cero:
www.desarrollo...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrollo...
⭐ Curso de React y Firebase desde Cero:
www.desarrollo...
⭐ Curso de Bootstrap:
www.desarrollo...
⭐ Curso de Woocommerce:
www.desarrollo...
---
📄 Código del Proyecto: github.com/fal...
TinyPNG: tinypng.com/
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters - วิทยาศาสตร์และเทคโนโลยี
![[Actualización] Modo Nocturno con LocalStorage (Javascript)](http://i.ytimg.com/vi/SS0haGSC6vI/mqdefault.jpg)
![[Actualización] Modo Nocturno con LocalStorage (Javascript)](/img/tr.png)
![[ TEASER ] เงาะป่า - วงL.กฮ. | TMG RECORD](http://i.ytimg.com/vi/M4ObdFfcPww/mqdefault.jpg)
Manita arriba al video si te gusto y vas a implementar estos trucos en tu sitio web. 👍
Claro que sí Maestro, tus aportes son excelente... Podrías enseñarnos cómo optimizar cada uno de los resultados que arroja PageSpeed Insights cuando mides una web?
Logras que uno se enamore del diseño web por tu forma de explicar todo.
✌️😀
que tema tienes en tu vs code amigo ??
@@ulises7147 El tema se llama ayu mirage.
Joder! No conocía ese truco, gracias men, pulgar arriba.
Sube mas videos como este por favor. Sobre como optimizar un sitio web
LOOL
Estaba alucinando como bajaba el peso de las imágenes en la pagina, de verdad que esto le servirá a más de uno.
eres una CRACK! sigue así.
Les recomiendo también que en el momento de cambiar el tamaño desde Photoshop a la hora de exportar seleccionen la opción "progressive" eso ayuda a que también carguen las imágenes a medida que haces scroll.
FalcónMaster es de los youtubers al cual apenas entro al video ya le doy like porque su contenido es genial y lo explica muy bien, Muchas Gracias Genio
Muchas gracias a ti por el apoyo!
Ay ya sé de donde te conozco, compre un curso en Udemy y tu fusite mi profe... Que buenos videos y gratis, gracias
Yo estaba esperando mucho código javascript y termine muy impresionado lo fácil que es... Gracias como siempre
Muy bueno, voy poniendo loading="lazy" a todo lo que se mueva! estoy muy agradecido por tus videos tan completos. En este quería aportar la conveniencia de usar FastStone, con ese programa freeware se puede, en un solo paso, ajustar tamaño, compresión, agregar marcas de agua, renombrar a cientos de imágenes incluso fotos raw. ademas es un excelente visualizador, capturador, etc etc. para mi es imprescindible desde hace años. Saludos!!!
Primera vez que escucho hablar de *Lazy Loading* y estoy super encantado
No se si fue cosa del destino, suerte o casualidad pero estos vídeos aparecieron cuando mas los necesitaba !
Gracias!
Gracias, me sacaste de un tremendo apuro con este video...
Para probar en local, en la pestaña de network, hay un desplegable que pone online, hay puedes configurar la velocidad de tu conexión para ver como funciona con conexiones mas lentas y así ver la diferencia en la carga un saludo!!!
gracias Carlos, excelentes tutos.....además tu curso en udemy....genial!!
Estoy creando una web para promocionar cómics, y tenía ese dolor de cabeza de la carga lenta de la página, gracias papu, todo un crack como siempre
Este video es oro puro
Para los que usan algún taks runner como gulp, tiny png tiene su propia api y con un comando como gulp tiny, comprime todas las imagenes. Incluso puedes hacer un watch para que escuche y en cuanto una imagen nueva entre se ejecute la tarea
Excelente técnica para mejorar el SEO
Los mejores Tutoriales de TH-cam
Buena, Máster. A penas haré mi portafolio y tenía miedo el peso de las imágenes y videos. Gracias
Que buen :O video de optimizacón de imágenes... Sin embargo Solo utilizaba el pandita para disminuir el peso, pero al ver que realizas cambios de la dimensión y usa el pandita para optimizar de nuevo las imágenes Wow!! no lo tenía en mente así.
Gracias por compartir este aporte de optimización de imagen. Lo adaptare en mis proyectos futuros.
Hola. Excelente contenido!!! Gracias por compartir tus conocimientos. De todos los canales de programación web que sigo primera vez que veo que hablan de este tema. Genial. Más contenido de optimización web sería bienvenido. Saludos.
Como siempre excelentes tus tips, casi he implementado todos, me gustarìa poder ver un curso de SVG con tu estilo de enseñar, saludos y felicidades
Muchas gracias esto me sirvio para aplicarlo en mi app de peliculas, un saludo desde Costa Rica
Está genial y muy bien explicado, sin embargo el deshabilitar cache no aplicaría pues eso es en la maquina del usuario y no lo van a hacer te felicito esta súper, gracias.
muchas gracias justamente estaba buscando algún tutorial para optimizar imágenes
Con la etiqueta picture de html tambien se puede jugar con eso para colocar ciertas condiciones como lo que se hace con media queries en css, para definir cuando carga el navegador una imagen de cierta dimensiones.
Saludos Falcon, buen video, como siempre. Un aporte, en Firefox Developer Edition funciona, está actualizado hasta la versión 75.0. Lo único extraño es que comenzó a funcionar cuando especifique el heigth de los elementos img (Solo tenia establecido un width), luego resultó a la perfección!!!
Estupendo! Muy bueno saberlo!
Capo! gracias por este tutorial. La verdad me ayudo mucho lo enseñado para mi pagina que estoy creando. Quede encantado. Saludos desde Argentina
EXCELENTE MI HERMANO. Lo felicito por tan importante información. Me parece muy buena manera de optimizar las imágenes.
¡Mis respetos Maestro! Hiper genial este vídeo.... súper bien explicado y utilísimo..¡Gracias y felicitaciones!
Gracias!
Excelente video. justo estaba buscando esta informacion para optimizar mi trabajo.
Hola amigo. Gracias por tu video.
Gracias Master , me ha servido mucho su video un suscriptor mas
Como... Esto no tiene mas likes?
Y lo mejor de todo es, que no necesitas mostrar tu cara para tapar parte de la pantalla, eso también hace que tu video sea mucho más educativo e interesante.
Nos motivas más para seguir adelante.
gracias por compartir tanto conocimiento!
Genial falcon, ya hacía falta un vídeo así, muy funcional gracias!
Muchas gracias!
Genial aporte muchas gracias
Excelente gracias mi hermano!
Brother esto me ayudó mucho, tenía ya la recomendación de mi profesora de que toda mi página estaba muy bien y todo pero que pesaba mucho y era precisamente por las imágenes. Aprendiendo contigo desde el curso básico de HTML xD
Sos un crack!
Me alegra mucho que mis videos te sean de ayuda, eso es genial!
Muchas gracias eres un crack he aprendido mucho contigo
Vine pro bronce y encontre oro, amigo que buen video, explicas muy bien. Me suscribo y procedo a ver todos tus videos
Gracias!
Excelente como siempre Carlos! Muy util desconocía esta técnica.
Gracias!
te la mmste.... dush pense que era un plugin que lo hacia en fa no ir y entrar a ese sitio, gracias!
Esta tuani Lazy Loading, pero me gustaria saber como programar la optimizacion de imagenes, así como cuando facebook o freepik bajan la calidad y relacion de aspecto para visualizar ser cargadas mas rapido.
fantastico excelente video gracias por enseñarnos amigo, me suscribo para ver mas de tus contenidos me sirvio muchisimos, aparte explicas muy bien.
Muchas gracias!
Tus vídeos son increíbles siempre nos enseñas algo nuevo
Siempre hago mi mejor esfuerzo
Alv, yo me esperaba algo más complicado, nose, agregar algo de código en javascript... pero que fácil, Gracias!!!
Espera un minuto, 1 minuto dije... que buen video!, oye, que buen video!!!, afuera sombrero!!!
Eres grande falcon. Que Dios te bendiga
Excelente aporte y muy divertido de ver tambien, Gracias.
Como siempre bien explicado, muchas, muchas gracias!!!
Te lo agradezco brother, buen video
Excelente! SEO y Diseño Web combinado en un solo tutorial! qué maravilla el atributo loading="lazy".
Eres un capo, gracias por semejante video, siempre impartiendo buen contenido, mil gracias 🚀😍.
me encanto el video, si tienes mas herramientas utiles como esas porfa muestralas en los demas videos
Me gustaria mas videos de optimizaciones. Muy bueno
Ya habia esperado por otro de tus videos gracias crack
Simplemente Excelente por eso me adjudique los cursos de udemy profe, Gracias por compartir
Amigo que buen tutorial !, Me suscribo a tu canal de inmediato.
Muchas gracias!
súper útil y clara la información, muchas gracias!
Justo lo que andaba buscando, gracias Tío Falcon
Genial, ahora mismo aplicó a mi renovada web :)
Hola, me sirvió mucho gracias, mencionas más temas de optimización de sitios, tienes esos videos? Saludos.
excelente video, me gustaria hacerte un petición... ¿Podrías subir un video optimizando una landing page con DIVI?
Excelente video, solo una pequeña opinión: me parece que podrías haber recortado los 9 minutos iniciales, repetís muchas veces lo mismo y al final lo que nos interesa es como usar un atributo.
Oie esto si me sirve
Gracias a ti mi pagina va genial
Excelente aporte, gracias FalcoMasters.
Excelente video Falcon, seria genual que des mas tips de como optimizar una pagina web
Muchas gracias amigo por compartir tus conocimientos.
muchas gracias, me sirvio mucho
Genial!! muy buen aporte amigo, gracias FalconMasters !! consulta que mas puedo hacer para optimizar la pagina ? ti
Esto va a ser la monda, y muy importante el tema del tamaño y la optimización. Muchos de los problemas de carga básico es por el tamaño. Gracias por el vídeo.
Ya lo sabia hacer, pero muchas gracias. Eres el mejor
Como siempre, todo un crack, gracias
Gracias!
18:25 Gracias por subirnos el autoestima 😈
lol
Gracias increible video
Excelente video como siempre! Seguí asiii! Por cierto sigo esperando tu curso! Cuando este avisa por acá asii lo compro!
Gracias! y cuando lo saque voy a hacer anuncios para avisar.
@@FalconMasters Por alguna razon baje tu proyecto le puse el atributo loading="lazy" pero no cambia nada.. tengo esta version de chrome Versión 80.0.3987.149 (Build oficial) (64 bits) sera por eso? ..
Gracias amigo, muy buen video me fue de gran utilidad
Muy buen video nuevo sub has más vídeos sobre optimización web 👍👍👍
Muy actual considerando que los navegadores acaban de implementarlo, yo solo he manejado la caché de las imágenes para que sólo se refresquen al usuario cada par de días
que maquina eres! creo que la mitad de mi pagina es gracias a ti jajajaj un saludo
He estado buscando esta tecnología, gracias
Muy buen video.
Mas que cualquier otra cosa es clave ajustar el tamaño correcto a las imagenes. Increible lo que acelera la pagina
0:57 la pagina caga jajaja
Jajaja si cierto no me habia dado cuenta😂
Excelente video, entendí todo, solo quiero saber algo, tienes un video usando la librería? O vas hacer uno? Gracias amigo.
Idolo! Tendrias que hacer una seccion del gran curso que tenes de php en udemy con la recepcion y guardado de las imagenes ya optimizadas en carpeta
A ver, a ver, déjame ver si entendí, entonces:
Paso 1. Bajas la imágen de internet (no recuerdo el sitio dónde las bajaste pero bueno de alta calidad).
Paso 2. Ves el detalle de la imagen y si pesa mucho, entonces cuidado y pasas al paso 3.
Paso 3. Abres la imágen en un editor de imágenes (tipo PS).
Paso 4. Editas la imágen para reducir el tamaño en píxeles. (ej. de 1500px a unos 800px).
Paso 5. Guardas tus imágenes en ese tamaño.
Paso 6. Entras a la página del pandita (no recuerdo el nombre) pero bueno, para reducir no la calidad, sino el peso (comprimir).
Paso 7. Descargas tus imágenes. (ZIP).
Paso 8. Pones bien la ruta de la misma en tu código.
Paso 9. Escribes el atributo lazy loading en las imágenes, (obviamente en tu código).
Paso 10. Listo! (Checas si el peso de tu sitio es bajo comparado al inicio, también checas si el lazy loading está bien.)
Genial! Muuuuuuuy genial! Saludos!
Así es, esos serian los pasos.
En realidad solo se trata de cambiar el tamaño de las imagenes y comprimirlas
Tiny png el panda
Los has comprendido perfecto bro ajajaja, también tuve que hacer ese análisis, porque confunde un poco, pesé al principio que era, comprimir>Cambiar tamaño>comprimir nuevamente>Aplicar loading.
La pagina es unsplash.com
Gran aporte! Me suscribo!
Uff hermano excelente
Eres un genio, estoy haciendo tu curso de php :)
Muchas gracias, espero que estés aprendiendo mucho.
Excelente tutorial maestro
saludos maestro
Irónicamente cuando puse lazy loading a las imagenes e s del proyecto, el PageSpeed de Google me marcaba peores resultados jaja, aunque personalmente me gustó ya que por lo menos a mi me cargaba más rápido la página
Rubén es mi onichan
mi esstimado no hay un software que funcione como tinypng.
Por fin, Saludos Crack
Muy buen vídeo, voy a probar este método a ver
Se tiene que hacer todo ese proceso de comprimir, reducir el tamaño y volver a comprimir o solo se reduce el tamaño y luego se comprime?
Muchas gracias. Excelente tip