it-swarm-es.com

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

¿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?

12
Mark Henderson

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.
  • Use sprites que se generan automáticamente . Un Sprite es una imagen única que contiene múltiples íconos u otras imágenes pequeñas; luego elige qué imagen mostrar con la propiedad CSS background. 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",

10
Thomas Bonini

Google ha resumido y explicado sus recomendaciones al mejor minimizar 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 de Yahoo! YSlow . 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 la velocidad de la página.

Yahoo! 'S Mejores prácticas para acelerar su sitio web identificar 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 artículos de largo, no es necesario citarla en su totalidad).

Tanto YSlow (enlace de imagen) como Velocidad de página (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.

5
Bryson