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


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.


Agenda

• Meta





• backend

• frontend

• Servidor Web



"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/




Agenda

• Meta





• backend

• frontend

• Servidor Web



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.


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 final

• 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


Agenda

• Meta





• backend

• frontend

• Servidor Web



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


Lidiando con la Red

CSS Sprites


Lidiando con la RedMinimizar scripts/css


Agenda

• Meta





• backend

• frontend

• Servidor Web



Backend, cache is king

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


• 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


Backend, Counter Caches

• product.inventory_units.on_hand.count vs

• product.inventory_units_on_hand_count


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


Backend - Busquedas

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


Backend - Solr

• Usar solr para hacer busquedas de texto y filtrado 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 costosasvistas, queries, llamadas API’s, contadores, etc!


Backend - Cache is king


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


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


Backend - Trabajar Inteligente

Hagan uso de queues(colas)


Backend - Asynchronously

• Manden todo lo no necesario a background

• Envio emails

• Activaciones

• Procesamiento imagenes

• Tareas recurrentes

• Notificaciones a otros servicios


Backend - CDN

Configuren su aplicación para tomar ventaja de un CDN


Backend - CDN

Mal:asset_host = “www.superdominio.mx”


http://www.superdominio.mx

http://www.superdominio.mx

Backend - CDN

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


http://assest

http://assest

Backend - CDN


Backend - CDN

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


http://assest

http://assest

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


Agenda

• Meta





• backend

• frontend

• Servidor Web



Frontend - CachingFull 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);


http://cdn0.super-cdn.com/scripts/a.js

http://cdn0.super-cdn.com/scripts/a.js

Frontend - Lazy Load

Cargar solo lo necesario, descagando recursos ‘on demand’


Frontend - Lazy LoadjQuery 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 - SpritesCompass


Frontend

Imágenes


Frontend - Imagenes

• Nunca redimensionar con html

• Especificar 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 WebSSL, una pesadilla


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


http://www.google.com

http://www.google.com

http://www.facebook.com

http://www.facebook.com

http://www.linkedin.com

http://www.linkedin.com

http://www.twitter.com

http://www.twitter.com

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';


https://www.modcloth.com/customers/accounts

https://www.modcloth.com/customers/accounts

http://www.modcloth.com


http://www.modcloth.com/help/fit-and-form-details






Agenda

• Meta





• backend

• frontend

• Servidor Web



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_sizeEl 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


FSL Vallarta, mejorando el rendimiento de las aplicaciones web

Documents

Transcript of FSL Vallarta, mejorando el rendimiento de las aplicaciones web