• Like
  • Save
WPO - Congreso SEO4SEOS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

WPO - Congreso SEO4SEOS

  • 10,533 views
Published

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

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

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
10,533
On SlideShare
0
From Embeds
0
Number of Embeds
17

Actions

Shares
Downloads
0
Comments
0
Likes
9

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • \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

Transcript

  • 1. WEBPERFORMANCEPedro Martínez@PedroMG
  • 2. QUIEN SOY SEO & Project Manager en Friendly Rentals www.friendlyrentals.com Co-organizador del evento ClinicSEO www.clinicseo.es
  • 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. <!-- Pedro Martinez // @PedroMG ->¡Señor, dame paciencia! Segundos86420 2000 2005 2009 Fuente: Akamai
  • 5. <!-- Pedro Martinez // @PedroMG ->¿Por qué debemos hacerlo?SEOFactor de RankeadorGoogle AdwordsQuality Score
  • 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- Pedro Martinez // @PedroMG ->Evolución 2011-2012 Tamaño Pagina Velocidad de carga
  • 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. Tamaño medio por página: 1059KMedia número de peticiones: 70Media tiempo de respuesta: 4.75 segundosMedia puntuación Yslow: 54
  • 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. <!-- Pedro Martinez // @PedroMG ->¿Somos Rápidos? WebTestPage.org Firebug Pagespeed Yslow
  • 17. <!-- Pedro Martinez // @PedroMG ->Google Webmasters Tools Rendimiento del sitio Tiempo de descarga
  • 18. <!-- Pedro Martinez // @PedroMG ->Webpagetest.org
  • 19. <!-- Pedro Martinez // @PedroMG ->YSlow y PageSpeed
  • 20. <!-- Pedro Martinez // @PedroMG ->Errores comunes Home
  • 21. <!-- Pedro Martinez // @PedroMG ->Errores comunes Home 2,5 segundos
  • 22. <!-- Pedro Martinez // @PedroMG ->Errores comunes Home 2,5 segundos Listados Ficha de producto
  • 23. <!-- Pedro Martinez // @PedroMG ->Errores comunes Home 2,5 segundos Listados Ficha de producto Formulario registro
  • 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. OptimizandoNuestroWebsite
  • 26. /** Pedro Martinez - @PedroMG **/ Consulta DNSTime to Conexión HTTPFirst Byte Envío datosLa clave de todo Espera Recepción de datos
  • 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. Lo que debemos saber...Cacheando contenido
  • 29. Lo que debemos saber...Cacheando contenido
  • 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. OptimizandoCMSWordpress y Magento
  • 44. <!-- Pedro Martinez // @PedroMG ->WordpressAñadir cabeceras Expires y GZIP en .htaccessPlugins WP-Minify WP Super Cache, W3 total Cache P3 Profiler
  • 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. Botones Sociales¿Realmente los necesito?
  • 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. Toma decisionesTesting A/BMuestralos alterminar una compraElimina el excedentede peso
  • 49. CDN’SRed de distribución de contenido
  • 50. ¿Cual elegir?Precio vs Nodos
  • 51. Configurando un CDN
  • 52. Configurando un CDN
  • 53. Configurando un CDN
  • 54. Configurando un CDN
  • 55. Lo que algunos llaman futuro, es el presente. Dispositivos móviles
  • 56. Tarifas principales operadoresMovistar TP 15 Vodafone T-Internet Orange Delfin 500 Mb 500 Mb 500 Mb
  • 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. WPO /** Pedro Martinez - @PedroMG **/ “La vida es demasiado corta, escribe código rápido” Steve Souders
  • 59. @Pedromg http://pedromg.com me@pedromg.comGracias ;)¿Preguntas?