Your SlideShare is downloading. ×
FSL Vallarta, mejorando el rendimiento de las aplicaciones web
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

FSL Vallarta, mejorando el rendimiento de las aplicaciones web

1,651
views

Published on

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

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,651
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Mejorando el rendimiento de aplicaciones web Edwin Cruz - Crowd Interactive @softr8 Festival Software Libre Vallarta 2012Friday, November 2, 12
  • 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. 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. 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. 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. "More bandwidth doesnt matter (much)" Mike Belshe, inventor of SPDYFriday, November 2, 12
  • 7. Friday, November 2, 12
  • 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. http://www.businessinsider.com/the-future-of-mobile-deck-2012-3?op=1Friday, November 2, 12
  • 10. "Cache is King" Steve SoudersFriday, November 2, 12
  • 11. http://www.pcworld.idg.com.au/speedtest/Friday, November 2, 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. 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. 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. 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. Mejores Prácticas • Ajax Cacheables • Precarga de componentes • Dividir los componentes en dominios diferentes • Cookies pequeñas • Optimizar ImágenesFriday, November 2, 12
  • 17. Mejores PrácticasFriday, November 2, 12
  • 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. Lidiando con la Red Servidor DNSFriday, November 2, 12
  • 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. Lidiando con la Red CookiesFriday, November 2, 12
  • 22. Lidiando con la RedFriday, November 2, 12
  • 23. Lidiando con la RedFriday, November 2, 12
  • 24. Lidiando con la Red Imagenes, javascripts, stylesheetsFriday, November 2, 12
  • 25. Lidiando con la RedFriday, November 2, 12
  • 26. Lidiando con la RedFriday, November 2, 12
  • 27. Lidiando con la Red CSS SpritesFriday, November 2, 12
  • 28. Lidiando con la Red Minimizar scripts/cssFriday, November 2, 12
  • 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. Backend, cache is king Mandar a cache lo más posible para evitar costosas operaciones.Friday, November 2, 12
  • 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. Backend, Counter Caches • product.inventory_units.on_hand.count vs • product.inventory_units_on_hand_countFriday, November 2, 12
  • 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. Backend - Busquedas Usen tecnología diseñada para búsquedas en textoFriday, November 2, 12
  • 35. Backend - Solr • Usar solr para hacer busquedas de texto y filtrado de resultados • extremadamente poderoso y rápidoFriday, November 2, 12
  • 36. Backend - Solr >> Benchmark.ms { Product.where(name like ?, %Army%) } => 337.901361 >> Benchmark.ms { Product.search { keywords Army } } => 119.201331Friday, November 2, 12
  • 37. Backend - Cache is king Cacheen todas las operaciones costosas vistas, queries, llamadas API’s, contadores, etc!Friday, November 2, 12
  • 38. Backend - Cache is kingFriday, November 2, 12
  • 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. 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. Backend - Trabajar Inteligente Hagan uso de queues(colas)Friday, November 2, 12
  • 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. Backend - CDN Configuren su aplicación para tomar ventaja de un CDNFriday, November 2, 12
  • 44. Backend - CDN Mal: asset_host = “www.superdominio.mx”Friday, November 2, 12
  • 45. Backend - CDN Bien: id = rand(4) asset_host = “http://assets#{id}.superdominio.mx”Friday, November 2, 12
  • 46. Backend - CDNFriday, November 2, 12
  • 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. Backend Service Oriented DesignFriday, November 2, 12
  • 49. Backend - SODFriday, November 2, 12
  • 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. Backend Midan, Registren, Sigan TODOFriday, November 2, 12
  • 52. Backend - MidiendoFriday, November 2, 12
  • 53. Backend - MidiendoFriday, November 2, 12
  • 54. Backend - MidiendoFriday, November 2, 12
  • 55. Backend - MidiendoFriday, November 2, 12
  • 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. Frontend - Caching Full Page Caching + PersonalizationFriday, November 2, 12
  • 58. Frontend - Preloading • Incondicional • Condicional • AnticipadoFriday, November 2, 12
  • 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. Frontend - Lazy LoadCargar solo lo necesario, descagando recursos ‘on demand’Friday, November 2, 12
  • 61. Frontend - Lazy Load jQuery Lazy LoadFriday, November 2, 12
  • 62. Frontend La página principal tiene que ser la página más rápidaFriday, November 2, 12
  • 63. Frontend - Homepage • Codigo HTML minimo necesario, incluyendo css’s y javascripts • Preloading de estáticos • Javascripts • CSS • Resolver nombresFriday, November 2, 12
  • 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. Frontend - Push+AjaxFriday, November 2, 12
  • 66. Frontend - Skeleton • Head • title • javascript top.js • stylesheet app.css • Body • container • javascripts bottom.jsFriday, November 2, 12
  • 67. Frontend - SpritesFriday, November 2, 12
  • 68. Frontend - Sprites CompassFriday, November 2, 12
  • 69. Frontend ImágenesFriday, November 2, 12
  • 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. 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. Backend/Frontend • Templating • backend • frontend • hybrid (condicional)Friday, November 2, 12
  • 73. Frontend - Mejoras • Entender el funcionamiento de • HTML Parser • HTML Renderer • Bloqueos • Re-RenderingFriday, November 2, 12
  • 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. Servidor Web • Expiration Header • ‘never expire’ para imagenes • ‘Expire after’ para javascripts y css’s • gzipFriday, November 2, 12
  • 76. Servidor Web • Gzip • Javascripts • Stylesheets • HTML • JSON • NUNCA! imagenes o binariosFriday, November 2, 12
  • 77. Servidor Web SSL, una pesadillaFriday, November 2, 12
  • 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. 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. 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. Base de Datos Multiples ParticionesFriday, November 2, 12
  • 82. Base de Datos • MySQL? Percona binariesFriday, November 2, 12
  • 83. Base de Datos Tablas Temporales... cuidado! tmp_table_sizeFriday, November 2, 12
  • 84. Base de Datos mysql_query_cache, del demonio? Usen otro cache en frente de mysqlFriday, November 2, 12
  • 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. Base de Datos innodb_thread_concurrency numero de cores * 2Friday, November 2, 12
  • 87. Base de Datos Indices, evitar índices duplicados mysql_slow_query_logFriday, November 2, 12
  • 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. Base de Datos • Migraciones • Agregar Columna • Remover Columna • Agregar Tabla • Remover TablaFriday, November 2, 12
  • 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. Gracias! Preguntas? Edwin Cruz - Crowd Interactive @softr8Friday, November 2, 12