Cómo hacer que el tamaño de la página web sea más pequeño

No es inmediatamente obvio si está preguntando sobre el tamaño del archivo o el tamaño de la página. Las otras dos respuestas cubren casi todo lo que hubiera mencionado sobre la optimización de los tiempos de carga:

• optimizar imágenes
• usar sprites donde tenga sentido
• minify (realmente no es un ahorro tan grande a menos que esté sirviendo millones de visitas)
• Red de entrega de contenidos
• reducir el número de solicitudes HTTP.

El último es un desarrollo relativamente nuevo y está causando que algunos desarrolladores reconsideren sus mejores prácticas. Si tiene un sitio de tráfico muy alto, incluso podría tener sentido mover su CSS al encabezado de la página en lugar de usar hojas de estilo que obligan a otra solicitud. El problema con las solicitudes es que los navegadores solo hacen muchas al mismo tiempo (2-8 generalmente), por lo que si su página tiene 40 activos que deben descargarse, muchos de ellos esperarán a que otros terminen antes de comenzar.

Dicho todo esto, es posible que realmente estés preguntando sobre el tamaño de la página con el objetivo de hacer que tus páginas sean más fáciles de usar en pantallas pequeñas. En verdad, tanto el tamaño de la página como el tiempo de carga de la página / tamaño del archivo son aspectos importantes en el desarrollo web. Créalo o no, hubo un momento en que era aceptable si podía mantener los tiempos de carga por debajo de 7-10 segundos. Para flash, a veces las personas esperan 30 segundos o más para que se cargue el contenido. Esos días han quedado atrás. Actualmente, la base de usuarios de Internet “Lo quiero ahora” espera tiempos de carga inferiores a 2 segundos. Idealmente, probablemente desee que sea de 1.5 segundos o menos o perderá los globos oculares y las ventas potenciales o los ingresos publicitarios. Esa es solo la realidad de la web.

Volviendo al tamaño real de la página, realmente estás hablando de la experiencia del usuario. Al igual que los tiempos de carga lenta, una mala experiencia del usuario (es decir, su página se ve terrible y fuerza el desplazamiento horizontal en pantallas pequeñas) le costará dinero o repetirá visitas. Esto se resuelve diseñando con una primera mentalidad móvil usando consultas de medios o una repetitiva respuesta para que siempre esté sirviendo contenido en un formato apropiado para el tamaño de pantalla del usuario.

Hay algunas cosas muy básicas con las que puedes comenzar.

1. Use alguna herramienta para minimizar y combinar múltiples archivos CSS en un solo archivo y múltiples archivos Javascript en un solo archivo
2. Use el formato PNG para las imágenes.
3. Combina varias imágenes en una sola y úsala como sprite
4. Habilite la compresión en su servidor web para javascript, css e imágenes
5. Habilite el encabezado de almacenamiento en caché en su servidor web para que el navegador en el extremo del cliente sepa almacenar en caché los contenidos estáticos de su sitio, lo que agilizará la carga posterior.
6. Elimine las etiquetas HTML innecesarias y use el compresor HTML
7. Ofusque archivos javascript y css para que use menos espacio

• La solución más sencilla sería optimizar las imágenes (comprimir y cambiar el tamaño de las fotos).
• Evite usar la importación en CSS (no SASS o LESS).
• Minificar CSS y JS.
• Evite usar la imagen mientras sea posible, use iconos de fuente, o incluso 1 fuente, para todo el conjunto de imágenes.
• Intente cargar contenido más grande (como una lista de 1000 productos) con ajax (si confía más en la codificación del lado del servidor), o cualquier cosa en tiempo real, como el nodo.
• Lazyload imágenes / activos, evite el uso de controles deslizantes de imagen.