Web Performance Best Practices

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

(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.

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.

3
3. Hacerque el Javascript y los CSS seanexternos.
Usararchivosexternosgeneralmente produce páginasmásrapidasporque los archivos son cacheadospor el browser.

4
4. Minify JavaScript y CSS
Remover caracteresinnecesariosdel códigoparareducirsutamaño y por lo tantomejorar los tiempos de carga.
Usar YUI Compressor (o herramientassimilares).

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.

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.

7
7. Quitar scripts duplicados
Incluir el mismo script dos o másveces en unapáginaempeora la performace e incrementalas requests.

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.

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.

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.

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.

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

13
Usar el pluginpara Firefox Yslow
http://developer.yahoo.com/yslow/

http://www.tucumanvalley.com	114
http://www.slideshare.net	12

Web Performance Best Practices

by INSIGNIA4U on Mar 24, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

2 Embeds 126

Statistics

Web Performance Best Practices — Presentation Transcript