Web Performance Best Practices

1,221 views

Published on

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,221
On SlideShare
0
From Embeds
0
Number of Embeds
144
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Performance Best Practices

  1. 1. 3/22/2010<br />HUGE / ParentsConnect /<br />0<br />MejoresPrácticas<br />(paraincrementar la velocidad de susitio web – de Yahoo)<br />23/Mar/2010<br />(in)signia<br />Carlos Kozuszko<br />www.insignia4u.com<br />
  2. 2. (in)signia/ MejoresPrácticas<br />1<br />1. Hacermenos requests HTTP<br />Hacerlaspáginasrápidasparaaquellosvisitantesqueingresanporprimeravez al sitioes la clave paraunamejorexperiencia del usuario.<br />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. <br />CSS Sprites are son la forma preferida de reducir el numero de imagenessolicitadas.<br />
  3. 3. 2<br />2. Ponerstylesheetsarriba y scripts abajo.<br />Mover los stylesheets al HEAD del documentohaceque el sitioparezcacargarsemásrapido.<br />Mientras el script se descarga, el browser no inicianingunaotradescarga.<br />(in)signia/ MejoresPrácticas<br />
  4. 4. 3<br />3. Hacerque el Javascript y los CSS seanexternos.<br />Usararchivosexternosgeneralmente produce páginasmásrapidasporque los archivos son cacheadospor el browser.<br />(in)signia/ MejoresPrácticas<br />
  5. 5. 4<br />4. Minify JavaScript y CSS<br />Remover caracteresinnecesariosdel códigoparareducirsutamaño y por lo tantomejorar los tiempos de carga.<br />Usar YUI Compressor (o herramientassimilares).<br />(in)signia/ MejoresPrácticas<br />
  6. 6. 5<br />5. EvitarExpresiones CSS y filtros<br />Las expresiones son soportadas en Internet Explorer y afectan la performance de supágina.<br />Ejemplo: <br />background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );<br />Los filtrosincrementan el consumo de memoriay puedencongelar o bloquear el rendering.<br />(in)signia/ MejoresPrácticas<br />
  7. 7. 6<br />6. Usar <link> en vez de @import<br />En IE @import se comporta de la misma forma queusar <link> al final de la página, asíqueesmejor no usarlo.<br />(in)signia/ MejoresPrácticas<br />
  8. 8. 7<br />7. Quitar scripts duplicados<br />Incluir el mismo script dos o másveces en unapáginaempeora la performace e incrementalas requests.<br />(in)signia/ MejoresPrácticas<br />
  9. 9. 8<br />8. Optimizarimágenes<br />Verificar los archivos GIF y versiestánusando un tamaño de paletacorrespondiente al numero de colores de la imagen.<br />Probarconvirtiendo los GIFs a PNGs y versi hay ganancia.<br />Ejecutarpngcrush en los PNGs.<br />Ejecutarjpegtran en los JPEGs.<br />(in)signia/ MejoresPrácticas<br />
  10. 10. 9<br />9. No escalarimágenes en el HTML.<br />No usarunaimagenmásgrandede lo que se necesitasóloporque se puedesetear el height y width en el HTML.<br />(in)signia/ MejoresPrácticas<br />
  11. 11. 10<br />10. Comprimir los componentes con Gzip (server-side)<br />Aproximadamente el 90% del tráfico de internet viaja a través de browsers quedicensoportargzip.<br />Comprimir con gzipgeneralmentereduce el tamaño de respuesta de suaplicación en alrededor del 70%. <br />Gzipesactualmente el método de compresiónmás popular y efectivo.<br />(in)signia/ MejoresPrácticas<br />
  12. 12. 11<br />Reglasavanzadas<br />Añadir headers Expires y Cache-Control (server-side)<br />Para los componentesestáticos“nuncaexpirar”especificando un header Expireslejano en el futuro.<br />Para componentesdinámicosutilizar un header Cache-Controlapropiadoparaayudar al browser con las requests condicionales.<br />(in)signia/ MejoresPrácticas<br />
  13. 13. 12<br />Reglasavanzadas<br />ConfigurarEtags(server-side)<br />Reducir el tamaño de las Cookies.<br />Usardominioslibres de Cookies para los componentes.<br />Reducir el numero de elementos DOM<br />Minimizar el numero de iframes.<br />Hacer un favicon.ico pequeño y cacheable<br />(in)signia/ MejoresPrácticas<br />
  14. 14. 13<br />Usar el pluginpara Firefox Yslow<br />http://developer.yahoo.com/yslow/<br />(in)signia/ MejoresPrácticas<br />

×