Sitios Web de Alto Rendimiento

14 reglas para página más rápidas

Autor original: Steve Souders

Chief Performance Yahoo!
souders@yahoo-inc.com

1
 Rendimiento Excepcional

Cuantificar y mejorar el rendimiento de los

Productos mundiales de Yahoo!
Centrar la experiencia, construir herramientas,
Analizar datos, indagar, investigar, y promover
Las mejores prácticas

2
La importancia del rendimiento
Del Front-End

3
Tiempo consumido en el Frontend
Cache Cache
vacío lleno
amazon.com 82% 86%
aol.com 94% 86%
cnn.com 81% 92%
ebay.com 98% 92%
google.com 86% 64%
msn.com 97% 95%
myspace.com 96% 86%
wikipedia.org 80% 88%
yahoo.com 95% 88%
youtube.com 97% 95%

4
La Regla de Oro del Rendimiento

80-90% del tiempo de respuesta para el

Usuario final es consumido en el front-end.
Empezar allí.
•Mayor potencial para mejora
•Más mimple
•Probado que funciona

5
14 Reglas

6
 14 Reglas
1. Hacer menos peticiones HTTP
2. Usar CDNs (Content Delivery Network)
3. Agregar encabezados de expiración
4. Gzip componentes
5. Colocar hojas de estilo en la parte superior
6. Mover los scripts a la parte inferior
7. Evitar expresiones CSS
8. Hacer JS y CSS externos
9. Reducir búsquedas DNS
10. Minimizar JS
11. Evitar redirecciones
12. Eliminar scripts duplicados
13. Configurar ETags
14. Hacer AJAX cacheable
7
Regla 1: Hacer menos peticiones HTTP

CSS sprites
Scripts combinados , hoja de estilo combinadas
Mapas de Imágenes

8
 CSS Sprites

<span style="
background-image: url('sprites.gif');
background-position: -260px -90px;">
</span>

size of combined image is less

9
 Regla 2: Usar una CDN
amazon.com Akamai
aol.com Akamai
cnn.com
ebay.com Akamai, Mirror Image
google.com
msn.com SAVVIS
myspace.com Akamai, Limelight
wikipedia.org
yahoo.com Akamai
youtube.com

Distribuir tu contenido estático antes

de distribuir tu contenido dinámico 10
 Regla 3: Agregar encabezados de
Expiración (no solo imágenes)
Hojas de
Imágenes Scripts % Tiempo medio
estilo
amazon.com 0/62 0/1 0/3 0% 114 días
aol.com 23/43 1/1 6/18 48% 217 días
cnn.com 0/138 0/2 2/11 1% 227 días
ebay.com 16/20 0/2 0/7 55% 140 días
froogle.google.com 1/23 0/1 0/1 4% 454 días
msn.com 32/35 1/1 3/9 80% 34 días
myspace.com 0/18 0/2 0/2 0% 1 día
wikipedia.org 6/8 1/1 2/3 75% 1 día
yahoo.com 23/23 1/1 4/4 100% n/a
youtube.com 0/32 0/3 0/7 0% 26 días
11
 Regla 4: Gzip componentes

•Puedes afectar el tiempo de descarga

de los usuarios
•90%+ de los navegadores soportan
compresión

12
 Gzip: no solo para HTML
HTML Scripts Hojas de estilo
amazon.com x
aol.com x algo algo
cnn.com
ebay.com x
froogle.google.com x x x
msn.com x deflate deflate
myspace.com x x x
wikipedia.org x x x
yahoo.com x x x
youtube.com x algo algo

gzip scripts, hojas de estilo, XML, JSON (no

imágenes, PDF) 13
Regla 5: Colocar hojas de estilo en la
parte
superior

Las hojas de estilo bloquean el desplegado

en IE
Solución:
•Colocar las hojas de estilo en HEAD (por
especificación)
•Evitar contenido Flash sin estilos
•Usar LINK (no @import)

14
Regla 6: Mover los scripts a la
parte inferior
scripts bloquean descargas paralelas en todos los
hostnames

scripts bloquean el desplegado de todo lo que esté

debajo de ellos en la página
script que aplaza attribute no es una solución
– bloquea desplegado y descargas en Firefox
– bloqueo ligero en IE

15
 Regla 7: Evitar expresiones CSS

Se usa en IE para asignar propiedade CSS

width: expression(
document.body.clientWidth < 600 ?
“600px” : “auto” );

problema: las expressions se ejecutan

muchas veces
– mover mouse move, presionar teclas,
redimensionar, scroll, etc.
alternativas:
– expresiones de una vez
– controladores de eventos (event handlers)
16
Regla 8: Hacer JS y CSS externos

inline: el documento HTML es más grande

externo: más peticiones HTTP, pero variables
En caché
– vistas de página por usuario (por sesión)
– vacío vs. primed cache stats
– reutilización de componentes

Externo por lo general en mejor

Crédit extra : descarga post-onload,
Inlining dinámico
17
 Regla 9: Reducir búsquedas DNS
Por lo general 20-120 ms
Bloquear descargas paralelas
Los Sistemas Operativos y navegadores
Tienen caches para DNS

18
 Regla 10: Minimizar JS
Minimizar Minimizar
Externo? Inline?
www.amazon.com no no
www.aol.com no no
www.cnn.com no no
www.ebay.com sí no
froogle.google.com sí sí
www.msn.com sí sí
www.myspace.com no no
www.wikipedia.org no no
www.yahoo.com sí sí
www.youtube.com no no

Minimizar scripts inline, también 19

 Minimizar vs. Oscurecer
Original JSMin Ahorro Dojo Ahorro
www.amazon.com 204K 31K (15%) 48K (24%)
www.aol.com 44K 4K (10%) 4K (10%)
www.cnn.com 98K 19K (20%) 24K (25%)
www.myspace.com 88K 23K (27%) 24K (28%)
www.wikipedia.org 42K 14K (34%) 16K (38%)
www.youtube.com 34K 8K (22%) 10K (29%)
Average 85K 17K (21%) 21K (25%)

minimizar– es más seguro

No es mucha la diferencia

20
 Regla 11: Evitar redirecciones

Códigos de estado 3xx – principalmente 301 and 302

HTTP/1.1 301 Moved Permanently
Location: http://stevesouders.com/newuri

Agregar encabezados de expiración para

Redirigir el caché es la peor forma de bloquear

21
Regla 12: Eliminar scripts duplicados

Daña el rendimiento
– peticiones extra HTTP (sólo IE)
– ejecuciones extra
atípico?
– 2 de10 sitios importantes contienen scripts
duplicados

22
 Regla 13: Configurar ETags
Único identificador regresado como respuesta
ETag: "c8897e-aee-4165acf0"
Last-Modified: Thu, 07 Oct 2004 20:54:08 GMT

Usado en peticiones condicionales GET

If-None-Match: "c8897e-aee-4165acf0"
If-Modified-Since: Thu, 07 Oct 2004 20:54:08 GMT

Si el Etag no coincide, no puede enviar 304

Formato ETag
– Apache: inode-size-timestamp
– IIS: Filetimestamp:ChangeNumber
Üsalo o piérdelo
– Apache: FileETag none
– IIS: http://support.microsoft.com/kb/922703/
23
 Regla 14: Hacer AJAX cacheable
y pequeño y pequeño
XHR, JSON, iframe, scripts dinámic pueden
ser cached (y minimizados y
compactados)
Una respuesta personalizada aún puede ser
cacheable por esa persona

24
 YSlow

http://developer.yahoo.com/yslow
Herramienta para evaluar rendimiento
Calificar páginas web para cada regla
Extensión Firefox integrada con Firebug
Y licencia open source

25
26
 Ventajas adicionales
Enfocarse al front-end permite los
mejores logros
Controlas los tiempos de respuesta de los
Usuarios
Pequeñas inversiones permite concesiones
LOFNO (Look Out For Number One) -
Sé un defensor de tus usuarios

27
 Links
book: http://www.oreilly.com/catalog/9780596514211/
examples: http://stevesouders.com/examples/
image maps: http://www.w3.org/TR/html401/struct/objects.html#h-13.6
CSS sprites: http://alistapart.com/articles/sprites
inline images: http://tools.ietf.org/html/rfc2397
jsmin: http://crockford.com/javascript/jsmin
dojo compressor: http://dojotoolkit.org/docs/shrinksafe
HTTP status codes: http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html
IBM Page Detailer: http://alphaworks.ibm.com/tech/pagedetailer
Fasterfox: http://fasterfox.mozdev.org/
LiveHTTPHeaders: http://livehttpheaders.mozdev.org/
Firebug: http://getfirebug.com/
YUIBlog: http://yuiblog.com/blog/2006/11/28/performance-research-part-1/
http://yuiblog.com/blog/2007/01/04/performance-research-part-2/
http://yuiblog.com/blog/2007/03/01/performance-research-part-3/
http://yuiblog.com/blog/2007/04/11/performance-research-part-4/
YDN: http://developer.yahoo.net/blog/archives/2007/03/high_performanc.html
http://developer.yahoo.net/blog/archives/2007/04/rule_1_make_few.html
28