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. ✌️😀
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.
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!!!
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
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!!!
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
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.
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.
4 года назад+1
No se si fue cosa del destino, suerte o casualidad pero estos vídeos aparecieron cuando mas los necesitaba ! Gracias!
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.
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.
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.
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!!!
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!
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.
@@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? ..
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.
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
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.
FalconMaster muy buen video en verdad muchas gracias , solo tengo una pregunta ... será posible implementar este método en WordPress ? o existirá algún plugin que lo haga de la misma manera.
Genial. Y si hacemos un script con un bucle for para repetir todos esos div card lazy, etc. y le metemos una variable numérica incremental en el medio para que cargue todas con un solo ciclo for, ¿ganamos algo?
Hola nuevamente, ¿podrias hacer algun video de como optimizar los demas archivos css y otros? si utilizas la pagina de google speed para ver que cosas arreglar en un sitio tambien estaria genial!
Excelente video, consulta eso se le puede aplicar en angular en el html lo del lazy loading, xque yo trabajo con lazy loading pero para el ruteo, mas no en el html
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
Hola Falcón, excelente video me gusta mucho tu contenido, quería consultarte, como dijiste si el usuario guarda cache la página cargará todo completo como si no hubiera lazy loading, pero la idea es que así el usuario ya haya ingresado al sitio la página cargue igual de veloz, una vez quede en cache cargaría igual de rápido? O tu que recomiendas en estos casos? Teniendo en cuenta que la página cuenta con sesión de usuario y todo. Saludos y excelente video.
Llego muuuuy tarde jaja, pero sí, cuando el usuario ya entró por primera vez a tu web, su navegador descaró y almacenó todo en la caché, entonces cuando vuelva a entrar (Y siempre y cuando no haya borrado la caché), el sitio cargará mucho más rápido puesto que ya tiene algunos datos almacenados en la caché.
me gusto mucho el video muy interesante e ilustrativo pero hay alguna forma de optimizar por codigo? por ejemplo si tengo una app de ecomerce, las personas que suban imagenes para vender sus productos y tengo muchos usuarios no podria hacer de cada imagen esos pasos.
![[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)
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/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.
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!!!
Ay ya sé de donde te conozco, compre un curso en Udemy y tu fusite mi profe... Que buenos videos y gratis, gracias
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!
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!!!
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
Yo estaba esperando mucho código javascript y termine muy impresionado lo fácil que es... Gracias como siempre
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.
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.
No se si fue cosa del destino, suerte o casualidad pero estos vídeos aparecieron cuando mas los necesitaba !
Gracias!
Buena, Máster. A penas haré mi portafolio y tenía miedo el peso de las imágenes y videos. Gracias
Primera vez que escucho hablar de *Lazy Loading* y estoy super encantado
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
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.
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.
Muchas gracias esto me sirvio para aplicarlo en mi app de peliculas, un saludo desde Costa Rica
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
Capo! gracias por este tutorial. La verdad me ayudo mucho lo enseñado para mi pagina que estoy creando. Quede encantado. Saludos desde Argentina
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.
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!
Hola, me sirvió mucho gracias, mencionas más temas de optimización de sitios, tienes esos videos? Saludos.
Gracias, me sacaste de un tremendo apuro con este video...
Alv, yo me esperaba algo más complicado, nose, agregar algo de código en javascript... pero que fácil, Gracias!!!
EXCELENTE MI HERMANO. Lo felicito por tan importante información. Me parece muy buena manera de optimizar las imágenes.
Genial!! muy buen aporte amigo, gracias FalconMasters !! consulta que mas puedo hacer para optimizar la pagina ? ti
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!
¡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.
Excelente técnica para mejorar el SEO
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
muchas gracias justamente estaba buscando algún tutorial para optimizar imágenes
Espera un minuto, 1 minuto dije... que buen video!, oye, que buen video!!!, afuera sombrero!!!
Excelente como siempre Carlos! Muy util desconocía esta técnica.
Gracias!
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.
Genial falcon, ya hacía falta un vídeo así, muy funcional gracias!
Muchas gracias!
Eres un capo, gracias por semejante video, siempre impartiendo buen contenido, mil gracias 🚀😍.
Tus vídeos son increíbles siempre nos enseñas algo nuevo
Siempre hago mi mejor esfuerzo
te la mmste.... dush pense que era un plugin que lo hacia en fa no ir y entrar a ese sitio, gracias!
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!
Gracias Master , me ha servido mucho su video un suscriptor mas
Excelente video Falcon, seria genual que des mas tips de como optimizar una pagina web
Ya habia esperado por otro de tus videos gracias crack
Como siempre bien explicado, muchas, muchas gracias!!!
Eres grande falcon. Que Dios te bendiga
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? ..
Amigo que buen tutorial !, Me suscribo a tu canal de inmediato.
Muchas gracias!
Excelente! SEO y Diseño Web combinado en un solo tutorial! qué maravilla el atributo loading="lazy".
súper útil y clara la información, muchas gracias!
Excelente aporte y muy divertido de ver tambien, Gracias.
Excelente video, entendí todo, solo quiero saber algo, tienes un video usando la librería? O vas hacer uno? Gracias amigo.
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.
Los mejores Tutoriales de RUclips
Justo lo que andaba buscando, gracias Tío Falcon
que maquina eres! creo que la mitad de mi pagina es gracias a ti jajajaj un saludo
excelente video, me gustaria hacerte un petición... ¿Podrías subir un video optimizando una landing page con DIVI?
Vine pro bronce y encontre oro, amigo que buen video, explicas muy bien. Me suscribo y procedo a ver todos tus videos
Gracias!
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
Muy buen video nuevo sub has más vídeos sobre optimización web 👍👍👍
Muy interesante, gracias por el video. Una pregunta ¿que hay con las imágenes webp?
Ya lo sabia hacer, pero muchas gracias. Eres el mejor
Eres un genio, estoy haciendo tu curso de php :)
Muchas gracias, espero que estés aprendiendo mucho.
Genial, ahora mismo aplicó a mi renovada web :)
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
Gracias amigo, muy buen video me fue de gran utilidad
Excelente aporte, gracias FalcoMasters.
Mas que cualquier otra cosa es clave ajustar el tamaño correcto a las imagenes. Increible lo que acelera la pagina
Muchas gracias eres un crack he aprendido mucho contigo
Muchas gracias amigo por compartir tus conocimientos.
Hola amigo. Gracias por tu video.
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.
FalconMaster muy buen video en verdad muchas gracias , solo tengo una pregunta ... será posible implementar este método en WordPress ? o existirá algún plugin que lo haga de la misma manera.
Si hay muchos plugins para hacer tanto lazy loading como para bajar el peso de las imagenes. No conozco alguno, pero se que los hay.
Genial. Y si hacemos un script con un bucle for para repetir todos esos div card lazy, etc. y le metemos una variable numérica incremental en el medio para que cargue todas con un solo ciclo for, ¿ganamos algo?
Desde chrome, también puedes simular la velocidad de internet para que vean la diferencia como si estuviera en un servidor real.
Simplemente Excelente por eso me adjudique los cursos de udemy profe, Gracias por compartir
Como siempre, todo un crack, gracias
Gracias!
Hola nuevamente, ¿podrias hacer algun video de como optimizar los demas archivos css y otros? si utilizas la pagina de google speed para ver que cosas arreglar en un sitio tambien estaria genial!
Como... Esto no tiene mas likes?
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?
Con google chrome puede simular redes o velocidades 3G o superiores o inferiores.
Muy buen vídeo, voy a probar este método a ver
He estado buscando esta tecnología, gracias
Oie esto si me sirve
Gracias a ti mi pagina va genial
FALCON TENES MAS VIDEOS SOBRE OPTIMIZACION?
Este video es oro puro
Por fin, Saludos Crack
Excelente video, consulta eso se le puede aplicar en angular en el html lo del lazy loading, xque yo trabajo con lazy loading pero para el ruteo, mas no en el html
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
Gran aporte! Me suscribo!
Que genial muchas gracias, Enseñanos como podemos hacer esto en wordpress.
Hay varios plugins para hacerlo, no sabría recomendarte alguno ya que no los he probado pero se que existen y funcionan bien.
@@FalconMasters muchas gracias ya con lo que nos enseñaste tenemos para investigar. Gracias amigo.
Hola Falcón, excelente video me gusta mucho tu contenido, quería consultarte, como dijiste si el usuario guarda cache la página cargará todo completo como si no hubiera lazy loading, pero la idea es que así el usuario ya haya ingresado al sitio la página cargue igual de veloz, una vez quede en cache cargaría igual de rápido?
O tu que recomiendas en estos casos? Teniendo en cuenta que la página cuenta con sesión de usuario y todo.
Saludos y excelente video.
Llego muuuuy tarde jaja, pero sí, cuando el usuario ya entró por primera vez a tu web, su navegador descaró y almacenó todo en la caché, entonces cuando vuelva a entrar (Y siempre y cuando no haya borrado la caché), el sitio cargará mucho más rápido puesto que ya tiene algunos datos almacenados en la caché.
Excelente gracias mi hermano!
me gusto mucho el video muy interesante e ilustrativo pero hay alguna forma de optimizar por codigo? por ejemplo si tengo una app de ecomerce, las personas que suban imagenes para vender sus productos y tengo muchos usuarios no podria hacer de cada imagen esos pasos.
Tremendo este tutorial. Muchas gracias
18:25 Gracias por subirnos el autoestima 😈
lol
8:48 ¿Puedo hacer esto para mi blog de Blogger?
Genial aporte muchas gracias