0
Web PerformanceOptimizationEsteban Tundidor@estebanweb
● Presentación● Definición● Uso de Caches○ Tipos de Cache○ Browser Cache○ Gzip / Deflate○ Varnish○ Caches Internos○ Memcac...
Buscar la mejor manera de realizaruna actividadOptimizar
● SEO● Usabilidad● Accesibilidad● Economía de Recursos● Salud MentalOptimizar ayuda en...
Uso de CachesSe llama caché web al almacenamiento de elementos webpara reducir el ancho de banda consumido, la carga de lo...
● Browser Cache● Proxy Cache● Static Cache● Internal Cache● Object Cache● Query CacheTipos 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-c...
GZip con .htaccess<IfModule mod_deflate.c>SetOutputFilter DEFLATESetEnvIfNoCase Request_URI (.*).(?:gif|jpe?g|png)$ no-gzi...
Varnish (Static Cache)Varnish es un Acelerador de Aplicaciones Web,se instala entre nuestro servidor y el cliente.José Var...
Varnish (Static Cache)Pedro Varnish ApacheGET /foto.jpg200 OK /foto.jpgCache-Control: max-age:3600HITGET /foto.jpg200 OK /...
Varnish (Static Cache)Pro:Instalación en 5 minutosMenor tiempo de respuestaReducción de un 95% de los requestFácil utiliza...
Caches Internos con PHP<?php$ahora = time();$cachefile = cache/cache.html;$ttl = 5;$datos = 0;if(!file_exists($cachefile) ...
Caches Internos con PHPPro:3x más rápido que Querys a la BDDentro de la misma estructuraNo usa networkingContra:Uso de Dis...
Memcached (Object Cache)Pro:10x más rápido que la lectura a discoNo necesita permisos especialesCache centralizadoContra:U...
Query Cacheselect * from customers where idClientType = ? ;Pros:Rapidez, 238% más rápido si viene del QCContra:Guarda exac...
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:ho...
Unificación y MinificaciónPros:Reducción de TamañoReducción de Request HTTPVersionado de los archivosContras:Proceso de ar...
Unificación y Minificación
Optimización de Querys● Explain● Truco del IN relacionado● INNOdb Vs. MyISAM● JOINS
Best Practices - Profilinghttps://code.google.com/p/webgrind/
Best Practices - Evitar repeticiónesfor($i=0;i<=count($x);$i++){…}$count = count($x);for($i=0;i<=$count;$i++){…}
Best Practices - Resumir SQLforeach ($userList as $user) {$query = INSERT INTO users (first_name,last_name)VALUES(" . $use...
Best Practices - Resumir SQL$userData = array();foreach ($userList as $user) {$userData[] = (" . $user[first_name] . ", " ...
Best Practices - Uso "responsable" de lamemoria$description = strip_tags($_POST[description]);echo $description;echo strip...
Best Practices - Herramientas● WebGrind● Loader.io● Google Page Speed● Yahoo! YSlow● pingdom.com● Web Page Analyzer ( webs...
Best Practices - Siempre se puede optimizarMayo 2008
Best Practices - Siempre se puede optimizarAgosto 2008
Best Practices - Siempre se puede optimizarAgosto 2009
¿Preguntas?
¡Gracias!@estebanweb
Upcoming SlideShare
Loading in...5
×

Charla web performance optimization

69

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
69
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Charla web performance optimization"

  1. 1. Web PerformanceOptimizationEsteban Tundidor@estebanweb
  2. 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 QuerysAgenda● Best Practices○ Profiling○ Evitar repeticiónes○ Evitar SQL en un loop○ Uso "responsable" de lamemoria○ Cada tipo para su tipo● Preguntas
  3. 3. Buscar la mejor manera de realizaruna actividadOptimizar
  4. 4. ● SEO● Usabilidad● Accesibilidad● Economía de Recursos● Salud MentalOptimizar ayuda en...
  5. 5. Uso de CachesSe llama caché web al almacenamiento de elementos webpara reducir el ancho de banda consumido, la carga de losservidores y el retardo en la descarga.
  6. 6. ● Browser Cache● Proxy Cache● Static Cache● Internal Cache● Object Cache● Query CacheTipos de Cache
  7. 7. Tipos de Cache
  8. 8. Jugar con el "Browser Cache"○ Expires○ Last-Modified○ Cache-Control:■ max-age■ s-max-age■ public / private■ no-store■ no-cache■ must-revalidatePro:Menor consumo de bandwidthMenor tiempo de respuestaContra:Perdida de control
  9. 9. 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 descargaContra:Mayor uso de CPUMayor tiempo de respuesta
  10. 10. Varnish (Static Cache)Varnish es un Acelerador de Aplicaciones Web,se instala entre nuestro servidor y el cliente.José Varnish ApacheGET /foto.jpgGET /foto.jpg200 OK /foto.jpgCache-Control: max-age:3600200 OK /foto.jpgCache-Control: max-age:3600cachemissProcess
  11. 11. Varnish (Static Cache)Pedro Varnish ApacheGET /foto.jpg200 OK /foto.jpgCache-Control: max-age:3600HITGET /foto.jpg200 OK /foto.jpgCache-Control: max-age:3600HITAna
  12. 12. Varnish (Static Cache)Pro:Instalación en 5 minutosMenor tiempo de respuestaReducción de un 95% de los requestFácil utilizaciónGran capacidad de respuestaContra:Perdida de controlDifícil de purgar elementos puntualesAlto uso de memoriaLento en "calentarse"
  13. 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. 14. Caches Internos con PHPPro:3x más rápido que Querys a la BDDentro de la misma estructuraNo usa networkingContra:Uso de DiscoPermisos especialesUno por cada WS
  15. 15. Memcached (Object Cache)Pro:10x más rápido que la lectura a discoNo necesita permisos especialesCache centralizadoContra:Uso de Memoria RAMUso de NetworkingServicio externo
  16. 16. Query Cacheselect * from customers where idClientType = ? ;Pros:Rapidez, 238% más rápido si viene del QCContra:Guarda exactamente la sentenciaEstá atado a la performance del ServidorNo sirve para subquerysDepende de nuestra codificación
  17. 17. Otras Optimizaciones● CSS Sprites● Unificación y Minificación de archivos● Optimización Querys
  18. 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 HTTPMenor tamañoContra:Creación del archivoCSS más complejo
  19. 19. Unificación y MinificaciónPros:Reducción de TamañoReducción de Request HTTPVersionado de los archivosContras:Proceso de armado complejoSensible a fallosComplejidad de debuggingImposible de leer (¿importa?)
  20. 20. Unificación y Minificación
  21. 21. Optimización de Querys● Explain● Truco del IN relacionado● INNOdb Vs. MyISAM● JOINS
  22. 22. Best Practices - Profilinghttps://code.google.com/p/webgrind/
  23. 23. Best Practices - Evitar repeticiónesfor($i=0;i<=count($x);$i++){…}$count = count($x);for($i=0;i<=$count;$i++){…}
  24. 24. Best Practices - Resumir SQLforeach ($userList as $user) {$query = INSERT INTO users (first_name,last_name)VALUES(" . $user[first_name] . ", " . $user[last_name] .");mysql_query($query);}
  25. 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. 26. Best Practices - Uso "responsable" de lamemoria$description = strip_tags($_POST[description]);echo $description;echo strip_tags($_POST[description]);
  27. 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. 28. Best Practices - Siempre se puede optimizarMayo 2008
  29. 29. Best Practices - Siempre se puede optimizarAgosto 2008
  30. 30. Best Practices - Siempre se puede optimizarAgosto 2009
  31. 31. ¿Preguntas?
  32. 32. ¡Gracias!@estebanweb
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×