El Lazy Load Killer con CSS (1 línea de código) 🤯
HTML-код
- Опубликовано: 10 окт 2024
- Descubre cómo mejorar el rendimiento de tu web con la propiedad CSS 'content-visibility'. En este video te explico cómo esta propiedad ayuda a reducir el tiempo de renderizado en navegadores modernos
▶ Artículo analizado: web.dev/articl...
▶ No te pierdas más directos en: / midudev
buen contenido mudi, también vi el articulo que subiste a linkedin sobre performance y rendimiento web
Yo lei en el titulo: "esta propiedad de css me tiene PAPEADO! 🤯"
Pero midu quién no te hace caso? Si eres un trozo de pan que explicas muy bien ❤
Jajajajaja gracias
Me ha gustado tus últimos videos hablando de propiedades antiguas y nuevas de CSS.
Gracias!
Excelente contenido tio, muy guay! me preguntase si podes compartir información sobre como mejorar , ventas y desventajas al ocuparlos en las pagínas, alternativas actuales... GRACIAS por compartir tus conocimientos!!! Saludos
midu, hoy utilice esta propiedad css y esta tremenda, quien pensaría que con css se podría obtimizar algo 🤣,
resulta ser que tenemos un cliente que quería importar productos de forma masiva, y quería que todos esos productos se rendericen en el dom antes de importarlos,
este cliente tenía un csv con 10.000 productos y esto tardaba como 3 minutos en renderizar por completo en el dom y hacia que la pagina no responda,
pero le agregue el content-visivility y el cambio fue brutal, ahora solo tarda 30 segundos y a medida que se va scrolleando se van renderizando los elementos y uno ni se da cuenta
excelente midu ! , ahora actualizando y agregando esta propiedad.
muchas gracias Midu, te queremos! ;)
Excelente veré como va con los nuevos proyectos
2:32 Me encanta el conocimiento técnicamente correcto de Midu. 🤣🤣🤣
De paso lo de las fuentes, increible muchas gracias midu :)
Muy buenas, donde esta el enlace hacia el artículo para optimizar las fuentes?.
simeplemente excelente..
Casos de uso: modales, dropdowns, footers, infinity scroll, containers que esten muy abajo
12:10 ¡Aaaaaawwwwww... pobechito! XD
MIDU es el Wampiz
Una pregunta esto funciona como por ejemplo lo hace react-window o como react virtuoso? Justo tengo que renderizar un tabla con más de 1000 filas y esto podría ayudar al rendimiento
Me recuerda a una función que tiene astro qué renderiza el componente cuando lo ve el usuario.
Haz Un video de 0 a Master en herramientas de desarrollo 🎉serias el primero en RUclips
Esto no es igual que el atributo hidden?
También, hay alguna forma de hacer cargas en chunks, digamos igual que como hace maincra, que te carga sólo cierta cantidad de blocks y cuando pasas de un limite se desactivan.
No, no es igual.
Esta interesante pero cuando veo wikis algunas de estas tienen esta propiedad y como le choca al momento de buscar cosas ahi o ver contendio de abajo rapido, para otro tipo de cosas la veo bien pero en caso de uso rapido, lo veo incluso molesto
no me aparece la opcion enable local overrides
1 seg de diferencia se puede transformar en un dolor de cabeza a largo plazo al momento de manejar la data 😂😂😂😂😂
* {
content-visibility: auto;
} ?😂
También estaba pensando en lo mismo, pero por lo visto tendrá un coste de rendimiento (irónicamente)
Se puede usar con nextjs 14?
Que tendría que ver el lenguaje o framework con el que está hecha la web, con una propiedad css que maneja el navegador?
si
modo quirks para IE8 🤣
Jajaja con esa intro menos el hp de explorer, ya desde hay todo el contenido tomo mucha mas importancia 😂😂
RIP lazy loading
Pero la petición al servidor se haría igual, solo serviría para el lado del cliente
su su sus cribete
oli
Primero
Yo estoy esperando que un día llegues todo enfadado dando golpes a todo y con la cara desencajada sin sentido.
Yolo
Último
Vengo del futuro para decirte que no fuiste el último, lo siento :c
Luego ya parece que nada más anda viendo que hace Teo para venir a traducirlo
Creo que es lo contrario, fíjate las fechas
@@NimbleTron Teo habló de esto desde antier. Checa tooodos los últimos videos de Teo contra los de Midu y Midu ya sólo es un google translate.
@@MauricioGonzalezPalahjunkie
no entiendo, hay algún problema o que pasa? 🤔
@@MauricioGonzalezPalahjunkie no es de antier, siempre ha sido así, porque quieras o no theo también es un referente, el detalle es que no todos entienden el ingles, ni siquiera usando el Google translate, les falta contexto. Pero las similitudes no es porque se copien entre si, si no porque hablan de las mismas tendencias que nos interesan, es como que si por ver una noticia de tu ciudad local luego la veas en una web u otro periódico y digas que ya está repetida, se trata de la actualidad y lo que está pasando, y cada quien le pone de su cosecha y su punto de vista, si no te gusta el de midu la puerta es ancha xD, Bendiciones
@@JohanGutierrez-JA concuerdo perfectamente sisi
Yo no se porque ustedes le dan tanta importancia a los demás navegador que no sea Chrome yo por lo mucho Safari le doy soporte y es porque es casi obligatorio porque hasta ahora es el navegador oficial de la marca de pues no me importa que usen Chrome todos el mundo y se dejen de loquera
Por qué de seguro no has tenido app o páginas web internacionales o de mucho tráfico.
Ahí si ves usuarios de todos los navegadores
@@hayvervargas3671 si tengo y según ni datos de Google analytics chrome es lo que más se usa
@@hayvervargas3671creo que hace un poco de referencia a que porque la gente anda buscando tanto navegadores cuando todos van a trackearte y vender tus datos, entonces no tiene sentido usar más navegadores sobre todo porque pensas que por usar Brave no te van a trackear pero sin embargo entras a Facebook o RUclips que lo hara no importa que en que navegador estes, asi que no tiene ningún sentido
Y seguro tus usuarios tampoco usan productos apple..
@@JorgeAndres-es5oc dije que apena Safari