Hola! Quiero crear una web simple similar a la siguiente: https://quickdraw.withgoogle.com/data/apple
Un listado largo de iconos (siempre el mismo) cada uno con un texto diferente (al pasar por encima o al hacer click). La cosa es que si todos los elementos están en una sola página ésta pesará demasiado. Cómo haríais la estructura de una web así?
Agradezco cualquier aportación!
Saludos! Pablo
Buenas,
Lo que más pesa de una web son las imágenes, nº de consultas que tengas que hacer a una base de datos, etc. Así que si lo que vas a usar son imágenes, estas deben estar optimizadas para su uso en internet, si puedes guardalas como WebP que es el formato actual de imágenes más optimizado para este uso.
Saludos.
¿De cuántos iconos estamos hablando? 20, 200, 2000? Porque depende mucho orden de magnitud.
En realidad hay varias técnicas que puedes llevar a cabo. La más antigua sería crear los iconos en un sprite que permite colocar todos los iconos en una gran imagen que puedes optimizar bastante.
Luego, usar SVG puede ayudar, porque hace que los iconos sean muy ligeros. Puedes crear un empaquetado de los svg de diversas maneras, desde un archivo CSS, hasta con un web component que cargarías con Javascript.
Si estamos hablando ya de miles de imágenes, entonces requiere una carga perezosa, con Javascript, que debe de ser lo que hacen en la página que nos muestras. Solamente se muestran las imágenes que están visibles en la página en un momento dado y las que no, simplemente no se cargan todavía. Es posible con Javascript saber cuándo se están viendo los elementos de la página para cargar o no las imágenes. Mira, en este código https://vanillajstoolkit.com/helpers/isinviewport/ ejemplo sobre cómo conseguirlo.
Pero lo más nuevo es el lazy loading nativo de imágenes que te lo aporta el navegador directamente, que no hace ni falta escribir Javascript, aunque solo funcionaría en navegadores modernos. Se consigue simplemente con el atributo loading="lazy" en las imágenes.
<img src="icono.png" loading="lazy">