Un resumen de las mejores prácticas para la optimización de front end performance en sitios web.

1. 3/22/2010 HUGE / ParentsConnect / 0 MejoresPrácticas (paraincrementar la velocidad de susitio web – de Yahoo) 23/Mar/2010 (in)signia Carlos Kozuszko www.insignia4u.com

2. (in)signia/ MejoresPrácticas 1 1. Hacermenos requests HTTP Hacerlaspáginasrápidasparaaquellosvisitantesqueingresanporprimeravez al sitioes la clave paraunamejorexperiencia del usuario. Los archivoscombinados son una forma de reducir el numero de peticiones HTTP combinandotodos los scripts y en uno solo y combinandotodos los CSS en uno. CSS Sprites are son la forma preferida de reducir el numero de imagenessolicitadas.

3. 2 2. Ponerstylesheetsarriba y scripts abajo. Mover los stylesheets al HEAD del documentohaceque el sitioparezcacargarsemásrapido. Mientras el script se descarga, el browser no inicianingunaotradescarga. (in)signia/ MejoresPrácticas

4. 3 3. Hacerque el Javascript y los CSS seanexternos. Usararchivosexternosgeneralmente produce páginasmásrapidasporque los archivos son cacheadospor el browser. (in)signia/ MejoresPrácticas

5. 4 4. Minify JavaScript y CSS Remover caracteresinnecesariosdel códigoparareducirsutamaño y por lo tantomejorar los tiempos de carga. Usar YUI Compressor (o herramientassimilares). (in)signia/ MejoresPrácticas

6. 5 5. EvitarExpresiones CSS y filtros Las expresiones son soportadas en Internet Explorer y afectan la performance de supágina. Ejemplo: background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" ); Los filtrosincrementan el consumo de memoriay puedencongelar o bloquear el rendering. (in)signia/ MejoresPrácticas

7. 6 6. Usar <link> en vez de @import En IE @import se comporta de la misma forma queusar <link> al final de la página, asíqueesmejor no usarlo. (in)signia/ MejoresPrácticas

8. 7 7. Quitar scripts duplicados Incluir el mismo script dos o másveces en unapáginaempeora la performace e incrementalas requests. (in)signia/ MejoresPrácticas

9. 8 8. Optimizarimágenes Verificar los archivos GIF y versiestánusando un tamaño de paletacorrespondiente al numero de colores de la imagen. Probarconvirtiendo los GIFs a PNGs y versi hay ganancia. Ejecutarpngcrush en los PNGs. Ejecutarjpegtran en los JPEGs. (in)signia/ MejoresPrácticas

10. 9 9. No escalarimágenes en el HTML. No usarunaimagenmásgrandede lo que se necesitasóloporque se puedesetear el height y width en el HTML. (in)signia/ MejoresPrácticas

11. 10 10. Comprimir los componentes con Gzip (server-side) Aproximadamente el 90% del tráfico de internet viaja a través de browsers quedicensoportargzip. Comprimir con gzipgeneralmentereduce el tamaño de respuesta de suaplicación en alrededor del 70%. Gzipesactualmente el método de compresiónmás popular y efectivo. (in)signia/ MejoresPrácticas

12. 11 Reglasavanzadas Añadir headers Expires y Cache-Control (server-side) Para los componentesestáticos“nuncaexpirar”especificando un header Expireslejano en el futuro. Para componentesdinámicosutilizar un header Cache-Controlapropiadoparaayudar al browser con las requests condicionales. (in)signia/ MejoresPrácticas

13. 12 Reglasavanzadas ConfigurarEtags(server-side) Reducir el tamaño de las Cookies. Usardominioslibres de Cookies para los componentes. Reducir el numero de elementos DOM Minimizar el numero de iframes. Hacer un favicon.ico pequeño y cacheable (in)signia/ MejoresPrácticas

14. 13 Usar el pluginpara Firefox Yslow http://developer.yahoo.com/yslow/ (in)signia/ MejoresPrácticas