Mejorando el                          rendimiento de                         aplicaciones web                          Edw...
Agenda                     •   Meta                     •   Personajes famosos                     •   Mejores Practicas  ...
Agenda                     • Meta                     • Personajes famosos                     • Mejores Practicas        ...
MetaHacer que nuestra aplicación carge rápido desde la primeravisita, o al menos hacer parecer que lo hace, lo principal e...
Agenda                     • Meta                     • Personajes famosos                     • Mejores Practicas        ...
"More bandwidth doesnt matter (much)"                             Mike Belshe, inventor of SPDYFriday, November 2, 12
Friday, November 2, 12
"If we cant make the bits travel faster, then                      the only way to improve the situation is to            ...
http://www.businessinsider.com/the-future-of-mobile-deck-2012-3?op=1Friday, November 2, 12
"Cache is King"                         Steve SoudersFriday, November 2, 12
http://www.pcworld.idg.com.au/speedtest/Friday, November 2, 12
Agenda                     • Meta                     • Personajes famosos                     • Mejores Practicas        ...
Mejores Prácticas  Steve Souders y un equipo de expertos trabajando en   Yahoo identificaron/estandarizaron algunas mejores...
Mejores Prácticas                     • Minimizar peticiones HTTP                     • Usar un Content Delivery Network  ...
Mejores Prácticas                     • Incluir los scripts hasta el final                     • Aprovechar el cache de los...
Mejores Prácticas                     • Ajax Cacheables                     • Precarga de componentes                     ...
Mejores PrácticasFriday, November 2, 12
Agenda                     • Meta                     • Personajes famosos                     • Mejores Practicas        ...
Lidiando con la Red                               Servidor DNSFriday, November 2, 12
Lidiando con la Red                     • Menos de 6 dominios diferentes                      • Evitar hacer redirecciones...
Lidiando con la Red                                CookiesFriday, November 2, 12
Lidiando con la RedFriday, November 2, 12
Lidiando con la RedFriday, November 2, 12
Lidiando con la Red                          Imagenes, javascripts, stylesheetsFriday, November 2, 12
Lidiando con la RedFriday, November 2, 12
Lidiando con la RedFriday, November 2, 12
Lidiando con la Red                                  CSS SpritesFriday, November 2, 12
Lidiando con la Red                             Minimizar scripts/cssFriday, November 2, 12
Agenda                     • Meta                     • Personajes famosos                     • Mejores Practicas        ...
Backend, cache is king            Mandar a cache lo más posible para evitar costosas                              operacio...
Backend, Counter Caches                     • product.product_images.count vs                         product.product_imag...
Backend, Counter Caches                     • product.inventory_units.on_hand.count vs                     • product.inven...
Backend, Counter Caches                         class Product < ActiveRecord::Base                           has_many :inv...
Backend - Busquedas             Usen tecnología diseñada para búsquedas en textoFriday, November 2, 12
Backend - Solr                     • Usar solr para hacer busquedas de texto y                         filtrado de resultad...
Backend - Solr    >> Benchmark.ms { Product.where(name like ?, %Army%) }    => 337.901361    >> Benchmark.ms { Product.sea...
Backend - Cache is king                       Cacheen todas las operaciones costosas                    vistas, queries, l...
Backend - Cache is kingFriday, November 2, 12
Backend-Fragment Cache          Benchmark.ms do           Super.cache.fetch(count, :expires_in => 1.minute) do            ...
Backend - Super Cache                     module Super                      class Cache                        def self.fe...
Backend - Trabajar Inteligente                              Hagan uso de queues(colas)Friday, November 2, 12
Backend - Asynchronously                     • Manden todo lo no necesario a background                      • Envio email...
Backend - CDN    Configuren su aplicación para tomar ventaja de un CDNFriday, November 2, 12
Backend - CDN  Mal:  asset_host = “www.superdominio.mx”Friday, November 2, 12
Backend - CDN  Bien:  id = rand(4)  asset_host = “http://assets#{id}.superdominio.mx”Friday, November 2, 12
Backend - CDNFriday, November 2, 12
Backend - CDN  Mucho Mejor:  id = nombre_imagen.to_s.to_i%4  asset_host = “http://assets#{id}.superdominio.mx”Friday, Nove...
Backend                         Service Oriented DesignFriday, November 2, 12
Backend - SODFriday, November 2, 12
Backend - SOD                     • Peticiones en paralelo                     • Multiples aplicaciones que sirven servici...
Backend                         Midan, Registren, Sigan TODOFriday, November 2, 12
Backend - MidiendoFriday, November 2, 12
Backend - MidiendoFriday, November 2, 12
Backend - MidiendoFriday, November 2, 12
Backend - MidiendoFriday, November 2, 12
Agenda                     • Meta                     • Personajes famosos                     • Mejores Practicas        ...
Frontend - Caching                         Full Page Caching + PersonalizationFriday, November 2, 12
Frontend - Preloading                     • Incondicional                     • Condicional                     • Anticipa...
Frontend - Asynchronously    var se = $.create(“<script>”,         {“src”: "http://cdn0.super-cdn.com/scripts/a.js"}      ...
Frontend - Lazy LoadCargar solo lo necesario, descagando recursos ‘on demand’Friday, November 2, 12
Frontend - Lazy Load                              jQuery Lazy LoadFriday, November 2, 12
Frontend         La página principal tiene que ser la página más rápidaFriday, November 2, 12
Frontend - Homepage                     • Codigo HTML minimo necesario,                         incluyendo css’s y javascr...
Frontend - Push+Ajax                     • Descargar estaticos una sola vez                     • Reemplazar el contenido ...
Frontend - Push+AjaxFriday, November 2, 12
Frontend - Skeleton                     • Head                      • title                      • javascript top.js      ...
Frontend - SpritesFriday, November 2, 12
Frontend - Sprites                               CompassFriday, November 2, 12
Frontend                          ImágenesFriday, November 2, 12
Frontend - Imagenes                     • Nunca redimensionar con html                     • Especificar el tamaño con codi...
Frontend - Javascripts                     • Combinar archivos                     • Eliminar duplicidades                ...
Backend/Frontend                     • Templating                      • backend                      • frontend          ...
Frontend - Mejoras                     • Entender el funcionamiento de                      • HTML Parser                 ...
Agenda                     •   Meta                     •   Personajes famosos                     •   Mejores Practicas  ...
Servidor Web                     • Expiration Header                      • ‘never expire’ para imagenes                  ...
Servidor Web                     • Gzip                      • Javascripts                      • Stylesheets             ...
Servidor Web                           SSL, una pesadillaFriday, November 2, 12
Servidor Web                                      SSL, su peor pesadilla                         SSL Cypher               ...
Servidor web                         Logeen Todo y haganlo “grep’eable”! 	       log_format main $remote_addr - $remote_us...
Agenda                     • Meta                     • Personajes famosos                     • Mejores Practicas        ...
Base de Datos                          Multiples ParticionesFriday, November 2, 12
Base de Datos                     • MySQL? Percona binariesFriday, November 2, 12
Base de Datos                         Tablas Temporales... cuidado!                               tmp_table_sizeFriday, No...
Base de Datos                         mysql_query_cache, del demonio?                         Usen otro cache en frente de...
Base de Datos                  innodb_buffer_pool_size   El más importante, generalmente va al 70% del total de la        ...
Base de Datos                         innodb_thread_concurrency                            numero de cores * 2Friday, Nove...
Base de Datos                         Indices, evitar índices duplicados                             mysql_slow_query_logF...
Base de Datos                          Cuiden los UPDATES       Nadie pone atención en ellos, pero son los principales    ...
Base de Datos                     • Migraciones                      • Agregar Columna                      • Remover Colu...
Parte Humana                     • Siempre midan los cambios                     • Paranoia es una cualidad muy codiciada ...
Gracias!                     Preguntas?                                    Edwin Cruz - Crowd Interactive                 ...
Upcoming SlideShare
Loading in...5
×

FSL Vallarta, mejorando el rendimiento de las aplicaciones web

1,678

Published on

Tips de implementación de las mejores prácticas para desarrollar aplicaciones web de alto rendimiento

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,678
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

FSL Vallarta, mejorando el rendimiento de las aplicaciones web

  1. 1. Mejorando el rendimiento de aplicaciones web Edwin Cruz - Crowd Interactive @softr8 Festival Software Libre Vallarta 2012Friday, November 2, 12
  2. 2. Agenda • Meta • Personajes famosos • Mejores Practicas • Lidiando con la Red • Lidiando con la aplicación • backend • frontend • Servidor Web • Servidor de base de datosFriday, November 2, 12
  3. 3. Agenda • Meta • Personajes famosos • Mejores Practicas • Lidiando con la Red • Lidiando con la aplicación • backend • frontend • Servidor Web • Servidor de base de datosFriday, November 2, 12
  4. 4. MetaHacer que nuestra aplicación carge rápido desde la primeravisita, o al menos hacer parecer que lo hace, lo principal es la experiencia del usuario.Friday, November 2, 12
  5. 5. Agenda • Meta • Personajes famosos • Mejores Practicas • Lidiando con la Red • Lidiando con la aplicación • backend • frontend • Servidor Web • Servidor de base de datosFriday, November 2, 12
  6. 6. "More bandwidth doesnt matter (much)" Mike Belshe, inventor of SPDYFriday, November 2, 12
  7. 7. Friday, November 2, 12
  8. 8. "If we cant make the bits travel faster, then the only way to improve the situation is to move the bits closer." Ilya GrigorikFriday, November 2, 12
  9. 9. http://www.businessinsider.com/the-future-of-mobile-deck-2012-3?op=1Friday, November 2, 12
  10. 10. "Cache is King" Steve SoudersFriday, November 2, 12
  11. 11. http://www.pcworld.idg.com.au/speedtest/Friday, November 2, 12
  12. 12. Agenda • Meta • Personajes famosos • Mejores Practicas • Lidiando con la Red • Lidiando con la aplicación • backend • frontend • Servidor Web • Servidor de base de datosFriday, November 2, 12
  13. 13. Mejores Prácticas Steve Souders y un equipo de expertos trabajando en Yahoo identificaron/estandarizaron algunas mejoresprácticas para mejorar el rendimiento de aplicaciones web.Friday, November 2, 12
  14. 14. Mejores Prácticas • Minimizar peticiones HTTP • Usar un Content Delivery Network • Cache Control Headers • Gzip, comprimir los paquetes • Incluir los archivos CSS al principioFriday, November 2, 12
  15. 15. Mejores Prácticas • Incluir los scripts hasta el final • Aprovechar el cache de los navegadores • Hacer solo peticiones DNS muy necesarias • Minimizar archivos JS y CSS • Aprovechar E-TagsFriday, November 2, 12
  16. 16. Mejores Prácticas • Ajax Cacheables • Precarga de componentes • Dividir los componentes en dominios diferentes • Cookies pequeñas • Optimizar ImágenesFriday, November 2, 12
  17. 17. Mejores PrácticasFriday, November 2, 12
  18. 18. Agenda • Meta • Personajes famosos • Mejores Practicas • Lidiando con la Red • Lidiando con la aplicación • backend • frontend • Servidor Web • Servidor de base de datosFriday, November 2, 12
  19. 19. Lidiando con la Red Servidor DNSFriday, November 2, 12
  20. 20. Lidiando con la Red • Menos de 6 dominios diferentes • Evitar hacer redirecciones • 20-120 en resolver un dominio • 1 segundo para re intentar, explorer 30 • TTL muy a futuroFriday, November 2, 12
  21. 21. Lidiando con la Red CookiesFriday, November 2, 12
  22. 22. Lidiando con la RedFriday, November 2, 12
  23. 23. Lidiando con la RedFriday, November 2, 12
  24. 24. Lidiando con la Red Imagenes, javascripts, stylesheetsFriday, November 2, 12
  25. 25. Lidiando con la RedFriday, November 2, 12
  26. 26. Lidiando con la RedFriday, November 2, 12
  27. 27. Lidiando con la Red CSS SpritesFriday, November 2, 12
  28. 28. Lidiando con la Red Minimizar scripts/cssFriday, November 2, 12
  29. 29. Agenda • Meta • Personajes famosos • Mejores Practicas • Lidiando con la Red • Lidiando con la aplicación • backend • frontend • Servidor Web • Servidor de base de datosFriday, November 2, 12
  30. 30. Backend, cache is king Mandar a cache lo más posible para evitar costosas operaciones.Friday, November 2, 12
  31. 31. Backend, Counter Caches • product.product_images.count vs product.product_images_count • select count(1) from product_images where product_id = 1 • select * from products where id = 1Friday, November 2, 12
  32. 32. Backend, Counter Caches • product.inventory_units.on_hand.count vs • product.inventory_units_on_hand_countFriday, November 2, 12
  33. 33. Backend, Counter Caches class Product < ActiveRecord::Base has_many :inventory_units def update_counter_cache inventory_units_on_hand_count = inventory_units.on_hand.count save end end class InventoryUnit < ActiveRecord::Base after_save :update_counter_caches belongs_to :product scope :on_hand, where(state: ‘on_hand’) protected def update_counter_caches product.update_counter_cache end endFriday, November 2, 12
  34. 34. Backend - Busquedas Usen tecnología diseñada para búsquedas en textoFriday, November 2, 12
  35. 35. Backend - Solr • Usar solr para hacer busquedas de texto y filtrado de resultados • extremadamente poderoso y rápidoFriday, November 2, 12
  36. 36. Backend - Solr >> Benchmark.ms { Product.where(name like ?, %Army%) } => 337.901361 >> Benchmark.ms { Product.search { keywords Army } } => 119.201331Friday, November 2, 12
  37. 37. Backend - Cache is king Cacheen todas las operaciones costosas vistas, queries, llamadas API’s, contadores, etc!Friday, November 2, 12
  38. 38. Backend - Cache is kingFriday, November 2, 12
  39. 39. Backend-Fragment Cache Benchmark.ms do Super.cache.fetch(count, :expires_in => 1.minute) do Product.all(:conditions => [name like ?, %Army%]).count end end => 336.477508 Benchmark.ms do Super.cache.fetch(count, :expires_in => 1.minute) do Product.all(:conditions => [name like ?, %Army%]).count end end => 0.461155Friday, November 2, 12
  40. 40. Backend - Super Cache module Super class Cache def self.fetch(key, options, &block) if content = Memcached.get(key) content else content = yield() Memcached.add(key, content, options[:expires_in] ) content end end def exist?(key) !Memcached.get(key).blank? end end endFriday, November 2, 12
  41. 41. Backend - Trabajar Inteligente Hagan uso de queues(colas)Friday, November 2, 12
  42. 42. Backend - Asynchronously • Manden todo lo no necesario a background • Envio emails • Activaciones • Procesamiento imagenes • Tareas recurrentes • Notificaciones a otros serviciosFriday, November 2, 12
  43. 43. Backend - CDN Configuren su aplicación para tomar ventaja de un CDNFriday, November 2, 12
  44. 44. Backend - CDN Mal: asset_host = “www.superdominio.mx”Friday, November 2, 12
  45. 45. Backend - CDN Bien: id = rand(4) asset_host = “http://assets#{id}.superdominio.mx”Friday, November 2, 12
  46. 46. Backend - CDNFriday, November 2, 12
  47. 47. Backend - CDN Mucho Mejor: id = nombre_imagen.to_s.to_i%4 asset_host = “http://assets#{id}.superdominio.mx”Friday, November 2, 12
  48. 48. Backend Service Oriented DesignFriday, November 2, 12
  49. 49. Backend - SODFriday, November 2, 12
  50. 50. Backend - SOD • Peticiones en paralelo • Multiples aplicaciones que sirven servicios • pequeñas • desarrollo rápido(pruebas rapidas) • HTTP Cache • Tolerante a FallosFriday, November 2, 12
  51. 51. Backend Midan, Registren, Sigan TODOFriday, November 2, 12
  52. 52. Backend - MidiendoFriday, November 2, 12
  53. 53. Backend - MidiendoFriday, November 2, 12
  54. 54. Backend - MidiendoFriday, November 2, 12
  55. 55. Backend - MidiendoFriday, November 2, 12
  56. 56. Agenda • Meta • Personajes famosos • Mejores Practicas • Lidiando con la Red • Lidiando con la aplicación • backend • frontend • Servidor Web • Servidor de base de datosFriday, November 2, 12
  57. 57. Frontend - Caching Full Page Caching + PersonalizationFriday, November 2, 12
  58. 58. Frontend - Preloading • Incondicional • Condicional • AnticipadoFriday, November 2, 12
  59. 59. Frontend - Asynchronously var se = $.create(“<script>”, {“src”: "http://cdn0.super-cdn.com/scripts/a.js"} ); $(head)[0].appendChild(se);Friday, November 2, 12
  60. 60. Frontend - Lazy LoadCargar solo lo necesario, descagando recursos ‘on demand’Friday, November 2, 12
  61. 61. Frontend - Lazy Load jQuery Lazy LoadFriday, November 2, 12
  62. 62. Frontend La página principal tiene que ser la página más rápidaFriday, November 2, 12
  63. 63. Frontend - Homepage • Codigo HTML minimo necesario, incluyendo css’s y javascripts • Preloading de estáticos • Javascripts • CSS • Resolver nombresFriday, November 2, 12
  64. 64. Frontend - Push+Ajax • Descargar estaticos una sola vez • Reemplazar el contenido del contenedor con ajax • Elimina descargas de estaticos • No obstrusivoFriday, November 2, 12
  65. 65. Frontend - Push+AjaxFriday, November 2, 12
  66. 66. Frontend - Skeleton • Head • title • javascript top.js • stylesheet app.css • Body • container • javascripts bottom.jsFriday, November 2, 12
  67. 67. Frontend - SpritesFriday, November 2, 12
  68. 68. Frontend - Sprites CompassFriday, November 2, 12
  69. 69. Frontend ImágenesFriday, November 2, 12
  70. 70. Frontend - Imagenes • Nunca redimensionar con html • Especificar el tamaño con codigo html • Formatos correctos • PNG • JPEG • MultiRes • jQuery lazy loadFriday, November 2, 12
  71. 71. Frontend - Javascripts • Combinar archivos • Eliminar duplicidades • Lazy loading: modernizr.load, require.js • minimizar recursos • un solo archivo con todo • JSMin,YUI CompressorFriday, November 2, 12
  72. 72. Backend/Frontend • Templating • backend • frontend • hybrid (condicional)Friday, November 2, 12
  73. 73. Frontend - Mejoras • Entender el funcionamiento de • HTML Parser • HTML Renderer • Bloqueos • Re-RenderingFriday, November 2, 12
  74. 74. Agenda • Meta • Personajes famosos • Mejores Practicas • Lidiando con la Red • Lidiando con la aplicación • backend • frontend • Servidor Web • Servidor de base de datosFriday, November 2, 12
  75. 75. Servidor Web • Expiration Header • ‘never expire’ para imagenes • ‘Expire after’ para javascripts y css’s • gzipFriday, November 2, 12
  76. 76. Servidor Web • Gzip • Javascripts • Stylesheets • HTML • JSON • NUNCA! imagenes o binariosFriday, November 2, 12
  77. 77. Servidor Web SSL, una pesadillaFriday, November 2, 12
  78. 78. Servidor Web SSL, su peor pesadilla SSL Cypher www.google.com: RC4-SHA, key size 1024 www.facebook.com: RC4-SHA, key size 1024 www.linkedin.com: RC4-MD5, key size 2048 www.twitter.com: RC4-SHA, key size 2048 Nosotros: DHE-RSA-AES256-SHA: key size 2048 <= FAIL, llegamos a limiteFriday, November 2, 12
  79. 79. Servidor web Logeen Todo y haganlo “grep’eable”! log_format main $remote_addr - $remote_user [$time_local] $request "$status" $body_bytes_sent "$http_referer" "$http_user_agent" "$gzip_ratio" "$http_x_forwarded_for" upstream_addr $upstream_addr upstream_response_time $upstream_response_time request_time $request_time $cookie_Domain_Session;174.254.55.34 - - [31/Oct/2012:23:17:27 +0000] GET /stylesheets/compiled/mobile.css?1351550028 HTTP/1.1 "200" 21218"https://www.dominio.com/customers/accounts" "www.dominio.com" "Mozilla/5.0 (iPhone; CPU iPhone OS 6_0 like Mac OSX) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25" "4.84" "-" upstream_addr -upstream_response_time - request_time 0.333 - aabcdsd4335f4f46117.120.16.138 - - [31/Oct/2012:23:17:27 +0000] GET /help/my-measurements-faq HTTP/1.0 "200" 51489 "http://www.dominio.com/help/fit-and-form-details" "www.dominio.com" "Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1;Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; InfoPath.1)" "-" "203.144.29.5, 10.37.58.201"upstream_addr 127.0.0.1:8100 upstream_response_time 0.356 request_time 0.356 - aabcdsd4335f4f46Friday, November 2, 12
  80. 80. Agenda • Meta • Personajes famosos • Mejores Practicas • Lidiando con la Red • Lidiando con la aplicación • backend • frontend • Servidor Web • Servidor de base de datosFriday, November 2, 12
  81. 81. Base de Datos Multiples ParticionesFriday, November 2, 12
  82. 82. Base de Datos • MySQL? Percona binariesFriday, November 2, 12
  83. 83. Base de Datos Tablas Temporales... cuidado! tmp_table_sizeFriday, November 2, 12
  84. 84. Base de Datos mysql_query_cache, del demonio? Usen otro cache en frente de mysqlFriday, November 2, 12
  85. 85. Base de Datos innodb_buffer_pool_size El más importante, generalmente va al 70% del total de la memoriaFriday, November 2, 12
  86. 86. Base de Datos innodb_thread_concurrency numero de cores * 2Friday, November 2, 12
  87. 87. Base de Datos Indices, evitar índices duplicados mysql_slow_query_logFriday, November 2, 12
  88. 88. Base de Datos Cuiden los UPDATES Nadie pone atención en ellos, pero son los principales causantes de bloqueo de tablasFriday, November 2, 12
  89. 89. Base de Datos • Migraciones • Agregar Columna • Remover Columna • Agregar Tabla • Remover TablaFriday, November 2, 12
  90. 90. Parte Humana • Siempre midan los cambios • Paranoia es una cualidad muy codiciada • Aprendan a manejar el pánico • No tengan miedo de mandar cambios • Siempre, siempre tengan un plan de respaldoFriday, November 2, 12
  91. 91. Gracias! Preguntas? Edwin Cruz - Crowd Interactive @softr8Friday, November 2, 12
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×