¿Métodos efectivos para reducir el ancho de banda (y por lo tanto los tiempos de carga de la página)?

12

¿Cuáles son los métodos más efectivos cuando se trata de reducir la cantidad de ancho de banda que un sitio web necesita para representar una página?

Caché agresivo? ¿Minificar JS / CSS? Gzip? CMS? Sprites?

bandwidth compression Mark Henderson
fuente
La pregunta duplicada obtiene una respuesta duplicada: webmasters.stackexchange.com/questions/569/…
Bryson
1
Esta pregunta fue primero, así que la otra es el duplicado
Mark Henderson, el

Respuestas:

10

Algunos métodos básicos fácilmente implementables por cualquier sitio web:

Un poco más involucrado:

  • Si es poco probable que cambie una página o imagen, dígale al navegador que la guarde en caché. La mayoría de los servidores web ya hacen esto para archivos estáticos, por lo que todo lo que debe hacer es agregarlo a sus scripts dinámicos siempre que sea posible.
  • Combina tus archivos CSS y JS en uno solo automáticamente . Esto es ventajoso ya que disminuye las solicitudes HTTP (que tienen sobrecarga y que ciertos navegadores estúpidos, y con eso me refiero a Internet Explorer, limitan de manera predeterminada 2 solicitudes a la vez por dominio).
  • Mueva sus archivos estáticos (CSS, JS, imágenes, etc.) a un nombre de dominio separado. Esto hace que la información de cookies no se envíe en la solicitud HTTP.

  • Utiliza sprites que se generan automáticamente . Un sprite es una sola imagen que contiene múltiples íconos u otras imágenes pequeñas; luego elige qué imagen mostrar con la backgroundpropiedad CSS . Ejemplo .

    La ventaja es que el cliente realiza menos solicitudes HTTP (que tienen sobrecarga).

En negrita "automáticamente" porque si está haciendo estas cosas manualmente, definitivamente no vale la pena, y hace que el mantenimiento del código sea una pesadilla. Por lo general, hacerlo automáticamente significa escribir un script personalizado, por lo que es un "poco más complicado",

Thomas Bonini
fuente
Iba a responder, pero creo que cubriste todo :)
Echo dice Reinstate Monica
Los gastos generales son de hecho una cosa importante a tener en cuenta, para archivos pequeños, pueden representar una buena fuente de los datos transferidos.
HoLyVieR
No use desinflar a menos que también verifique cuidadosamente el agente de usuario, ya que hay un error en Internet Explorer alrededor de desinflar.
@Kinopiko: sí, buenos consejos. Vea mi pregunta sobre el desbordamiento de la pila.
Thomas Bonini
5

Google ha resumido y explicado sus recomendaciones para minimizar al máximo el tamaño de la carga útil . Incluyen las siguientes técnicas:

  1. Habilitar la compresión
  2. Eliminar CSS no utilizado
  3. Minify JavaScript
  4. Minificar CSS
  5. Minify HTML
  6. Aplazar la carga de JavaScript
  7. Optimizar imágenes
  8. Servir imágenes escaladas
  9. Servir recursos desde una URL consistente

Estas sugerencias son parte de su proyecto de complemento de código abierto Firefox / Firebug llamado Page Speed . Similar al complemento YSlow de Yahoo ! . El complemento de Page Speed ​​real buscará muchas más optimizaciones de las que esa lista explica en detalle. También se presentan instrucciones para usar Page Speed.

Las mejores prácticas de Yahoo! Para acelerar su sitio web identifican un conjunto similar de mejores prácticas:

  1. Minimizar solicitudes HTTP
  2. Use una red de entrega de contenido
  3. Agregar un encabezado de control de caché o caduca
  4. Componentes Gzip
  5. Poner hojas de estilo en la parte superior
  6. Poner guiones en la parte inferior
  7. Evitar expresiones CSS
  8. Hacer JavaScript y CSS externo
  9. Reducir las búsquedas de DNS
  10. ...

(La lista de Yahoo! tiene ~ 35 elementos, no es necesario citarla en su totalidad).

Tanto YSlow (enlace de imagen) como Page Speed (enlace de imagen) le permitirán ejecutar pruebas en sus páginas, sugiriendo cosas que puede hacer y mostrándole qué, de sus recomendaciones, ya está implementado.

Bryson
fuente