Your SlideShare is downloading. ×
Web Performance Best Practices
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Performance Best Practices

1,012
views

Published on

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

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,012
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×