Haz tu Pagina Web más Rápida con Lazy Loading y Optimización de Imágenes

Подписаться 510 тыс.

Просмотров 113 тыс.

50% 1

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.falconmasters.com
⭐ Curso de Diseño Web desde Cero:
www.desarrolloweb.io/cursos/d...
⭐ Curso de PHP y MYSQL desde Cero:
www.desarrolloweb.io/cursos/p...
⭐ Curso de React y Firebase desde Cero:
www.desarrolloweb.io/cursos/r...
⭐ Curso de Bootstrap:
www.desarrolloweb.io/cursos/b...
⭐ Curso de Woocommerce:
www.desarrolloweb.io/cursos/t...
---
📄 Código del Proyecto: github.com/falconmasters/lazy...
TinyPNG: tinypng.com/
---
Redes Sociales:
♦ Twitter @falconmasters:
/ falconmasters
♦ Pagina de Facebook:
/ falconmasters

Наука

Опубликовано:

16 мар 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 318

@FalconMasters 4 года назад

Manita arriba al video si te gusto y vas a implementar estos trucos en tu sitio web. 👍

@yehissongalvisg6718 4 года назад

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. ✌️😀

@ulises7147 4 года назад

que tema tienes en tu vs code amigo ??

@FalconMasters 4 года назад

@@ulises7147 El tema se llama ayu mirage.

@barondls8134 3 года назад

Joder! No conocía ese truco, gracias men, pulgar arriba.

@danest029 3 года назад

Sube mas videos como este por favor. Sobre como optimizar un sitio web

@anthonyhernandez68 4 года назад

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í.

@tipoidarraga 4 года назад

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.

@Wiar8 4 года назад

muchas gracias justamente estaba buscando algún tutorial para optimizar imágenes

@hechados 4 года назад

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

@genecles 4 года назад

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.

@jhonatanrodriguez6341 3 года назад

Yo estaba esperando mucho código javascript y termine muy impresionado lo fácil que es... Gracias como siempre

@elbohemiopresenta888 4 года назад

Ya habia esperado por otro de tus videos gracias crack

@migcon67 3 года назад

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!!!

3 года назад

No se si fue cosa del destino, suerte o casualidad pero estos vídeos aparecieron cuando mas los necesitaba ! Gracias!

@gomaov 4 года назад

Justo lo que andaba buscando, gracias Tío Falcon

@sebastianandresfigueroafra381 4 года назад

Por fin, Saludos Crack

@jorgevalbuena4502 3 года назад

gracias Carlos, excelentes tutos.....además tu curso en udemy....genial!!

@gabriworld 2 года назад

Capo! gracias por este tutorial. La verdad me ayudo mucho lo enseñado para mi pagina que estoy creando. Quede encantado. Saludos desde Argentina

@axelosvaldo1343 4 года назад

Genial falcon, ya hacía falta un vídeo así, muy funcional gracias!

@FalconMasters 4 года назад

Muchas gracias!

@manuelromero4399 3 года назад

Excelente aporte, gracias FalcoMasters.

@programacion_para_todos 4 года назад

Excelente aporte y muy divertido de ver tambien, Gracias.

@videoskc 2 года назад

Ay ya sé de donde te conozco, compre un curso en Udemy y tu fusite mi profe... Que buenos videos y gratis, gracias

@Raulgarciadela 3 года назад

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!!!

@danielalbertobermudezramos9353 3 года назад

Excelente video. justo estaba buscando esta informacion para optimizar mi trabajo.

@eddydarkenb1967 4 года назад

al fin alguien quien explica, facil y simple. Muchas gracias

@d1tooch33n 4 года назад

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

@edgareliamsantos5751 4 года назад

Muchas gracias amigo por compartir tus conocimientos.

@cristiancala8693 4 года назад

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

@alexlimachi7715 3 года назад

Como siempre bien explicado, muchas, muchas gracias!!!

@mauriciobrito7 4 года назад

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.

@kevinchavezsanchez9359 3 года назад

Buena, Máster. A penas haré mi portafolio y tenía miedo el peso de las imágenes y videos. Gracias

@CarlosRuiz2 3 года назад

súper útil y clara la información, muchas gracias!

@DanilettoMusic 4 года назад

me encanto el video, si tienes mas herramientas utiles como esas porfa muestralas en los demas videos

@william64201 4 года назад

Gracias amigo, muy buen video me fue de gran utilidad

@alfredozambrano7559 3 года назад

EXCELENTE MI HERMANO. Lo felicito por tan importante información. Me parece muy buena manera de optimizar las imágenes.

@brandovidaldeza6840 3 года назад

Eres un capo, gracias por semejante video, siempre impartiendo buen contenido, mil gracias 🚀😍.

@lauraluchetti7321 4 года назад

Excelente como siempre Carlos! Muy util desconocía esta técnica.

@FalconMasters 4 года назад

Gracias!

@aaronhulkito 4 года назад

Oie esto si me sirve Gracias a ti mi pagina va genial

@viraleschanner6438 3 года назад

Primera vez que escucho hablar de *Lazy Loading* y estoy super encantado

@missanddiie 4 года назад

Ya lo sabia hacer, pero muchas gracias. Eres el mejor

@maikelberbi5210 4 года назад

Eres grande falcon. Que Dios te bendiga

@danny10danny10 3 года назад

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

@FalconMasters 3 года назад

Muchas gracias a ti por el apoyo!

@pablojs_220 3 года назад

Muchas gracias esto me sirvio para aplicarlo en mi app de peliculas, un saludo desde Costa Rica

@rickertluisgonzalesramirez1839 4 года назад

Excelente video Falcon, seria genual que des mas tips de como optimizar una pagina web

@alexanderv.t.9185 Год назад

Gracias Master , me ha servido mucho su video un suscriptor mas

@shinigami0003 4 года назад

Tus vídeos son increíbles siempre nos enseñas algo nuevo

@FalconMasters 4 года назад

Siempre hago mi mejor esfuerzo

@masteroogway5426 2 года назад

Te lo agradezco brother, buen video

@raul7254 3 года назад

Me gustaria mas videos de optimizaciones. Muy bueno

@arielvaretto Год назад

gracias por compartir tanto conocimiento!

@zcoding8355 3 года назад

¡Mis respetos Maestro! Hiper genial este vídeo.... súper bien explicado y utilísimo..¡Gracias y felicitaciones!

@FalconMasters 3 года назад

Gracias!

@juancampos352 3 года назад

Este video es oro puro

@joseherrada7180 4 года назад

He estado buscando esta tecnología, gracias

@eduardoperez5244 3 года назад

Muy buen video nuevo sub has más vídeos sobre optimización web 👍👍👍

@oscardariorendonzuluaga1318 3 года назад

Los mejores Tutoriales de RU-vid

@ramonurchipia 4 года назад

Genial! Me sirvio muchisimo, gracias!

@fotosaudios2027 3 года назад

Muy buen vídeo, voy a probar este método a ver

@luisrlwev 2 года назад

Muchas gracias eres un crack he aprendido mucho contigo

@juanarias2831 Год назад

Excelente gracias mi hermano!

@michelrojas1609 4 года назад

Excelente tutorial maestro

@badishinmoon 4 года назад

Como siempre, todo un crack, gracias

@FalconMasters 4 года назад

Gracias!

@davidticstorm4114 3 года назад

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.

@carolinasalomrivero4788 Месяц назад

Gracias, me sacaste de un tremendo apuro con este video...

@izanpublicliente5926 4 года назад

que maquina eres! creo que la mitad de mi pagina es gracias a ti jajajaj un saludo

@Mauro6096 3 года назад

Hola, me sirvió mucho gracias, mencionas más temas de optimización de sitios, tienes esos videos? Saludos.

@ruidodevinilo 4 года назад

Tremendo este tutorial. Muchas gracias

@Victoritop 3 года назад

Gran aporte! Me suscribo!

@matiasmaez 2 года назад

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

@jlgallardov 3 года назад

Excelente técnica para mejorar el SEO

@elfredo2358 3 года назад

excelente video, me gustaria hacerte un petición... ¿Podrías subir un video optimizando una landing page con DIVI?

@adjmedina 4 года назад

Muchas gracias. Excelente tip

@jordanteam9500 3 года назад

Genial, ahora mismo aplicó a mi renovada web :)

@josechambi7483 2 года назад

Genial!! muy buen aporte amigo, gracias FalconMasters !! consulta que mas puedo hacer para optimizar la pagina ? ti

@diegomonsalve1790 3 года назад

Excelente video, entendí todo, solo quiero saber algo, tienes un video usando la librería? O vas hacer uno? Gracias amigo.

@tutoraprendencasa Год назад

Hola amigo. Gracias por tu video.

@davidjoel9787 5 месяцев назад

Genial aporte muchas gracias

@emah094 4 года назад

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!

@Krakenapolo1 3 года назад

que buen video amigo 10/ 10

@acuarelass 3 года назад

Genial, muchas gracias!!!

@carlostapia6828 4 года назад

Muy interesante, gracias por el video. Una pregunta ¿que hay con las imágenes webp?

@rodrigomzz. 2 года назад

Amigo que buen tutorial !, Me suscribo a tu canal de inmediato.

@FalconMasters 2 года назад

Muchas gracias!

@ARMAPRO Год назад

fantastico excelente video gracias por enseñarnos amigo, me suscribo para ver mas de tus contenidos me sirvio muchisimos, aparte explicas muy bien.

@FalconMasters Год назад

Muchas gracias!

@YoungHWN Год назад

te la mmste.... dush pense que era un plugin que lo hacia en fa no ir y entrar a ese sitio, gracias!

@misterhch 3 года назад

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.

@jaimeviloriogreen 4 года назад

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!!!

@FalconMasters 4 года назад

Estupendo! Muy bueno saberlo!

@freddysenpai4623 3 года назад

Wow excelente video!

@lestherjosue1729 4 года назад

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.

@santiagoespindola1785 4 года назад

Eres un genio, estoy haciendo tu curso de php :)

@FalconMasters 4 года назад

Muchas gracias, espero que estés aprendiendo mucho.

@felipetechcoding5173 3 года назад

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!

@FalconMasters 3 года назад

Me alegra mucho que mis videos te sean de ayuda, eso es genial!

@alexramon6455 4 года назад

Muy buenos consejos 👍

@carlosalvert6117 2 года назад

muchas gracias, me sirvio mucho

@noiissy 3 года назад

Alv, yo me esperaba algo más complicado, nose, agregar algo de código en javascript... pero que fácil, Gracias!!!

@manaseslovera4747 2 года назад

Muy buen video.

@jesuseduardosalas3499 3 года назад

Gracias increible video

@romuloalves9349 4 года назад

Ótimo vídeo parabéns 👏.

@leontelarrauri2988 3 года назад

Muy bueno, Gracias...

@FrankGP.com. 2 года назад

Gracias falcon

@KevinDiaz-ju5gv 4 года назад

Excelente!

@ZeR0ByTe 4 года назад

Una duda que me quedó, si traes mucos background-image desde CSS, eso no es posible hacerlo lazy loading? Muy bueno, desconocia el atributo!!

@josebolano261 3 года назад

Uff hermano excelente

@fernandoguti2030 4 года назад

De nuevo, gracias!

@williamsmamanimamani846 2 года назад

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.

@martinbolivar1159 2 года назад

Hola qué tal, me ha encantado justo estoy desarrollando un sitio donde mostrar fotografías, vi tu tutorial sobre Cómo crear un portafolio dinámico. Me parece ambos son increíble. ¿Cómo puedo hacer que en ambas opciones muestre 5,000 imágenes?¿Cómo puedo entrar en contacto?

@wilsonandia8290 3 года назад

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.