fsl vallarta, mejorando el rendimiento de las aplicaciones web
DESCRIPTION
Tips de implementación de las mejores prácticas para desarrollar aplicaciones web de alto rendimientoTRANSCRIPT
Mejorando el rendimiento de aplicaciones web
Edwin Cruz - Crowd Interactive@softr8
Festival Software Libre Vallarta 2012
Friday, November 2, 12
Agenda
• Meta
• Personajes famosos
• Mejores Practicas
• Lidiando con la Red
• Lidiando con la aplicación
• backend
• frontend
• Servidor Web
• Servidor de base de datos
Friday, November 2, 12
Agenda
• Meta
• Personajes famosos
• Mejores Practicas
• Lidiando con la Red
• Lidiando con la aplicación
• backend
• frontend
• Servidor Web
• Servidor de base de datos
Friday, November 2, 12
Meta
Hacer que nuestra aplicación carge rápido desde la primera visita, o al menos hacer parecer que lo hace, lo principal es
la experiencia del usuario.
Friday, November 2, 12
Agenda
• Meta
• Personajes famosos
• Mejores Practicas
• Lidiando con la Red
• Lidiando con la aplicación
• backend
• frontend
• Servidor Web
• Servidor de base de datos
Friday, November 2, 12
"More bandwidth doesn't matter (much)"Mike Belshe, inventor of SPDY
Friday, November 2, 12
Friday, November 2, 12
"If we can't make the bits travel faster, then the only way to improve the situation is to
move the bits closer."Ilya Grigorik
Friday, November 2, 12
http://www.businessinsider.com/the-future-of-mobile-deck-2012-3?op=1
Friday, November 2, 12
"Cache is King"Steve Souders
Friday, November 2, 12
http://www.pcworld.idg.com.au/speedtest/
Friday, November 2, 12
Agenda
• Meta
• Personajes famosos
• Mejores Practicas
• Lidiando con la Red
• Lidiando con la aplicación
• backend
• frontend
• Servidor Web
• Servidor de base de datos
Friday, November 2, 12
Mejores Prácticas
Steve Souders y un equipo de expertos trabajando en Yahoo identificaron/estandarizaron algunas mejores
prácticas para mejorar el rendimiento de aplicaciones web.
Friday, November 2, 12
Mejores Prácticas
• Minimizar peticiones HTTP
• Usar un Content Delivery Network
• Cache Control Headers
• Gzip, comprimir los paquetes
• Incluir los archivos CSS al principio
Friday, November 2, 12
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-Tags
Friday, November 2, 12
Mejores Prácticas
• Ajax Cacheables
• Precarga de componentes
• Dividir los componentes en dominios diferentes
• Cookies pequeñas
• Optimizar Imágenes
Friday, November 2, 12
Mejores Prácticas
Friday, November 2, 12
Agenda
• Meta
• Personajes famosos
• Mejores Practicas
• Lidiando con la Red
• Lidiando con la aplicación
• backend
• frontend
• Servidor Web
• Servidor de base de datos
Friday, November 2, 12
Lidiando con la Red
Servidor DNS
Friday, November 2, 12
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 futuro
Friday, November 2, 12
Lidiando con la Red
Cookies
Friday, November 2, 12
Lidiando con la Red
Friday, November 2, 12
Lidiando con la Red
Friday, November 2, 12
Lidiando con la Red
Imagenes, javascripts, stylesheets
Friday, November 2, 12
Lidiando con la Red
Friday, November 2, 12
Lidiando con la Red
Friday, November 2, 12
Lidiando con la Red
CSS Sprites
Friday, November 2, 12
Lidiando con la RedMinimizar scripts/css
Friday, November 2, 12
Agenda
• Meta
• Personajes famosos
• Mejores Practicas
• Lidiando con la Red
• Lidiando con la aplicación
• backend
• frontend
• Servidor Web
• Servidor de base de datos
Friday, November 2, 12
Backend, cache is king
Mandar a cache lo más posible para evitar costosas operaciones.
Friday, November 2, 12
• product.product_images.count vs product.product_images_count
• select count(1) from product_images where product_id = 1
• select * from products where id = 1
Backend, Counter Caches
Friday, November 2, 12
Backend, Counter Caches
• product.inventory_units.on_hand.count vs
• product.inventory_units_on_hand_count
Friday, November 2, 12
Backend, Counter Cachesclass Product < ActiveRecord::Base has_many :inventory_units
def update_counter_cache inventory_units_on_hand_count = inventory_units.on_hand.count save endend
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 endend
Friday, November 2, 12
Backend - Busquedas
Usen tecnología diseñada para búsquedas en texto
Friday, November 2, 12
Backend - Solr
• Usar solr para hacer busquedas de texto y filtrado de resultados
• extremadamente poderoso y rápido
Friday, November 2, 12
Backend - Solr
>> Benchmark.ms { Product.where('name like ?', '%Army%') }=> 337.901361>> Benchmark.ms { Product.search { keywords 'Army' } }=> 119.201331
Friday, November 2, 12
Backend - Cache is king
Cacheen todas las operaciones costosasvistas, queries, llamadas API’s, contadores, etc!
Friday, November 2, 12
Backend - Cache is king
Friday, November 2, 12
Benchmark.ms do Super.cache.fetch('count', :expires_in => 1.minute) do Product.all(:conditions => ['name like ?', '%Army%']).count endend=> 336.477508
Benchmark.ms do Super.cache.fetch('count', :expires_in => 1.minute) do Product.all(:conditions => ['name like ?', '%Army%']).count endend=> 0.461155
Backend-Fragment Cache
Friday, November 2, 12
Backend - Super Cachemodule 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 endend
Friday, November 2, 12
Backend - Trabajar Inteligente
Hagan uso de queues(colas)
Friday, November 2, 12
Backend - Asynchronously
• Manden todo lo no necesario a background
• Envio emails
• Activaciones
• Procesamiento imagenes
• Tareas recurrentes
• Notificaciones a otros servicios
Friday, November 2, 12
Backend - CDN
Configuren su aplicación para tomar ventaja de un CDN
Friday, 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 - CDN
Friday, November 2, 12
Backend - CDN
Mucho Mejor:id = nombre_imagen.to_s.to_i%4asset_host = “http://assets#{id}.superdominio.mx”
Friday, November 2, 12
Backend
Service Oriented Design
Friday, November 2, 12
Backend - SOD
Friday, November 2, 12
Backend - SOD
• Peticiones en paralelo
• Multiples aplicaciones que sirven servicios
• pequeñas
• desarrollo rápido(pruebas rapidas)
• HTTP Cache
• Tolerante a Fallos
Friday, November 2, 12
Backend
Midan, Registren, Sigan TODO
Friday, November 2, 12
Backend - Midiendo
Friday, November 2, 12
Backend - Midiendo
Friday, November 2, 12
Backend - Midiendo
Friday, November 2, 12
Backend - Midiendo
Friday, November 2, 12
Agenda
• Meta
• Personajes famosos
• Mejores Practicas
• Lidiando con la Red
• Lidiando con la aplicación
• backend
• frontend
• Servidor Web
• Servidor de base de datos
Friday, November 2, 12
Frontend - CachingFull Page Caching + Personalization
Friday, November 2, 12
Frontend - Preloading
• Incondicional
• Condicional
• Anticipado
Friday, November 2, 12
Frontend - Asynchronously
var se = $.create(“<script>”, {“src”: "http://cdn0.super-cdn.com/scripts/a.js"} );$('head')[0].appendChild(se);
Friday, November 2, 12
Frontend - Lazy Load
Cargar solo lo necesario, descagando recursos ‘on demand’
Friday, November 2, 12
Frontend - Lazy LoadjQuery Lazy Load
Friday, November 2, 12
Frontend
La página principal tiene que ser la página más rápida
Friday, November 2, 12
Frontend - Homepage
• Codigo HTML minimo necesario, incluyendo css’s y javascripts
• Preloading de estáticos
• Javascripts
• CSS
• Resolver nombres
Friday, November 2, 12
Frontend - Push+Ajax
• Descargar estaticos una sola vez
• Reemplazar el contenido del contenedor con ajax
• Elimina descargas de estaticos
• No obstrusivo
Friday, November 2, 12
Frontend - Push+Ajax
Friday, November 2, 12
Frontend - Skeleton• Head
• title
• javascript top.js
• stylesheet app.css
• Body
• container
• javascripts bottom.js
Friday, November 2, 12
Frontend - Sprites
Friday, November 2, 12
Frontend - SpritesCompass
Friday, November 2, 12
Frontend
Imágenes
Friday, November 2, 12
Frontend - Imagenes
• Nunca redimensionar con html
• Especificar el tamaño con codigo html
• Formatos correctos
• PNG
• JPEG
• MultiRes
• jQuery lazy load
Friday, November 2, 12
Frontend - Javascripts
• Combinar archivos
• Eliminar duplicidades
• Lazy loading: modernizr.load, require.js
• minimizar recursos
• un solo archivo con todo
• JSMin, YUI Compressor
Friday, November 2, 12
Backend/Frontend
• Templating
• backend
• frontend
• hybrid (condicional)
Friday, November 2, 12
Frontend - Mejoras
• Entender el funcionamiento de
• HTML Parser
• HTML Renderer
• Bloqueos
• Re-Rendering
Friday, November 2, 12
Agenda
• Meta
• Personajes famosos
• Mejores Practicas
• Lidiando con la Red
• Lidiando con la aplicación
• backend
• frontend
• Servidor Web
• Servidor de base de datos
Friday, November 2, 12
Servidor Web
• Expiration Header
• ‘never expire’ para imagenes
• ‘Expire after’ para javascripts y css’s
• gzip
Friday, November 2, 12
Servidor Web
• Gzip
• Javascripts
• Stylesheets
• HTML
• JSON
• NUNCA! imagenes o binarios
Friday, November 2, 12
Servidor WebSSL, una pesadilla
Friday, November 2, 12
Servidor WebSSL, su peor pesadilla
SSL Cypherwww.google.com: RC4-SHA, key size 1024www.facebook.com: RC4-SHA, key size 1024www.linkedin.com: RC4-MD5, key size 2048www.twitter.com: RC4-SHA, key size 2048
Nosotros:DHE-RSA-AES256-SHA: key size 2048 <= FAIL, llegamos a limite
Friday, November 2, 12
Servidor webLogeen Todo y haganlo “grep’eable”!
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 OS X) 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 - aabcdsd4335f4f46
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';
Friday, November 2, 12
Agenda
• Meta
• Personajes famosos
• Mejores Practicas
• Lidiando con la Red
• Lidiando con la aplicación
• backend
• frontend
• Servidor Web
• Servidor de base de datos
Friday, November 2, 12
Base de Datos
Multiples Particiones
Friday, November 2, 12
Base de Datos
• MySQL? Percona binaries
Friday, November 2, 12
Base de Datos
Tablas Temporales... cuidado!
tmp_table_size
Friday, November 2, 12
Base de Datos
mysql_query_cache, del demonio?
Usen otro cache en frente de mysql
Friday, November 2, 12
Base de Datos
innodb_buffer_pool_sizeEl más importante, generalmente va al 70% del total de la
memoria
Friday, November 2, 12
Base de Datos
innodb_thread_concurrency
numero de cores * 2
Friday, November 2, 12
Base de Datos
Indices, evitar índices duplicados
mysql_slow_query_log
Friday, November 2, 12
Base de Datos
Cuiden los UPDATES
Nadie pone atención en ellos, pero son los principales causantes de bloqueo de tablas
Friday, November 2, 12
Base de Datos
• Migraciones
• Agregar Columna
• Remover Columna
• Agregar Tabla
• Remover Tabla
Friday, November 2, 12
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 respaldo
Friday, November 2, 12
Gracias!
Preguntas?
Edwin Cruz - Crowd Interactive@softr8
Friday, November 2, 12