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 para bloggers de viaje: mejora el tiempo de carga de tu blog

398 views

Published on

Mejora el tiempo de carga de tu blog: dónde se pierde velocidad de carga, qué afecta en tu blog y cómo mejorarlo. Mejora el SEO y conversión de tu site con sugerencias para potenciarlo, tanto sencillas como más sofisticadas. ¡Seduce a tus suscriptores con tiempos de cara mínimos!

Published in: Internet
  • Be the first to comment

  • Be the first to like this

WPO para bloggers de viaje: mejora el tiempo de carga de tu blog

  1. 1. No hagas esperar a tus usuarios Optimiza el tiempo de carga de tu web
  2. 2. Sobre mi ● SEO técnico (fuí programador en otra vida). ● Haciendo SEO desde 2004. ● Muy centrado en aspectos técnicos de la web. ● Nómada digital. ● SEO & Web Analytics @ bigmomo. ● Apasionado por la programación con Python (“This is very pythonic!”). Alfonso Moure Ortega SEO & Web Performance & Web Analytics bigmomo Email: alfonso.moure@bigmomo.com Twitter: @ghostmou
  3. 3. Sobre nosotros Dirijo bigmomo: equipo de personas apasionadas por el marketing online, aportando soluciones a medida para llevar a nuestros clientes a lo más alto. Nuestro equipo de 9 personas trabaja de forma deslocalizada, disfrutando del mundo y de nuestra pasión por Internet. ¿Quiéres conocernos? bigmomo vs Men in Grey SEO, PPC/SEM, Web Analytics Email: info@bigmomo.com Madrid, Barcelona, Santander… ¡Internet!
  4. 4. ¿Cuántos de vosotros consideráis que tenéis una web “rápida”?
  5. 5. Vale, pero… ¿qué es la velocidad de carga? Velocidad percibida Velocidad medida
  6. 6. Lo que espera el usuario… Fuentes: ● Time is Money, Tammy Everts.
  7. 7. Lo que espera el usuario… Fuentes: ● Time is Money, Tammy Everts.
  8. 8. Qué percibe el usuario 100 ms (0,1 segundos) Límite para no perder sensación de manipulación Límite para dar feedback a una acción Perdemos relación entre acción y reacción Percepción del tiempo por parte de un usuario
  9. 9. Qué percibe el usuario 1.000 ms (1 segundo) Máximo para mantener sensación de fluidez en una web Con 200ms extra, se produce sensación de “tener que esperar” Percepción del tiempo por parte de un usuario
  10. 10. Qué percibe el usuario 10.000 ms (10 segundos) Pérdida de concentración en la tarea en curso A veces es inevitable… deberemos mostrar una barra de carga Percepción del tiempo por parte de un usuario
  11. 11. Verdadero impacto del tiempo de carga: el bolsillo ● Máximo de conversión: 2,4 segundos. ● +27% ratio de conversión con un segundo menos de carga. ● Por encima de 4,9 segundos, ratio de conversión desciende por debajo de 1%. ● Por encima de 6,3 segundos la conversión pasa a ser plana. de ratio de conversión por cada segundo ahorrado en la carga +27% Fuentes: ● https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/ ● https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/
  12. 12. Verdadero impacto del tiempo de carga: el bolsillo ● 12,8% de rebote con una media de 2,4 segundos de tiempo de carga. ● 20% de rebote con carga de 3,3 segundos. de ratio de rebote por cada segundo extra en la carga +56% Fuentes: ● https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/ ● https://www.thinkwithgoogle.com/marketing-resources/experience-design/mobile-page-speed-load-time/
  13. 13. Ruanda, África
  14. 14. Mountain Huye Coffee, Ruanda
  15. 15. Hablar de tu experiencia desde allá donde estés
  16. 16. Pero vengo a hablar de otro viaje...
  17. 17. ¿Cómo se mide un viaje por Internet? 14.742km 7 países 3 continentes 455ms Latencia: tiempo para que la información llegue al servidor
  18. 18. Cómo mejorar la latencia del usuario al servidor Intenta estar lo más cerca posible del usuario Usa servicios de hosting cerca de tu público objetivo Usa redes CDN para distribuir tu contenido por el planeta
  19. 19. Encontrando el servidor correcto La IP es 216.58.214.164 ¿cuál es la IP de www.google.com?
  20. 20. Encontrando el servidor correcto Enrutadores (routers)
  21. 21. ¡Mi teléfono ya sabe llegar al servidor!
  22. 22. Descargando el “plano” de una web Descarga de HTML desde el servidor (1.705ms, 1,705 segundos) Búsqueda del servidor (100 ms) Servidor procesa petición y genera HTML (650ms) Servidor devuelve información (455ms) TTFB Time To First Byte Establecer conexión (500 ms)
  23. 23. ¿Cuántos de vosotros sabéis “un poco” u os defendéis con HTML?
  24. 24. Descargando el “plano” de una web El HTML que devuelve una URL desde el servidor es un “plano” que permite al navegador representar visualmente la página. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>WPO: Sample 1</title> </head> <body> <h1>¡Hola! Soy el ejemplo 1</h1> <p>Esto es un ejemplo sencillo, donde sólo cargamos una imagen y un pequeño texto, todo dentro de un mismo HTML.</p> <img src="little-cat.jpg" /> </body> </html> page.html
  25. 25. Acelerando la descarga del HTML inicial Generar el HTML le cuesta tiempo al servidor... Servidor con potencia suficiente Ahorra instalando sólo los módulos necesarios Usa plantillas de alta calidad, sin editores gráficos Sí, he dicho sin editores gráficos ¯_(ツ)_/¯
  26. 26. Acelerando la descarga del HTML inicial <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>WPO: Sample 1</title> </head> <body> <h1>¡Hola! Soy el ejemplo 1</h1> <p>Esto es un ejemplo sencillo, donde sólo cargamos una imagen y un pequeño texto, todo dentro de un mismo HTML.</p> <img src="little-cat.jpg" /> </body> </html> page.html Haz tu HTML lo más pequeño posible En listados de posts, muestra sólo un resumen Muestra sólo la información necesaria, nada más Usa sistemas de compresión de HTML Activa la compresión gzip de tu servidor
  27. 27. ¡Mi móvil ya tiene el HTML! <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>WPO: Sample 1</title> </head> <body> <h1>¡Hola! Soy el ejemplo 1</h1> <p>Esto es un ejemplo sencillo, donde sólo cargamos una imagen y un pequeño texto, todo dentro de un mismo HTML.</p> <img src="little-cat.jpg" /> </body> </html>
  28. 28. Y tras el HTML… viene la tormenta de descargas Imágenes JavaScript CSS Fuentes de texto
  29. 29. Lo que sucede cuando descargamos el HTML... GET /index.html Startparsing DOMContnetLoade d BeforeLoad Load UnLoad Critical Rendering Path
  30. 30. Navegador comienza el parseo del HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>WPO: Sample 1</title> <link rel=”stylesheet” href=”style.css” /> <script type=”text/javascript” src=”script.js” /> </head> <body> <h1>¡Hola! Soy el ejemplo 1</h1> <p>Esto es un ejemplo sencillo, donde sólo cargamos una imagen y un pequeño texto, todo dentro de un mismo HTML.</p> <img src="little-cat.jpg" /> </body> </html> page.html Navegador recorre HTML Reconoce su contenido para poder dibujarlo en pantalla Recoge información de estilos: color, fuente, tamaños Reconoce en el código recursos extra a descargar
  31. 31. Descargando todos los recursos del HTML...
  32. 32. Critical Rendering Path CSS JavaScript Render blocking Bloquea la representación de página hasta ser descargado y procesado Parsing blocking Bloquea el parseo de página hasta ser descargado y procesado
  33. 33. Acelerando el Critical Rendering Path: Javascript Reduce la cantidad de ficheros y scripts JavaScript Comprime tus ficheros Javascript Utiliza plantillas hechas a medida siempre que puedas Intenta juntar todos tus ficheros JS en uno solo A más Javascript, menos Lo que no sea fundamental, deberá cargar tras el Load
  34. 34. Acelerando el Critical Rendering Path: CSS Ahorra reglas de estilos y ficheros CSS Comprime ficheros CSS Usa plantillas profesionales que usen solo lo necesario Utiliza plantillas hechas a medida siempre que puedas A más CSS, menos velocidad de dibujado en pantalla
  35. 35. HTTP/2: Descargando recursos a mayor velocidad Activa HTTP/2 y SSL en tu servidor SSL (HTTPS): mayor seguridad HTTP/2: descarga en paralelo de recursos HTTP/2 hace que importe el tamaño, no la cantidad
  36. 36. Evento DOMContentLoaded HTML CSS JavaScript Fuentes de texto ¡Con esta información, el navegador está listo para representar la página!
  37. 37. El recurso mejor optimizado es aquel que no descargamos
  38. 38. Importancia del DOMContentLoaded Indica que el HTML ha sido parseado al completo Todos los estilos y Javascript han sido procesados Queda descargar el resto de la página... ¿Nos hemos dejado algo por el camino?
  39. 39. Imágenes: el lastre de Internet JPEG GIF PNG WEBP Usa imágenes con el tamaño final que vas a usar
  40. 40. Imágenes: el lastre de Internet JPEG GIF PNG WEBP Comprime adecuadamente tus imágenes
  41. 41. Imágenes: el lastre de Internet JPEG GIF PNG WEBP Utiliza etiquetas <picture> de HTML5 para seleccionar el tamaño deseado <picture> <source media="(min-width: 650px)" srcset="foto_big.jpg"> <source media="(min-width: 465px)" srcset="foto_mid.jpg"> <img src="foto_peq.jpg" style="width:auto;"> </picture> Evita cargar imágenes de gran tamaño que se escalan según dispositivo: descarga únicamente el tamaño que necesitas
  42. 42. ¡Otros ficheros! Ficheros que (suelen) ser descargados tras parsear el HTML completo... Publicidad Capas modales (¡suscríbete a mi newsletter!) Otros...
  43. 43. Cómo medir la velocidad de mi site
  44. 44. Cómo medir la velocidad de mi site http://www.webpagetest.org
  45. 45. ¿Cómo puedo medir el tiempo de carga de mi web? http://www.webpagetest.org
  46. 46. ¿Cómo puedo medir el tiempo de carga de mi web? http://www.webpagetest.org
  47. 47. Fast Websites and Apps Create Happier Users
  48. 48. Acceso a tu site, a toda velocidad, estés donde estés
  49. 49. No hagas esperar a tus usuarios Optimiza el tiempo de carga de tu web Alfonso Moure Ortega SEO & Web Performance & Web Analytics bigmomo Email: alfonso.moure@bigmomo.com Twitter: @ghostmou
  50. 50. Métrica: ¿cuándo se dibuja el primer elemento? First Contentful Paint ~ unidad: milisegundos Tiempo transcurrido hasta que se produce el dibujado de un elemento visual: texto, imagen, capa de color diferente al blanco, etc.
  51. 51. Métrica: ¿cuándo se dibuja la parte superior de página? Tiempo transcurrido hasta que carga la parte above the fold de la página, incluidos estilos y fuentes de texto. First Meaningful Paint ~ unidad: milisegundos
  52. 52. Métrica: ¿cuándo puede el usuario utilizar la página? Registra el tiempo que pasa hasta que la página puede ser interactiva: el usuario puede hacer clic en elementos, scroll, arrastrar, y otros tipos de interacción. Time To First Interactive ~ unidad: milisegundos
  53. 53. Métrica: ¿cuándo se termina de cargar todo? Tiempo transcurrido hasta que la página y todos sus elementos han terminado de descargarse y representarse. Load ~ unidad: milisegundos

×