Mejorando el rendimiento de 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


Agenda
• Meta
• backend
• frontend
• Servidor Web

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.


"More bandwidth doesn't matter (much)"
Mike Belshe, inventor of SPDY


"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


http://www.businessinsider.com/the-future-of-mobile-deck-2012-3?op=1


"Cache is King"
Steve Souders


http://www.pcworld.idg.com.au/speedtest/


Mejores Prácticas

Steve Souders y un equipo de expertos trabajando en
Yahoo identiﬁcaron/estandarizaron algunas mejores
prácticas para mejorar el rendimiento de aplicaciones web.


Mejores Prácticas

• Minimizar peticiones HTTP
• Usar un Content Delivery Network
• Cache Control Headers
• Gzip, comprimir los paquetes
• Incluir los archivos CSS al principio


Mejores Prácticas

• Incluir los scripts hasta el ﬁnal
• Aprovechar el cache de los navegadores
• Hacer solo peticiones DNS muy necesarias
• Minimizar archivos JS y CSS
• Aprovechar E-Tags


Mejores Prácticas
• Ajax Cacheables
• Precarga de componentes
• Dividir los componentes en dominios
diferentes
• Cookies pequeñas
• Optimizar Imágenes

Mejores Prácticas


Lidiando con la Red

Servidor DNS


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


Lidiando con la Red

Cookies


Lidiando con la Red


Lidiando con la Red

Imagenes, javascripts, stylesheets


Lidiando con la Red

CSS Sprites


Lidiando con la Red
Minimizar scripts/css


Backend, cache is king

Mandar a cache lo más posible para evitar costosas
operaciones.


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 = 1



• product.inventory_units.on_hand.count vs
• product.inventory_units_on_hand_count


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
end


Backend - Busquedas

Usen tecnología diseñada para búsquedas en texto


Backend - Solr

• Usar solr para hacer busquedas de texto y
ﬁltrado de resultados
• extremadamente poderoso y rápido


Backend - Solr

>> Benchmark.ms { Product.where('name like ?', '%Army%') }
=> 337.901361
>> Benchmark.ms { Product.search { keywords 'Army' } }
=> 119.201331


Backend - Cache is king

Cacheen todas las operaciones costosas
vistas, queries, llamadas API’s, contadores, etc!


Backend - Cache is king


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.461155


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
end


Backend - Trabajar Inteligente

Hagan uso de queues(colas)


Backend - Asynchronously
• Manden todo lo no necesario a background
• Envio emails
• Activaciones
• Procesamiento imagenes
• Tareas recurrentes
• Notiﬁcaciones a otros servicios

Backend - CDN

Conﬁguren su aplicación para tomar ventaja de un CDN


Backend - CDN

Mal:
asset_host = “www.superdominio.mx”


Backend - CDN

Bien:
id = rand(4)
asset_host = “http://assets#{id}.superdominio.mx”


Backend - CDN


Backend - CDN

Mucho Mejor:
id = nombre_imagen.to_s.to_i%4
asset_host = “http://assets#{id}.superdominio.mx”


Backend

Service Oriented Design


Backend - SOD


Backend - SOD
• Peticiones en paralelo
• Multiples aplicaciones que sirven servicios
• pequeñas
• desarrollo rápido(pruebas rapidas)
• HTTP Cache
• Tolerante a Fallos

Backend

Midan, Registren, Sigan TODO


Backend - Midiendo


Frontend - Caching
Full Page Caching + Personalization


Frontend - Preloading

• Incondicional
• Condicional
• Anticipado


Frontend - Asynchronously

var se = $.create(“<script>”,
{“src”: "http://cdn0.super-cdn.com/scripts/a.js"}
);
$('head')[0].appendChild(se);


Frontend - Lazy Load

Cargar solo lo necesario, descagando recursos ‘on demand’


Frontend - Lazy Load
jQuery Lazy Load


Frontend

La página principal tiene que ser la página más rápida


Frontend - Homepage
• Codigo HTML minimo necesario,
incluyendo css’s y javascripts
• Preloading de estáticos
• Javascripts
• CSS
• Resolver nombres

Frontend - Push+Ajax

• Descargar estaticos una sola vez
• Reemplazar el contenido del contenedor
con ajax
• Elimina descargas de estaticos
• No obstrusivo


Frontend - Push+Ajax


Frontend - Skeleton
• Head
• title
• javascript top.js
• stylesheet app.css
• Body
• container
• javascripts bottom.js

Frontend - Sprites


Frontend - Sprites
Compass


Frontend

Imágenes


Frontend - Imagenes
• Nunca redimensionar con html
• Especiﬁcar el tamaño con codigo html
• Formatos correctos
• PNG
• JPEG
• MultiRes
• jQuery lazy load

Frontend - Javascripts
• Combinar archivos
• Eliminar duplicidades
• Lazy loading: modernizr.load, require.js
• minimizar recursos
• un solo archivo con todo
• JSMin,YUI Compressor

Backend/Frontend

• Templating
• backend
• frontend
• hybrid (condicional)


Frontend - Mejoras

• Entender el funcionamiento de
• HTML Parser
• HTML Renderer
• Bloqueos
• Re-Rendering


Agenda
• Meta





• backend

• frontend

• Servidor Web

Servidor Web

• Expiration Header
• ‘never expire’ para imagenes
• ‘Expire after’ para javascripts y css’s
• gzip


Servidor Web
• Gzip
• Javascripts
• Stylesheets
• HTML
• JSON
• NUNCA! imagenes o binarios

Servidor Web
SSL, una pesadilla


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 limite


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 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 - aabcdsd4335f4f46
117.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/ﬁt-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


Base de Datos

Multiples Particiones


Base de Datos

• MySQL? Percona binaries


Base de Datos

Tablas Temporales... cuidado!

tmp_table_size


Base de Datos

mysql_query_cache, del demonio?

Usen otro cache en frente de mysql


Base de Datos

innodb_buffer_pool_size
El más importante, generalmente va al 70% del total de la
memoria


Base de Datos

innodb_thread_concurrency

numero de cores * 2


Base de Datos

Indices, evitar índices duplicados

mysql_slow_query_log


Base de Datos

Cuiden los UPDATES

Nadie pone atención en ellos, pero son los principales
causantes de bloqueo de tablas


Base de Datos

• Migraciones
• Agregar Columna
• Remover Columna
• Agregar Tabla
• Remover Tabla


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


Gracias!
Preguntas?

Edwin Cruz - Crowd Interactive
@softr8


Mejorando el rendimiento de aplicaciones web

Recomendados

Recomendados

Más contenido relacionado

Similar a Mejorando el rendimiento de aplicaciones web

Similar a Mejorando el rendimiento de aplicaciones web (7)

Más de Edwin Cruz

Más de Edwin Cruz (11)

Mejorando el rendimiento de aplicaciones web