Web Performance Optimization

Esteban Tundidor@estebanweb

● Presentación● Definición● Uso de Caches

○ Tipos de Cache○ Browser Cache○ Gzip / Deflate○ Varnish○ Caches Internos○ Memcached○ Query Cache

● Otras Optimizaciones○ Sprites○ Minificación○ Optimización Querys

Agenda● Best Practices

○ Profiling○ Evitar repeticiónes ○ Evitar SQL en un loop○ Uso "responsable" de la

memoria○ Cada tipo para su tipo

● Preguntas

Buscar la mejor manera de realizar una actividad

Optimizar

● SEO● Usabilidad ● Accesibilidad● Economía de Recursos● Salud Mental

Optimizar ayuda en...

Uso de Caches

Se llama caché web al almacenamiento de elementos web para reducir el ancho de banda consumido, la carga de los servidores y el retardo en la descarga.

● Browser Cache● Proxy Cache● Static Cache● Internal Cache● Object Cache● Query Cache

Tipos de Cache

Tipos de Cache

Jugar con el "Browser Cache"○ Expires○ Last-Modified○ Cache-Control:

■ max-age■ s-max-age■ public / private■ no-store■ no-cache■ must-revalidate

Pro:Menor consumo de bandwidthMenor tiempo de respuesta

Contra:Perdida de control

GZip con .htaccess<IfModule mod_deflate.c>

SetOutputFilter DEFLATESetEnvIfNoCase Request_URI (.*)\.(?:gif|jpe?g|png)$ no-gzip dont-vary

</IfModule>

Pro:Entre un 50% y 90% de compresiónMenor tiempo de descarga

Contra:Mayor uso de CPUMayor tiempo de respuesta

Varnish (Static Cache)

Varnish es un Acelerador de Aplicaciones Web, se instala entre nuestro servidor y el cliente.

José Varnish Apache

GET /foto.jpg

GET /foto.jpg

200 OK /foto.jpg

Cache-Control: max-age:3600200 OK /foto.jpg

Cache-Control: max-age:3600

cache

miss

Process

Varnish (Static Cache)Pedro Varnish Apache

GET /foto.jpg

200 OK /foto.jpg

Cache-Control: max-age:3600

HIT

GET /foto.jpg

200 OK /foto.jpg

Cache-Control: max-age:3600

HIT

Ana

Varnish (Static Cache)

Pro:Instalación en 5 minutosMenor tiempo de respuestaReducción de un 95% de los request Fácil utilizaciónGran capacidad de respuesta

Contra:Perdida de controlDifícil de purgar elementos puntualesAlto uso de memoriaLento en "calentarse"

Caches Internos con PHP<?php$ahora = time();$cachefile = 'cache/cache.html';$ttl = 5;$datos = 0;

if(!file_exists($cachefile) || ((filemtime($cachefile)+$ttl) < $ahora)){for ($i=0; $i < 5 ; $i++) {

sleep(1); #Acá va la operación leeenta$datos++;

}file_put_contents($cachefile, $datos);echo 'Guardado en cache: ';

}else{$datos = file_get_contents($cachefile);echo 'Leido de cache: ';

}

echo $datos.' en '.(number_format(microtime(true) - $ahora,5));

Caches Internos con PHP

Pro:3x más rápido que Querys a la BDDentro de la misma estructuraNo usa networking

Contra:Uso de DiscoPermisos especialesUno por cada WS

Memcached (Object Cache)

Pro:10x más rápido que la lectura a discoNo necesita permisos especialesCache centralizado

Contra:Uso de Memoria RAMUso de NetworkingServicio externo

Query Cache

select * from customers where idClientType = ? ;

Pros:Rapidez, 238% más rápido si viene del QC

Contra:Guarda exactamente la sentenciaEstá atado a la performance del ServidorNo sirve para subquerysDepende de nuestra codificación

Otras Optimizaciones

● CSS Sprites

● Unificación y Minificación de archivos

● Optimización Querys

CSS Sprites#nav li a {background-image:url('../img/image_nav.gif')}#nav li a.item1 {background-position:0px 0px}#nav li a:hover.item1 {background-position:0px -72px}#nav li a.item2 {background-position:0px -143px;}#nav li a:hover.item2 {background-position:0px -215px;}

Pros:Menos request HTTPMenor tamaño

Contra:Creación del archivoCSS más complejo

Unificación y Minificación

Pros:Reducción de TamañoReducción de Request HTTPVersionado de los archivos

Contras:Proceso de armado complejoSensible a fallosComplejidad de debuggingImposible de leer (¿importa?)

Unificación y Minificación

Optimización de Querys

● Explain

● Truco del IN relacionado

● INNOdb Vs. MyISAM

● JOINS

Best Practices - Profiling

https://code.google.com/p/webgrind/

Best Practices - Evitar repeticiónes

for($i=0;i<=count($x);$i++){…}

$count = count($x);for($i=0;i<=$count;$i++){…}

Best Practices - Resumir SQL

foreach ($userList as $user) {

$query = 'INSERT INTO users (first_name,last_name)

VALUES("' . $user['first_name'] . '", "' . $user['last_name'] .

'")';

mysql_query($query);

}

Best Practices - Resumir SQL

$userData = array();

foreach ($userList as $user) {

$userData[] = '("' . $user['first_name'] . '", "' . $user

['last_name'] . '")';

}

$query = 'INSERT INTO users (first_name,last_name)

VALUES' . implode(',', $userData);

mysql_query($query);

Best Practices - Uso "responsable" de la memoria

$description = strip_tags($_POST['description']);

echo $description;

echo strip_tags($_POST['description']);

Best Practices - Herramientas

● WebGrind

● Loader.io

● Google Page Speed

● Yahoo! YSlow

● pingdom.com

● Web Page Analyzer ( websiteoptimization.com/services/analyze )

● redbot.org

● Sentido Común... mucho.

Best Practices - Siempre se puede optimizar

Mayo 2008

Best Practices - Siempre se puede optimizar

Agosto 2008

Best Practices - Siempre se puede optimizar

Agosto 2009

¿Preguntas?

¡Gracias!@estebanweb