Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WPO - Congreso SEO4SEOS

17,477 views

Published on

Charla sobre WPO realizada en el Congreso SEO para SEO's - Alicante 2012

Published in: Technology
  • Be the first to comment

WPO - Congreso SEO4SEOS

  1. 1. WEBPERFORMANCEPedro Martínez@PedroMG
  2. 2. QUIEN SOY SEO & Project Manager en Friendly Rentals www.friendlyrentals.com Co-organizador del evento ClinicSEO www.clinicseo.es
  3. 3. WPO /** Pedro Martinez - @PedroMG **/“La velocidad no es sólo una característica, es la característica” Urs Holzle, Ingeniero jefe de Google
  4. 4. <!-- Pedro Martinez // @PedroMG ->¡Señor, dame paciencia! Segundos86420 2000 2005 2009 Fuente: Akamai
  5. 5. <!-- Pedro Martinez // @PedroMG ->¿Por qué debemos hacerlo?SEOFactor de RankeadorGoogle AdwordsQuality Score
  6. 6. <!-- Pedro Martinez // @PedroMG ->¿Por qué debemos hacerlo? 1SEGUNDOde retraso en la pagina Fuente: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
  7. 7. <!-- Pedro Martinez // @PedroMG ->¿Por qué debemos hacerlo? 1 7% menos enSEGUNDOde retraso en la Conversiones pagina Fuente: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
  8. 8. <!-- Pedro Martinez // @PedroMG ->¿Por qué debemos hacerlo? 1 7% 11% menos en menos enSEGUNDOde retraso en la Conversiones páginas pagina vistas Fuente: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
  9. 9. <!-- Pedro Martinez // @PedroMG ->¿Por qué debemos hacerlo? 1 7% 11% 16% menos en menos enSEGUNDO menos en lade retraso en la Conversiones páginas satisfacción pagina vistas del cliente Fuente: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
  10. 10. <!-- Pedro Martinez // @PedroMG ->¿Por qué debemos hacerlo? 1 7% 11% 16% menos en menos enSEGUNDO menos en lade retraso en la Conversiones páginas satisfacción pagina vistas del cliente Esto suena mal para los negocios. Fuente: http://blog.tagman.com/2012/03/just-one-second-delay-in-page-load-can-cause-7-loss-in-customer-conversions/
  11. 11. <!-- Pedro Martinez // @PedroMG ->Amazon y GoogleAmazon ha calculado que una disminución de la cargade la página de sólo un segundo le podría costar 1,6billones de dólares en ventas cada año.Google ha calculado que aumentar 4 décimas desegundo podría perder 8 millones de búsquedas al díalo que implica que van a perder millones de anunciospara mostrar.
  12. 12. <!-- Pedro Martinez // @PedroMG ->Evolución 2011-2012 Tamaño Pagina Velocidad de carga
  13. 13. <!-- Pedro Martinez // @PedroMG ->Evolución 2011-2012 Tamaño Pagina Velocidad de carga1100 Kb 975 Kb 850 Kb 725 Kb 600 Kb Abril 2011 Agosto 2011 Enero 2012 Mayo 2012
  14. 14. Tamaño medio por página: 1059KMedia número de peticiones: 70Media tiempo de respuesta: 4.75 segundosMedia puntuación Yslow: 54
  15. 15. <!-- Pedro Martinez // @PedroMG ->Una cosa más... Errores 40x / 5xx Redirecciones 30x ERROR Sin Redirección 32% 37% Sin ERROR Con Redirección 68% 63% Fuente: http://httparchive.org
  16. 16. <!-- Pedro Martinez // @PedroMG ->¿Somos Rápidos? WebTestPage.org Firebug Pagespeed Yslow
  17. 17. <!-- Pedro Martinez // @PedroMG ->Google Webmasters Tools Rendimiento del sitio Tiempo de descarga
  18. 18. <!-- Pedro Martinez // @PedroMG ->Webpagetest.org
  19. 19. <!-- Pedro Martinez // @PedroMG ->YSlow y PageSpeed
  20. 20. <!-- Pedro Martinez // @PedroMG ->Errores comunes Home
  21. 21. <!-- Pedro Martinez // @PedroMG ->Errores comunes Home 2,5 segundos
  22. 22. <!-- Pedro Martinez // @PedroMG ->Errores comunes Home 2,5 segundos Listados Ficha de producto
  23. 23. <!-- Pedro Martinez // @PedroMG ->Errores comunes Home 2,5 segundos Listados Ficha de producto Formulario registro
  24. 24. <!-- Pedro Martinez // @PedroMG ->Errores comunes Home 2,5 segundos Listados 11,7 segundos Ficha de producto 6,8 segundos Formulario registro 4,3 segundos
  25. 25. OptimizandoNuestroWebsite
  26. 26. /** Pedro Martinez - @PedroMG **/ Consulta DNSTime to Conexión HTTPFirst Byte Envío datosLa clave de todo Espera Recepción de datos
  27. 27. <!-- Pedro Martinez // @PedroMG ->Cuando falla el TTFBCódigo fuente inneficienteConfiguración de BBDDConfiguración del servidor WebRecursos de la maquina mal distribuidosLas especificaciones de tu maquina soninsuficientes para tu trafico o para tu CMS
  28. 28. Lo que debemos saber...Cacheando contenido
  29. 29. Lo que debemos saber...Cacheando contenido
  30. 30. <!-- Pedro Martinez // @PedroMG ->Alta prioridad1.Habilitar Keep-Alive2.Habilitar compresión GZIP3.Comprimir imagenes4.Especificar caché de navegador5.Combinar ficheros CSS y Javascript
  31. 31. <!-- Pedro Martinez // @PedroMG ->1.Habilitar Keep-AliveHTTP/1.1 200 OKServer: ApacheLast-Modified: Mon, 11 Jul 2011 07:53:47 GMTAccept-Ranges: bytesCache-Control: max-age=315360000Expires: Sat, 31 Jul 2021 19:03:05 GMTContent-Encoding: gzipContent-Type: text/cssVary: Accept-EncodingContent-Length: 13912Date: Wed, 03 Aug 2011 19:03:05 GMTConnection: keep-alive
  32. 32. <!-- Pedro Martinez // @PedroMG ->2.Habilitar GZIPActivar mod_deflate en Apache<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/ javascript BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4.0[678] no-gzip BrowserMatch bMSIE !no-gzip !gzip-only-text/html SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary Header append Vary User-Agent env=!dont-vary</IfModule>Mejora entre un 30% y 70%
  33. 33. <!-- Pedro Martinez // @PedroMG ->3.Optimizar imágenesUtiliza el formato correcto según el caso(png,gif,jpeg)Elimina todos los datos EXIFIndica dimensiones en el HTML Herramientas para optimización: Online: Smush.it, Online Image Optimizer, ... Offline: pngcrush, jpegtran, ImageOptim...
  34. 34. <!-- Pedro Martinez // @PedroMG -> 4.Especificar caché de navegadorActivar mod_expires en Apache<IfModule mod_expires.c> <filesmatch ".(gif|GIF|png|jpg|jpeg|JPG|js|css|swf|ico)$"> ExpiresActive On ExpiresDefault "access plus 30 day" </filesmatch></IfModule>Mejora de un 40% a partir de lasegunda petición
  35. 35. <!-- Pedro Martinez // @PedroMG -> 5.Combinar Ficheros <script type="text/javascript" src="/js/librerias/jquery-1.3.2.min.js" ></script> <script type="text/javascript" src="/js/librerias/jquery-ui-1.7.2.custom.min.js" ></script> <script type="text/javascript" src="/js/librerias/jquery.bgiframe.min.js" ></script> <script type="text/javascript" src="/js/librerias/jquery.autocomplete.js" ></script> <script type="text/javascript" src="/js/librerias/jquery.innerfade.js" ></script> <script type="text/javascript" src="/js/home_fns.js" ></script><script type="text/javascript" src="/combinado.js" ></script>
  36. 36. <!-- Pedro Martinez // @PedroMG ->Prioridad Media1.Combinar las imágenes en CSS-Sprites2.Colocar el JavaScript al final de la página3.Minificar HTML4.Utilizar preferentemente recursos asíncronos5.Elimina las cookies de los recursos estaticos
  37. 37. <!-- Pedro Martinez // @PedroMG -> 1.CSS-Spriteul li a { background-image: url(bg.gif); background-position: 0px 85px; }ul li a:hover { background-image: url(bg.gif); background-position: 0px 170px; }Herramientas: Spriteme.org, CSS Sprite Generator
  38. 38. <!-- Pedro Martinez // @PedroMG ->2. Colocar el JavaScript al final de la página <script type="text/javascript" src="/js/librerias/jquery-1.3.2.min.js" ></script> <script type="text/javascript" src="/js/librerias/jquery-ui-1.7.2.min.js" ></script> <script type="text/javascript" src="/js/home_fns.js" ></script> </head> <script type="text/javascript" src="/js/librerias/jquery-1.3.2.min.js" ></script> <script type="text/javascript" src="/js/librerias/jquery-ui-1.7.2.min.js" ></script> <script type="text/javascript" src="/js/home_fns.js" ></script> </body> </html>
  39. 39. <!-- Pedro Martinez // @PedroMG ->3. Minificar y unificar CSS.ac_results { padding: 0px; border: 1px solid black; background-color: white; width:350px!important; z-index: 99999;}.ac_results ul { width: 100%; list-style-position: outside; list-style: none; padding: 0; margin: 0;}.ac_results{padding:0;border:1px solid black;background-color:white;width:350px!important;z-index:99999}.ac_results ul{width:100%;list-style-position:outside;list-style:none;padding:0;margin:0}
  40. 40. <!-- Pedro Martinez // @PedroMG ->4. Utilizar recursos asíncronos <script type="text/javascript" src="/example.js" ></script> <script> var node = document.createElement(script); node.type = text/javascript; node.async = true; node.src = example.js; // Now insert the node into the DOM, perhaps using insertBefore() </script>
  41. 41. <!-- Pedro Martinez // @PedroMG ->5. Minificar HTML <ul> <li> <a href="#tabs-1">Lo + Vendido</a> </li> <li> <a href="#tabs-2">Lo + Valorado</a> <ul><li><a href="#tabs-1">Lo + Vendido</a></li><li><a href="#tabs-2">Lo + Valorado</a></li></ul>Reducción del peso del fichero HTML
  42. 42. <!-- Pedro Martinez // @PedroMG ->Otros factores1.Eliminar errores 404 ( Not Found )2.Colocar hojas de estilo CSS al inicio3.Eliminar querystrings (?) de recursos estáticos4.Especificar "Vary" con el valor "Accept-Encoding"5.Evitar expresiones CSS
  43. 43. OptimizandoCMSWordpress y Magento
  44. 44. <!-- Pedro Martinez // @PedroMG ->WordpressAñadir cabeceras Expires y GZIP en .htaccessPlugins WP-Minify WP Super Cache, W3 total Cache P3 Profiler
  45. 45. <!-- Pedro Martinez // @PedroMG ->MagentoAñadir cabeceras Expires y GZIP en .htaccessExtensions Unificar js y css (Integrado) Habilitar Cache (Integrado) Compilar codigo (Integrado) Mas memoria para MYSQL
  46. 46. Botones Sociales¿Realmente los necesito?
  47. 47. /** Pedro Martinez - @PedroMG **/Botones sociales 1,229 Segundos - 84 Kb 0,720 Segundos - 52,5 Kb 1,607 Segundos - 69 Kb http://lastdropofink.co.uk/market-places/the-true-cost-of-adding-social-buttons/
  48. 48. Toma decisionesTesting A/BMuestralos alterminar una compraElimina el excedentede peso
  49. 49. CDN’SRed de distribución de contenido
  50. 50. ¿Cual elegir?Precio vs Nodos
  51. 51. Configurando un CDN
  52. 52. Configurando un CDN
  53. 53. Configurando un CDN
  54. 54. Configurando un CDN
  55. 55. Lo que algunos llaman futuro, es el presente. Dispositivos móviles
  56. 56. Tarifas principales operadoresMovistar TP 15 Vodafone T-Internet Orange Delfin 500 Mb 500 Mb 500 Mb
  57. 57. Tarifas principales operadoresMovistar TP 15 Vodafone T-Internet Orange Delfin 500 Mb 500 Mb 500 Mb¿Pensamos en esto a la hora de programar un site?
  58. 58. WPO /** Pedro Martinez - @PedroMG **/ “La vida es demasiado corta, escribe código rápido” Steve Souders
  59. 59. @Pedromg http://pedromg.com me@pedromg.comGracias ;)¿Preguntas?

×