PHPBarcelona Conference - Optimización aplicaciones PHP - Client side

8,755 views
8,700 views

Published on

La irrupción de la web 2.0 ha cedido todo el protagonismo del desarrollo web a las de tecnologías de cliente: javascript, css, peticiones http en segundo plano... y no ha hecho más que intensificar su uso. En esta ponencia veremos herramientas para detectar cuellos de botella en el navegador y algunos trucos para optimizar el uso de estos recursos y mejorar drásticamente la carga de nuestras páginas.

Published in: Technology
0 Comments
14 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
8,755
On SlideShare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
360
Comments
0
Likes
14
Embeds 0
No embeds

No notes for slide

PHPBarcelona Conference - Optimización aplicaciones PHP - Client side

  1. 1. Optimización de aplicaciones PHP: Client side Optimización de aplicaciones PHP Client side Manuel Aguilar Desarrollo web & sistemas maguilar@harecoded.com
  2. 2. Optimización de aplicaciones PHP: Client side Manuel Aguilar Desarrollo web & sistemas Atrapalo.com & Plastiasite ‣Un Amstrad CPC 464 es el culpable de todo... ‣11 años de experiencia en desarrollo web y sistemas. ‣En la actualidad: Atrapalo.com: PHP, front end e internacionalización. Plastiasite: FreeBSD, PHP, Zope/Plone loving. 3viajesaldia.com: escritos y viajes 3.0
  3. 3. Optimización de aplicaciones PHP: Client side Puntos que vamos a tratar ‣ Porqué es tan importante optimizar en el lado cliente... La regla del 20/80. ‣ Herramientas de detección de cuellos de botella: Firebug, Yslow. ‣ 10 optimizaciones que harán volar nuestros sitios web. ‣ Ruegos y preguntas.
  4. 4. Optimización de aplicaciones PHP: Client side http://www.dominio.com www1.dominio.com images.dominio.com INTERNET
  5. 5. Optimización de aplicaciones PHP: Client side http://www.dominio.com <?xml v <ref: <gr HTML www1.dominio.com images.dominio.com INTERNET
  6. 6. Optimización de aplicaciones PHP: Client side http://www.dominio.com <?xml v <ref: <gr HTML www1.dominio.com <?xml v <?xml v <?xml v <ref: <ref: <ref: <gr <gr <gr xml js css images.dominio.com jpg gif INTERNET flash
  7. 7. Optimización de aplicaciones PHP: Client side http://www.dominio.com <?xml v <ref: <gr HTML www1.dominio.com <?xml v <?xml v <?xml v <ref: <ref: <ref: <gr <gr <gr xml js css images.dominio.com jpg gif INTERNET flash
  8. 8. Optimización de aplicaciones PHP: Client side Carga de páginas web: La regla del 20/80 ‣ Un estudio de YAHOO! nos dice que del tiempo total de carga de la Home de los sitios más populares de Internet: Una media del 20% corresponde al lado servidor (entregar un index.html) El 80% restante corresponde al lado cliente (carga de js, css, img, ajax, flash, etc.)
  9. 9. Optimización de aplicaciones PHP: Client side Carga de páginas web: La regla del 20/80 ‣ Un estudio de YAHOO! nos dice que del tiempo total de carga de la Home de los sitios más populares de Internet: Una media del 20% corresponde al lado servidor (entregar un index.html) El 80% restante corresponde al lado cliente (carga de js, css, img, ajax, flash, etc.) ‣ Por tanto, las optimizaciones que realicemos sobre el lado cliente tendrán impacto sobre un 80% del tiempo de carga.
  10. 10. Optimización de aplicaciones PHP: Client side
  11. 11. Optimización de aplicaciones PHP: Client side 20%
  12. 12. Optimización de aplicaciones PHP: Client side
  13. 13. Optimización de aplicaciones PHP: Client side 80%
  14. 14. Optimización de aplicaciones PHP: Client side
  15. 15. Optimización de aplicaciones PHP: Client side Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  16. 16. Optimización de aplicaciones PHP: Client side = servidor Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  17. 17. Optimización de aplicaciones PHP: Client side Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  18. 18. Optimización de aplicaciones PHP: Client side = cliente Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  19. 19. Optimización de aplicaciones PHP: Client side Tiempo bajar HTML Tiempo restante Yahoo! 10% 90% MySpace 9% 91% MSN 5% 95% ebay 5% 95% Amazon 38% 62% YouTube 9% 91% ElPais 15% 85% Atrápalo 10% 90% Barrapunto 18% 82% Terra 4% 96%
  20. 20. Optimización de aplicaciones PHP: Client side
  21. 21. Optimización de aplicaciones PHP: Client side
  22. 22. Optimización de aplicaciones PHP: Client side
  23. 23. Optimización de aplicaciones PHP: Client side Optimización en el cliente: no todo es reducir tiempos...
  24. 24. Optimización de aplicaciones PHP: Client side Optimización en el cliente: no todo es reducir tiempos... Lo que importa es la percepción de velocidad del usuario.
  25. 25. Optimización de aplicaciones PHP: Client side Optimización en el cliente: no todo es reducir tiempos... Lo que importa es la percepción de velocidad del usuario. ‣ Los elementos aparecen progresivamente, siempre hay cambios. ‣ Dejamos para el final de la carga elementos que no requieren interacción.
  26. 26. Optimización de aplicaciones PHP: Client side Manos a la obra... ¿por dónde empezamos? ‣ Mi web tarda en cargar más de la cuenta, efectivamente, pero... ¿cuáles son los motivos?
  27. 27. Optimización de aplicaciones PHP: Client side Manos a la obra... ¿por dónde empezamos? ‣ Mi web tarda en cargar más de la cuenta, efectivamente, pero... ¿cuáles son los motivos? ‣ Debemos auditar la carga de la página, y detectar los cuellos de botella.
  28. 28. Optimización de aplicaciones PHP: Client side Herramientas para detectar cuellos de botella en la carga de páginas Mozilla Firefox 2 & 3 + Firebug (extensión Firefox) + YSlow (extensión para Firebug)
  29. 29. Optimización de aplicaciones PHP: Client side Hay un antes y un después de Firebug en el mundo del desarrollo web... 1994 2000 2008
  30. 30. Optimización de aplicaciones PHP: Client side Herramientas: ‣ Plugin de Firefox que integra muchas herramientas para el desarrollador web, de gran utilidad. Por ejemplo: Nos muestra la actividad de red: qué carga nuestra página, en qué orden y con qué tiempos. Inspecciona y edita el HTML en vivo. Consola de javascript: evaluación y debug.
  31. 31. Optimización de aplicaciones PHP: Client side
  32. 32. Optimización de aplicaciones PHP: Client side
  33. 33. Optimización de aplicaciones PHP: Client side Ahora ya sí... ¡a optimizar!
  34. 34. Optimización de aplicaciones PHP: Client side Optimización: caché expires ‣ Según Yahoo!, el 75% de las visitas a sus páginas vienen con elementos ya cacheados. ‣ Para el resto de los mortales, entre el 40-60% de las visitas vienen con caché. No es una cifra nada despreciable... ‣ Si aumentamos el tiempo de expiración de elementos que no cambian con frecuencia: imágenes, javascripts, etc. conseguiremos que los navegadores guarden sus cachés por más tiempo. ‣ Cuando queramos forzar el refresco de un elemento, le ponemos de sufijo un id de versión, ej: public.js?v=20081212 ‣ Otra opción es poner de nombre al fichero el md5 de su contenido: main-811a8ba4fbabed723fcd9c165b6f5d2c.css
  35. 35. Optimización de aplicaciones PHP: Client side http://www.dominio.com <?xml v <ref: <gr HTML www1.dominio.com <?xml v <?xml v <?xml v <ref: <ref: <ref: <gr <gr <gr xml js css images.dominio.com jpg gif INTERNET flash
  36. 36. Optimización de aplicaciones PHP: Client side En Apache:
  37. 37. Optimización de aplicaciones PHP: Client side En Apache: ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpg A2592000 ExpiresByType image/jpeg A2592000
  38. 38. Optimización de aplicaciones PHP: Client side Cómo mola la Web 2.0, pero... ‣ Gran parte de la programación pasa al lado cliente: miles de líneas de javascript, css. Enviamos mucha más información... ¡a veces más de 500kb en una página! ‣ Las librerías javascript hacen de todo, pero valen su peso en... Kb. El ADSL es nuestro amigo, pero no hay que abusar. ‣ Mashups: integramos varias herramientas de terceros vía ajax, la latencia de red se convierte en crítica.
  39. 39. Optimización de aplicaciones PHP: Client side Librerías javascript más populares Librería Peso* Peso min. Peso min+gzip prototype/script.aculo.us 280kb jquery (con plugins) 200kb Yahoo! YUI +400kb * Sin contar css’s, imágenes, librerías auxiliares, etc.
  40. 40. Optimización de aplicaciones PHP: Client side Librerías javascript más populares Librería Peso* Peso min. Peso min+gzip prototype/script.aculo.us 280kb 148kb jquery (con plugins) 200kb 105kb Yahoo! YUI +400kb 320kb * Sin contar css’s, imágenes, librerías auxiliares, etc.
  41. 41. Optimización de aplicaciones PHP: Client side Librerías javascript más populares Librería Peso* Peso min. Peso min+gzip prototype/script.aculo.us 280kb 148kb 52kb jquery (con plugins) 200kb 105kb 36kb Yahoo! YUI +400kb 320kb 83kb * Sin contar css’s, imágenes, librerías auxiliares, etc.
  42. 42. Optimización de aplicaciones PHP: Client side Optimización: extraer js y css a ficheros externos ‣ Porque los ficheros externos son fácilmente cacheables ‣ Una modicación en una propiedad css no ha de provocar que el usuario baje de nuevo todo el html (con css y js empotrado) ‣ Lo mismo para las imágenes: mejor en ficheros externos, cacheadas ‣ Podremos optimizar cómo servimos contenidos. Ejemplo: por Apache (html) y Lighttpd (js, css, imágenes).
  43. 43. Optimización de aplicaciones PHP: Client side Optimización: Combinar ficheros para reducir peticiones Descargas en paralelo ‣ Combinando js y css en uno o dos ficheros, ahorramos muchísimas conexiones y tiempos de carga. ‣ Los navegadores están configurados para aceptar 2 peticiones simultáneas desde un mismo dominio: cuantas menos peticiones, más rápido descarga toda la página.
  44. 44. Optimización de aplicaciones PHP: Client side Optimización: usar subdominios para aumentar descargas en paralelo ‣ Usar subdominios del tipo: static.dominio.com, images.dominio.com, etc. para 2 en paralelo aumentar el número de descargas en paralelo. 4 en paralelo 8 en paralelo
  45. 45. Optimización de aplicaciones PHP: Client side Optimización: compactar javascript ‣ Consiste en reducir el tamaño de los ficheros javascript quitando espacios, comentarios, a veces reduciendo nombre de variables, etc. ‣ La reducción es de hasta un 50%. ‣ La convención es llamar al nuevo fichero: home.js => home-min.js ‣ Inconveniente. Tenemos que mantener un fichero más bajo control de versiones, y programar script que genere min cada vez que cambia el js. ‣ Minimizadores más famosos: • JSMin (http://javascript.crockford.com/jsmin.html) • YUI Compressor (http://www.julienlecomte.net/blog/) • Packer (http://dean.edwards.name/packer/)
  46. 46. Optimización de aplicaciones PHP: Client side
  47. 47. Optimización de aplicaciones PHP: Client side
  48. 48. Optimización de aplicaciones PHP: Client side
  49. 49. Optimización de aplicaciones PHP: Client side
  50. 50. Optimización de aplicaciones PHP: Client side -28%
  51. 51. Optimización de aplicaciones PHP: Client side javascript sin minimizar
  52. 52. Optimización de aplicaciones PHP: Client side javascript minimizado
  53. 53. Optimización de aplicaciones PHP: Client side Optimización: compresión gzip ‣ ¡Comprime js, css en más de un 80%! ‣ Forma parte del protocolo HTTP/1.1 que implementan todos los navegadores modernos. ‣ Apache 1.3 => mod_gzip, Apache 2.x => mod_deflate ‣ Se puede combinar con un minimizador de javascript (#3) para reducir el tamaño del fichero en más de un 90%. ‣ La mayoría de los hostings tienen configurado gzip para html, pero es conveniente comprimir también css y js. Incluso respuestas de XML y JSON. ‣ No comprimir imágenes (ya lo están).
  54. 54. Optimización de aplicaciones PHP: Client side 256 kb
  55. 55. Optimización de aplicaciones PHP: Client side 256 kb
  56. 56. Optimización de aplicaciones PHP: Client side 256 kb 148 kb
  57. 57. Optimización de aplicaciones PHP: Client side 256 kb 148 kb
  58. 58. Optimización de aplicaciones PHP: Client side 256 kb 148 kb (gzip) 52kb
  59. 59. Optimización de aplicaciones PHP: Client side Optimización: Una imagen que contenga muchos sprites ‣ Cada imagen (icono, botón, rollover, banderas, backgrounds), por muy pequeña que sea, cuenta como petición http request. ‣ Es fácil que tengamos decenas de pequeñas imágenes en una página: las empotradas en los css también cuentan. ‣ Cargamos una sola imagen agrupando el máximo de sprites que vamos a usar, y mediante css vamos posicionando cada uno en su lugar. ‣ La imagen resultante es menor de tamaño que 20 imágenes individuales. ‣ Pero sobre todo, ahorramos http requests.
  60. 60. Optimización de aplicaciones PHP: Client side
  61. 61. Optimización de aplicaciones PHP: Client side Optimización: mover css al <head> ‣ Mover los css al <head> aumenta la percepción de carga rápida de la página, ya que los elementos se renderizan progresivamente. ‣ Internet Explorer no renderiza nada hasta que tiene todos los CSS de la página. Si colocamos uno al final, hay que esperar a que cargue el resto de la página y lo lea. ‣ Lo que comentamos de la percepción: si el usuario ve que se van renderizando cosas en pantalla, la percepción de velocidad es positiva.
  62. 62. Optimización de aplicaciones PHP: Client side Optimización: mover scripts js al final de la página ‣ Mover los js al final de la página, si es posible. En HTTP/1.1, hasta que no se acaba de leer un js no se sigue con el resto de la carga. ‣ A veces no nos es posible mover todos los js al final (document.write), pero sí los más pesados (librerías). ‣ En todo caso, podemos evaluar de incluirlos a partir de un punto de la carga que sepamos que el usuario ya ha visto cambios en pantalla, y cargarlos mientras éste está “distraido”. ‣ Para mayor control sobre la carga, colocar chivatos en el html que nos indican que ya podemos cargar el js.
  63. 63. Optimización de aplicaciones PHP: Client side html: js:
  64. 64. Optimización de aplicaciones PHP: Client side html: js:
  65. 65. Optimización de aplicaciones PHP: Client side html: js:
  66. 66. Optimización de aplicaciones PHP: Client side html: js:
  67. 67. Optimización de aplicaciones PHP: Client side Optimización: Quitar js y css duplicados ‣ Al montar un html a partir de varios componentes de PHP, en equipos de varios developers, es común que algún js/css lo acabemos llamando varias veces en el renderizado de una página. ‣ Esto penaliza a nivel de peticiones (Firefox) pero también porque hay que evaluar varias veces el mismo código. ‣ Podemos diseñar un pequeño sistema centralizado de inclusión de javascripts y css, tanto en PHP como en javascript.
  68. 68. Optimización de aplicaciones PHP: Client side
  69. 69. Optimización de aplicaciones PHP: Client side Herramientas: YSlow ‣ Extensión de Firebug desarrollada por Yahoo! ‣ Audita la carga de una página web, y le pone notas en función de 14 reglas de optimización reconocidas. ‣ Nos muestra explicaciones del porqué de las notas conseguidas y valiosos enlaces a más teoría al respecto. ‣ Muestra estadísticas de uso de cache y componentes en nuestra página, nos ayuda a contextualizar.
  70. 70. Optimización de aplicaciones PHP: Client side
  71. 71. Optimización de aplicaciones PHP: Client side
  72. 72. Optimización de aplicaciones PHP: Client side
  73. 73. Optimización de aplicaciones PHP: Client side
  74. 74. Optimización de aplicaciones PHP: Client side Conclusiones ‣ No hay porqué seguir todas las optimizaciones, ni en un orden establecido. Implementar progresivamente. ‣ Reducir peticiones http request = mayor velocidad de carga ‣ caché de navegador agresiva ‣ agrupación de elementos (js, css, imágenes) ‣ Comprimir salida con gzip (excepto imágenes). Además, minimizar ficheros javascript. ‣ Concentrarse en la parte de la página que ve primero el usuario: renderizarla lo antes posible. ‣ Hacer la carga de las páginas progresivas, siempre han de verse cambios.
  75. 75. Optimización de aplicaciones PHP: Client side Enlaces de interés - http://getfirebug.com - http://developer.yahoo.com/performance/rules.html - http://yuiblog.com/blog/2006/11/28/performance-research-part-1/ - http://yuiblog.com/blog/2006/11/28/performance-research-part-2/ - http://yuiblog.com/blog/2006/11/28/performance-research-part-3/ - http://yuiblog.com/blog/2006/11/28/performance-research-part-4/ - http://www.julienlecomte.net/blog/2007/08/13/ - http://httpd.apache.org/docs/2.0/mod/mod_deflate.html - http://jeremy.zawodny.com/blog/archives/009272.html - http://www.vladville.com/using-apache-mod_expires-for-faster-ajax-sites - http://www.julienlecomte.net/blog/2007/08/11/ - http://alistapart.com/articles/sprites
  76. 76. Optimización de aplicaciones PHP: Client side ¡Gracias! Esta presentación y más cosas las tienes en: http://www.phpbarcelona.org Manuel Aguilar Desarrollo web & sistemas maguilar@harecoded.com Patrocinadores
  77. 77. Optimización de aplicaciones PHP: Client side ¡Gracias! Esta presentación y más cosas las tienes en: http://www.phpbarcelona.org Manuel Aguilar Desarrollo web & sistemas maguilar@harecoded.com Patrocinadores

×