Comunidad NaerZone

 Título de la Sugerencia

Header y assets de la web

Sugerencia por

Mantequilla

Problema o situación a tratar

Hola espero tengan un excelente dia,

Tengo una sugerencia con respecto a la web ya que hace un tiempo que no logueaba en ella y queria buscar información pero noté con mucha sorpresa lo lento que cargaba el sitio a pesar de tener una conexion simétrica de 20mb (es decir, nivel industrial).

Quise investigar dicha lentitud porque pensaba que era mi conexión que fallaba ya que por lo general un sitio web con mi conexión por más pesado que sea tarda entre 1 a 3 segundos, Naerzone sobrepasó este tiempo con creces y como soy desarrollador web y tengo el conocimiento para saber si es la web o mi conexión me tome el atrevimiento de investigar un poquito.

Lo que conseguí fueron varias cosas, lo mas llamativo, fue un video de fondo en el header, especificamente en un section con ID "slider" y lleva por nombre Trailer2011.mp4 que pesa nada mas y nada menos que 13.8MB!!! que todo visitante debe cargar al ingresar, si bien es cierto que es asincrono (el video conforme va cargando se va reproduciendo) sigue descargando información mientras se permanece en el sitio. Adjunto captura.

https://ibb.co/zGrWhnV

Luego nos encontramos otros assets, en esta oportunidad algunas imágenes en formato PNG con un peso mayor a 2MB cada una. Adjunto igualmente captura.

https://ibb.co/HVX6zDt

Esto solo en el homepage del sitio web. En desarrollo web no hay una regla exacta para cuanto debe pesar un contenido pero por lo general una imagen o cualquier otro asset al pasar de 300kb se debe buscar forma de optimizar con urgencia sobre todo si no es uno solo sino varios los que se deben mostrar en una sola página dentro del sitio.

Y en caso de tener un video, se tiende a que no sea autoplay (para que no se descargue si el usuario no quiere) a menos que tenga un preprocesador de video, como lo tienen plataformas como Netflix o Youtube en donde la calidad es renderizada por el servidor y se entrega conforme la conexión, prioridad, solicitud etc... Nunca desde el propio servidor.

Todo esto deja entonces que para la primera carga del sitio (sin nada almacenado aún en cache) el usuario deba descargar primero al menos entre 9MB y 13MB para dejar de ver el loader con forma de gotita y poder ver el sitio web.

Finalmente, y esta es mi sugerencia, seria utilizar un optimizador de imágenes, existen muchos en la red, pero existen herramientas como imageOptim, ImageMagick, etc, hasta los mismos editores fotográficos más conocidos que pueden hacer este trabajo de forma increíble y sin perder calidad o al menos no perceptible por los usuarios.

Sustituir el video por una imagen, o servir el video desde Youtube por lo menos y con CSS dejarlo de fondo tal cual está ahorita.

Resultado de la Sugerencia