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

1. WEB
PERFORMANCE
Pedro 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!
Segundos
8
6
4
2
0
2000 2005 2009
Fuente: Akamai

5. <!-- Pedro Martinez // @PedroMG ->
¿Por qué debemos hacerlo?
SEO
Factor de Rankeador
Google Adwords
Quality Score

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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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 carga
1100 Kb
975 Kb
850 Kb
725 Kb
600 Kb
Abril 2011 Agosto 2011 Enero 2012 Mayo 2012

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. <!-- 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. Optimizando
Nuestro
Website

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. <!-- 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. Lo que debemos saber...
Cacheando contenido

29. Lo que debemos saber...
Cacheando contenido

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. <!-- 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. <!-- 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. <!-- 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. <!-- 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. <!-- 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 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. <!-- 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. <!-- 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 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. Optimizando
CMS
Wordpress y Magento

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. <!-- 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. 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 decisiones
Testing A/B
Muestralos al
terminar una compra
Elimina el excedente
de peso

49. CDN’S
Red 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 operadores
Movistar TP 15 Vodafone T-Internet Orange Delfin
500 Mb 500 Mb 500 Mb

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. WPO /** Pedro Martinez - @PedroMG **/
“La vida es demasiado corta, escribe código rápido”
Steve Souders

59. @Pedromg
http://pedromg.com
me@pedromg.com
Gracias ;)
¿Preguntas?