Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

WPO - Congreso SEO4SEOS

Chargement dans…3
×

Consultez-les par la suite

1 sur 59
1 sur 59

Plus De Contenu Connexe

WPO - Congreso SEO4SEOS

  1. 1. WEB PERFORMANCE Pedro 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! Segundos 8 6 4 2 0 2000 2005 2009 Fuente: Akamai
  5. 5. <!-- Pedro Martinez // @PedroMG -> ¿Por qué debemos hacerlo? SEO Factor de Rankeador Google Adwords Quality Score
  6. 6. <!-- Pedro Martinez // @PedroMG -> ¿Por qué debemos hacerlo? 1 SEGUNDO de 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 en SEGUNDO de 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 en SEGUNDO de 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 en SEGUNDO menos en la de 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 en SEGUNDO menos en la de 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 Google Amazon ha calculado que una disminución de la carga de la página de sólo un segundo le podría costar 1,6 billones de dólares en ventas cada año. Google ha calculado que aumentar 4 décimas de segundo podría perder 8 millones de búsquedas al día lo que implica que van a perder millones de anuncios para 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 carga 1100 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: 1059K Media número de peticiones: 70 Media tiempo de respuesta: 4.75 segundos Media 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. Optimizando Nuestro Website
  26. 26. /** Pedro Martinez - @PedroMG **/ Consulta DNS Time to Conexión HTTP First Byte Envío datos La clave de todo Espera Recepción de datos
  27. 27. <!-- Pedro Martinez // @PedroMG -> Cuando falla el TTFB Código fuente inneficiente Configuración de BBDD Configuración del servidor Web Recursos de la maquina mal distribuidos Las especificaciones de tu maquina son insuficientes 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 prioridad 1.Habilitar Keep-Alive 2.Habilitar compresión GZIP 3.Comprimir imagenes 4.Especificar caché de navegador 5.Combinar ficheros CSS y Javascript
  31. 31. <!-- Pedro Martinez // @PedroMG -> 1.Habilitar Keep-Alive HTTP/1.1 200 OK Server: Apache Last-Modified: Mon, 11 Jul 2011 07:53:47 GMT Accept-Ranges: bytes Cache-Control: max-age=315360000 Expires: Sat, 31 Jul 2021 19:03:05 GMT Content-Encoding: gzip Content-Type: text/css Vary: Accept-Encoding Content-Length: 13912 Date: Wed, 03 Aug 2011 19:03:05 GMT Connection: keep-alive
  32. 32. <!-- Pedro Martinez // @PedroMG -> 2.Habilitar GZIP Activar 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ágenes Utiliza el formato correcto según el caso (png,gif,jpeg) Elimina todos los datos EXIF Indica 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 navegador Activar 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 la segunda 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 Media 1.Combinar las imágenes en CSS-Sprites 2.Colocar el JavaScript al final de la página 3.Minificar HTML 4.Utilizar preferentemente recursos asíncronos 5.Elimina las cookies de los recursos estaticos
  37. 37. <!-- Pedro Martinez // @PedroMG -> 1.CSS-Sprite ul 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 factores 1.Eliminar errores 404 ( Not Found ) 2.Colocar hojas de estilo CSS al inicio 3.Eliminar querystrings (?) de recursos estáticos 4.Especificar "Vary" con el valor "Accept- Encoding" 5.Evitar expresiones CSS
  43. 43. Optimizando CMS Wordpress y Magento
  44. 44. <!-- Pedro Martinez // @PedroMG -> Wordpress Añadir cabeceras Expires y GZIP en .htaccess Plugins WP-Minify WP Super Cache, W3 total Cache P3 Profiler
  45. 45. <!-- Pedro Martinez // @PedroMG -> Magento Añadir cabeceras Expires y GZIP en .htaccess Extensions 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 decisiones Testing A/B Muestralos al terminar una compra Elimina el excedente de peso
  49. 49. CDN’S Red 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 operadores Movistar TP 15 Vodafone T-Internet Orange Delfin 500 Mb 500 Mb 500 Mb
  57. 57. Tarifas principales operadores Movistar 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.com Gracias ;) ¿Preguntas?

Notes de l'éditeur

  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

×