Web PerformanceOptimization

Retreat 2011 diego.cabrera.mla@gmail.comsantiago.aimetta.mla@gmail.com

Agenda

•Motivación•Buenas practicas•Herramientas

Motivación

The Google Analytics exit rate for different page load times collected from Wikia data. Measured over 29 million pageviews (2009)

+500 ms -> -20% traffic (Google -2008)

+400 ms -> -5 a 9% Full page traffic (Yahoo-2008)

+100 ms -> -1% sales (Amazon-2008)

+400 ms -> -0.59% searches/users (Google -2009)

+2000 ms -> -4.3% revenues/users (Bing -2009)

#1 Anatomía de una web sana

Buenas Practicas

Lo básico

•Enviar contenido zipeado.•Recursos estáticos bien cacheados.•Js y Css externalizados.•Css at the top, Js at the bottom.

Gzip•Para TODO el contenido (estático y dinámico)•Reducción de un 70% del peso de la respuesta•90% de los browsers soportan gzip•Hilando fino: para comprimir aún más...•Css: Key-values ordenados alfabéticamente•Html: Atributos ordenados alfabéticamente•Usar sólo “ o sólo ‘•Minimización de JS y CSS•Google mejoró un 1.5% la compresión

Cache

•Cachear componentes ayuda a reducir el número de requests•80% page views se hacen con la cache llena (Yahoo)•Search •HTML = 5minutos•CSS,JS,imágenes = 1mes

Second View

Externalizar CSS y JS

•Mejora el cacheo•Ayuda a compartir recursos (+cacheo)•Tradeoff cantidad de requests (inline)

Reducir la cantidad de requests

•Combinar scripts en un archivo•Combinar styles en un archivo

•Combinar imágenes en sprites

Stylesheet en el head

•Acelera el render•Ayuda a que el render sea progresivo

Javascript después de OnLoad

• Los elementos script blockean el render

Postcarga – Hay vida después del onload?

•Después del onload•Script•Trackeos•Imágenes•CSS extras

Hasta acá está todo muy al alcance de nuestras

manos..ahora hilemos un poco más fino

Uso de CDN•Mejor tiempo de respuesta en base a servir contenidos teniendo en cuenta la proximidad•Contenido estático

<- sin CDN

<- con CDN

DNS Lookups•Resolver un lookup cuesta entre 20-120 ms•1 dominio principal y hasta 4 de recursos•Trade off paralelismo•Los DNS lookups bloquean las descargas en paralelo

Request por dominio

Dominios cookieless

•No enviar cookies en los dominios static, imágenes, css , js.•Muchos proxies no cachean dominios con cookies

CSSHTML

Imágenes

•Optimizar imágenes•Eliminar metadatos reduce el peso sin perdida de calidad.•Optimizar css sprites•No escalar imágenes en el html•Setear width y height acelera el render

Reducir el número de elementos del DOM

•Generación del DOM más rápida•Búsquedas de elementos más rápida•700 elementos -> OK!

Buffer flushing

•La respuesta del backend toma entre 150 y 500ms•Se puede enviar html que está listo en ese momento.•Mejora la percepción del usuario

Herramientas

•Tests con múltiples browsers y ubicaciones•Network activity•Detalles de los request•Checklist + reporte de pageSpeed•Repeat view•Content breakdown by MIME and Domain•*.har•Load detail•Comparaciones

Speed tracer

•Network activity•Monitor de eventos

Preguntas

• Imágenes– http://www.flickr.com/photos/jamesgold/153504/– http://www.flickr.com/photos/toasty/472330111/– http://www.flickr.com/photos/booksin/3655138991/– http://www.flickr.com/photos/anavrin/194771480/– http://www.flickr.com/photos/halfangel36/2371628236/– http://www.flickr.com/photos/gru/148724512/