Optimización de sitios web para Alto Rendimiento - Base de esta nueva disciplina dentro del mundo del diseño y desarrollo web. Incluye algunos tips importantes a seguir. Charla presentada el 20/12/09 en Lima, en el marco del evento Adobenvivo

1. Sitios Web de
Alto Rendimiento
Lic. Maximiliano Firtman
@firt – firt.mobi
Lima, 20/12/2009
Picture from Simon Howden freedigitalphotos.net

2. Acerca de mí
Argentina
Profesor
Desarrollador
Speaker
Autor de Libros
Pictures from freedigitalphotos.net

5. WEB 2.0
www.libroajax.com

6. MOBILE

7. SABIAS ?

9. Picture from Simon Howden freedigitalphotos.net

10. POR QUE ?

11. Picture from Simon Howden freedigitalphotos.net

12. IMPACTO EN GANANCIAS
+500 ms → -20% traffic1
2
+400 ms → -5-9% full-page traffic
1
+100 ms → -1% sales
diaposi'va prestada de Steve Souders
1 h1p://home.blarg.net/~glinden/StanfordDataMining.2006‐11‐29.ppt
2 h1p://www.slideshare.net/stoyan/yslow‐20‐presenta'on

13. Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

14. Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

15. SAVE ME!
Picture from Matt Banks freedigitalphotos.net

16. Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

17. Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

18. HTML
Recursos
Browser
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

20. Lic. Maximiliano Firtman - @firt www.itmaster.com.ar
Sitios web de alto rendimiento

21. Foto de freefoto.com

22. Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

23. Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

24.  HTTP 1.1 (95% de los browsers) soporta compresión, ¿por qué
no comprimimos?
 Se puede comprimir:
 (x)HTML
 CSS
 JavaScript
 XML
 JSON
 Texto y FlashVars
 Se comprime un 70‐80% el tráfico
 ¡Se puede reducir un 50% el 'empo de carga!
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

25.  Por ejemplo: dominio.com y www.dominio.com
 Una pe'ción DNS fpica tarda 50‐120 ms
 Es recomendable no más de 4 dominios
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

26.  Sabemos que podemos usar HTTP 1.1,
usemos Keep‐Alive!
 Ahorramos decenas de paquetes TCP que
redundan en mayor velocidad final
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

27.  Cuando se usa HTTP 1.0 los browsers hacen hasta
4 pe'ciones simultáneas al mismo host.
 En HTTP 1.1 hacen sólo 2 simultáneas
 Generando dominios alias
 Ej: www.dominio.com y www2.dominio.com
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

28.  Hoy muy accesible
 El contenido está'co distribuirlo por una CDN
(Content Distribu'on Network)
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

29.  Cuando creamos una cookie, el browser la envía
en cada pe'ción
 Repe'mos: en cada pe'ción
 Si, repe'mos: en cada GIF, en cada JPG, en cada
CSS, etc.
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

30.  Dado que:
 Cada pe'ción lleva promedio 700‐900 bytes, sólo por
pedirla
 Requiere paquetes TCP
 Requiere mantener en el servidor un keep‐alive
 Hay Tiempo de espera
 Hay uso de servidor
 Hay uso de la can'dad de pe'ciones concurrentes
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

31.  “Odiarás todo lo que desconozcas”
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

32.  Reducen ampliamente las pe'ciones
 Permiten unir en un archivo todos (o varios)
gráficos del si'o web
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

33.  Son algo desconocidas.
 Sólo funcionan en Firefox, Chrome, Safari
 Internet Explorer soporta MTH
 El formato es data:mime;base64,datos
 <IMG ALT=”Red Star” SRC="data:image/
gif;base64,R0lGODlhDAAMALMLAPN8ffBiYvWWlvrKy/FvcPewsO9VVfajo
+w6O/zl5estLv/8/
AAAAAAAAAAAAAAAACH5BAEAAAsALAAAAAAMAAwAAAQzcElZyryTEHyT
UgknHd9xGV
+qKsYirKkwDYiKDBia12H1KBLQRFIJAIKywRgmhwAIlEEADs=">
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

34.  Reduce las pe'ciones
 Combinar en un sólo archivo .js todos los scripts
de JavaScript que se incluyan en la página.
 Se puede hacer manualmente o dinámicamente
en el servidor, ejemplos:
<script type=“text/javascript” src=“todos.php”></script>
<script type=“text/javascript” src=“prototype.js,minify.js”></script>
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

35.  U'lizar un sólo archivo CSS para todo el si'o
 Home Page, secciones internas, etc.
 Si 'enen diseños dis'ntos, separarlos por id de
body
 <body id=“no'cias”>
 #no'cias a { }
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

36.  Es uno de los 'ps más extraños
 Que pasa cuando el browser se encuentra con un
tag SCRIPT externo?
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

37.  Ofuscación
 Google Closure Compiler
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

38.  Medir, medir
 Mantenerse actualizado
 Mantener versión desarrollo y producción
 Denle importancia, tanto como a:
 SEO
 Usabilidad
 Seguridad
Lic. Maximiliano Firtman - @firt
Sitios web de alto rendimiento

39. Consultas
Gracias!!
Lic. Maximiliano Firtman
@firt – firt.mobi
Foto de freefoto.com Lima, 20/12/2009