Este documento presenta varias técnicas para optimizar el rendimiento web, incluyendo el uso de cachés como browser cache, gzip, varnish y memcached; otras optimizaciones como sprites, minificación y optimización de consultas; y mejores prácticas como profiling, evitar repeticiones, resumir consultas SQL y usar memoria de forma responsable. El objetivo general es reducir el uso de recursos, mejorar la velocidad y aliviar la carga de los servidores.

1. Web Performance
Optimization
Esteban Tundidor
@estebanweb

2. ● 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

3. Buscar la mejor manera de realizar
una actividad
Optimizar

4. ● SEO
● Usabilidad
● Accesibilidad
● Economía de Recursos
● Salud Mental
Optimizar ayuda en...

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

6. ● Browser Cache
● Proxy Cache
● Static Cache
● Internal Cache
● Object Cache
● Query Cache
Tipos de Cache

7. Tipos de Cache

8. 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 bandwidth
Menor tiempo de respuesta
Contra:
Perdida de control

9. GZip con .htaccess
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI (.*).(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>
Pro:
Entre un 50% y 90% de compresión
Menor tiempo de descarga
Contra:
Mayor uso de CPU
Mayor tiempo de respuesta

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

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

12. Varnish (Static Cache)
Pro:
Instalación en 5 minutos
Menor tiempo de respuesta
Reducción de un 95% de los request
Fácil utilización
Gran capacidad de respuesta
Contra:
Perdida de control
Difícil de purgar elementos puntuales
Alto uso de memoria
Lento en "calentarse"

13. 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));

14. Caches Internos con PHP
Pro:
3x más rápido que Querys a la BD
Dentro de la misma estructura
No usa networking
Contra:
Uso de Disco
Permisos especiales
Uno por cada WS

15. Memcached (Object Cache)
Pro:
10x más rápido que la lectura a disco
No necesita permisos especiales
Cache centralizado
Contra:
Uso de Memoria RAM
Uso de Networking
Servicio externo

16. Query Cache
select * from customers where idClientType = ? ;
Pros:
Rapidez, 238% más rápido si viene del QC
Contra:
Guarda exactamente la sentencia
Está atado a la performance del Servidor
No sirve para subquerys
Depende de nuestra codificación

17. Otras Optimizaciones
● CSS Sprites
● Unificación y Minificación de archivos
● Optimización Querys

18. 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 HTTP
Menor tamaño
Contra:
Creación del archivo
CSS más complejo

19. Unificación y Minificación
Pros:
Reducción de Tamaño
Reducción de Request HTTP
Versionado de los archivos
Contras:
Proceso de armado complejo
Sensible a fallos
Complejidad de debugging
Imposible de leer (¿importa?)

20. Unificación y Minificación

21. Optimización de Querys
● Explain
● Truco del IN relacionado
● INNOdb Vs. MyISAM
● JOINS

22. Best Practices - Profiling
https://code.google.com/p/webgrind/

23. Best Practices - Evitar repeticiónes
for($i=0;i<=count($x);$i++){
…
}
$count = count($x);
for($i=0;i<=$count;$i++){
…
}

24. 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);
}

25. 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);

26. Best Practices - Uso "responsable" de la
memoria
$description = strip_tags($_POST['description']);
echo $description;
echo strip_tags($_POST['description']);

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

28. Best Practices - Siempre se puede optimizar
Mayo 2008

29. Best Practices - Siempre se puede optimizar
Agosto 2008

30. Best Practices - Siempre se puede optimizar
Agosto 2009

31. ¿Preguntas?

32. ¡Gracias!
@estebanweb