2013-03-31

La guía definitiva para el rendimiento front-end


Una interesante recopilación de puntos para mejorar el rendimiento y velocidad de descarga de nuestros sitios web, aquí les dejo un resumen pero pueden verlo a detalle directamente en su sitio http://browserdiet.com/es/.

  • Usar CSS externo nunca incrustado en paginas
  • Estilos en declararlos en el HEAD y SCRIPTS al final del BODY
  • Comprimir HTML
  • script async src=example.js( no respeta el orden de carga)
  • Comprimir CSS
  • Combinar múltiples archivos CSS
  • No usar @import para referencia CSS
  • Cargar plugins o scripts de terceros asíncronamente o usa Friendly iFrames
  • Definir longitud de arrays en javascript
  • Evitar DOCUMENT.WRITE
  • Minimizar los repaints y reflows
  • Evita manipulación del DOW
  • Guarda los selectores en variables para evitar la búsqueda repetida
  • Comprime tus scripts
  • Combina múltiples scripts en uno solo
  • Usa siempre la última versión de jquery en copia local o por google apis
  • Usa for en lugar de each
  • No uses jquery a menos que sea necesario
  • Usa sprites en imágenes
  • No cambies el tamaño de las imágenes en HTML (no uses imágenes fuera de las medidas que usaras)
  • Siempre define el ancho y alto de las imágenes
  • Optimiza imágenes quitando los datos de ella o comprimiendo
  • Configurar el servidor para cachear lo necesario, para evitar el cacheo de ciertos archivos  usar un parámetro GET en las nuevas versiones de archivos (home.js?v=1)
  • Activar el GZIP en el servidor
  • Usar herramientas de diagnóstico
Fuente: http://browserdiet.com/es/