fsl vallarta, mejorando el rendimiento de las aplicaciones web

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