Your SlideShare is downloading. ×
WPO - Congreso SEO4SEOS
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Saving this for later?

Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime - even offline.

Text the download link to your phone

Standard text messaging rates apply

WPO - Congreso SEO4SEOS

10,766
views

Published on

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

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

No Downloads
Views
Total Views
10,766
On Slideshare
0
From Embeds
0
Number of Embeds
18
Actions
Shares
0
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?