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.

Acelerar ya no es suficiente #RMC19

622 views

Published on

Charla en #RMC19 celebrada el 19 de octubre de 2019 en Palexco, A Coruña.

Se introducen conceptos de Velocidad de Carga, se repasan métricas de evolución de Page Speed y se exponen tecnologías a considerar en los proyectos, como pueden ser:
- Lazy Loading
- Preload, preconnect, prefetch
- Font-Display
- Compresión Brotli
- Formato de imágenes Webp

Para cerrar la charla, se exponen distintos test comparativos, para ver los impactos en los ficheros de pruebas usados, de la web de renfe.

Published in: Marketing
  • DOWNLOAD THAT BOOKS INTO AVAILABLE FORMAT (2019 Update) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download Full doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download PDF EBOOK here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download EPUB Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... Download doc Ebook here { http://shorturl.at/mzUV6 } ......................................................................................................................... ......................................................................................................................... ................................................................................................................................... eBook is an electronic version of a traditional print book that can be read by using a personal computer or by using an eBook reader. (An eBook reader can be a software application for use on a computer such as Microsoft's free Reader application, or a book-sized computer that is used solely as a reading device such as Nuvomedia's Rocket eBook.) Users can purchase an eBook on diskette or CD, but the most popular method of getting an eBook is to purchase a downloadable file of the eBook (or other reading material) from a Web site (such as Barnes and Noble) to be read from the user's computer or reading device. Generally, an eBook can be downloaded in five minutes or less ......................................................................................................................... .............. Browse by Genre Available eBooks .............................................................................................................................. Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, ......................................................................................................................... ......................................................................................................................... .....BEST SELLER FOR EBOOK RECOMMEND............................................................. ......................................................................................................................... Blowout: Corrupted Democracy, Rogue State Russia, and the Richest, Most Destructive Industry on Earth,-- The Ride of a Lifetime: Lessons Learned from 15 Years as CEO of the Walt Disney Company,-- Call Sign Chaos: Learning to Lead,-- StrengthsFinder 2.0,-- Stillness Is the Key,-- She Said: Breaking the Sexual Harassment Story That Helped Ignite a Movement,-- Atomic Habits: An Easy & Proven Way to Build Good Habits & Break Bad Ones,-- Everything Is Figureoutable,-- What It Takes: Lessons in the Pursuit of Excellence,-- Rich Dad Poor Dad: What the Rich Teach Their Kids About Money That the Poor and Middle Class Do Not!,-- The Total Money Makeover: Classic Edition: A Proven Plan for Financial Fitness,-- Shut Up and Listen!: Hard Business Truths that Will Help You Succeed, ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Acelerar ya no es suficiente #RMC19

  1. 1. #rmc19 @mjcachon ACELERAR YA NO ES SUFICIENTE #rmc19 @mjcachon
  2. 2. #rmc19 @mjcachon ¡HOLA CORUNA!
  3. 3. #rmc19 @mjcachon Country manager Consultora seo master seo Madrid Ministra seo Mj cachon
  4. 4. #rmc19 @mjcachon INTRODUCCION
  5. 5. #rmc19 @mjcachon El tiempo que tarda en mostrarse completamente el contenido de una página específica Que es la velocidad de carga
  6. 6. #rmc19 @mjcachon No tendrás una segunda oportunidad para causar una (buena) primera impresión
  7. 7. #rmc19 @mjcachon Web Owners Diseno Desarrollo tecnología Elementos que influyen Web servers Backend Frontend bbdd Web users Dispositivo Conexión aplicaciones
  8. 8. #rmc19 @mjcachon Web Owners Web servers Diseno Desarrollo tecnología Backend Frontend bbdd Elementos que influyen Web users Dispositivo Conexión aplicaciones
  9. 9. #rmc19 @mjcachon Web Owners Web servers Web users Diseno Desarrollo tecnología Backend Frontend bbdd Dispositivo Conexión aplicaciones Elementos que influyen
  10. 10. #rmc19 @mjcachon Elementos fuera de control LTE 4G 3G 2G
  11. 11. #rmc19 @mjcachon Elementos fuera de control
  12. 12. #rmc19 @mjcachon 9 de julio de 2018 9 de abril de 2010 Factor seo
  13. 13. #rmc19 @mjcachon 9 de julio de 2018 9 de abril de 2010 Factor seo
  14. 14. #rmc19 @mjcachon “ Las personas quieren poder encontrar respuestas a sus preguntas lo mas rápido posible ” Experiencia de usuario
  15. 15. #rmc19 @mjcachon Experiencia de usuario
  16. 16. #rmc19 @mjcachon Experiencia de usuario
  17. 17. #rmc19 @mjcachon “Sitios con rendimiento elevado logran atraer y retener a los usuarios mejor que otros con rendimiento inferior” retencion
  18. 18. #rmc19 @mjcachon retencion
  19. 19. #rmc19 @mjcachon Calcula tu mismo el impacto
  20. 20. #rmc19 @mjcachon La experiencia del usuario se puede capturar con una sola métrica. Mito 1
  21. 21. #rmc19 @mjcachon La experiencia del usuario puede ser capturada con un solo "usuario representativo". Mito 2
  22. 22. #rmc19 @mjcachon Mi web me carga rápido a mí, así que debería cargarse rápido para mis usuarios. Mito 3
  23. 23. #rmc19 @mjcachon Resumen: la velocidad importa 1. La velocidad del sitio es un factor de ranking 2. Los sitios rápidos son más fáciles de rastrear 3. Los sitios de carga rápida tienen mejores tasas de conversión 4. Los sitios rápidos pueden minimizar las tasas de rebote 5. Los sitios rápidos ofrecen mejor experiencia del usuario 6. Los sitios rápidos favorecen la retención
  24. 24. #rmc19 @mjcachon Evolucion de Google PageSpeed
  25. 25. #rmc19 @mjcachon Velocidad de carga Vs PageSpeed
  26. 26. #rmc19 @mjcachon “mi sitio tiene 96 en pagespeed”
  27. 27. #rmc19 @mjcachon “mi sitio se carga en X,XX segundos”
  28. 28. #rmc19 @mjcachon Dos tipos de herramientas Datos de rendimiento recopilados dentro de un entorno controlado con configuraciones predefinidas de dispositivos y redes Data Lab
  29. 29. #rmc19 @mjcachon Dos tipos de herramientas Real User Monitoring (RUM) Datos de rendimiento recopilados a partir de cargas de página reales que los usuarios están experimentando g.co/chromeuxdash
  30. 30. #rmc19 @mjcachong.co/chromeuxdash Sitio optimizable
  31. 31. #rmc19 @mjcachong.co/chromeuxdash Sitio optimizado
  32. 32. #rmc19 @mjcachon Fcp: first contentful paint First Contentful Paint (FCP) mide el tiempo desde la navegación hasta el momento en que el navegador muestra el primer bit de contenido del DOM. Este es un hito importante para los usuarios porque proporciona información de que la página se está cargando realmente.
  33. 33. #rmc19 @mjcachon Fcp: first contentful paint
  34. 34. #rmc19 @mjcachon Fmp: first meaningful paint Mide cuando el contenido principal de una página es visible para el usuario, es decir, cuando el contenido que el usuario está buscando aparece en la página
  35. 35. #rmc19 @mjcachon Fmp: first meaningful paint
  36. 36. #rmc19 @mjcachon tti: time to interactive TTI mide el tiempo que tarda una página en ser completamente interactiva
  37. 37. #rmc19 @mjcachon Diferencia metricas
  38. 38. #rmc19 @mjcachon ANALISIS EN VIVO https://twitter.com/katiehempenius/status/1177271972255928320?s=20
  39. 39. #rmc19 @mjcachon nuevas tecnologias WPO
  40. 40. #rmc19 @mjcachon Lazy loading (intersection observer) Lazy loading carga imágenes de una web cuando el usuario las necesite. Intersection observer es una API de programación de JavaScript que detecta la interacción del usuario
  41. 41. #rmc19 @mjcachon Preconnect Preconnect hace que el navegador establezca conexión con otro dominio para ahorrar tiempos ( conexiones DNS, TLS y TCP) https://www.keycdn.com/support/preconnect https://alvarofontela.com/precarga-recursos-resource-hints-wpo/
  42. 42. #rmc19 @mjcachon preload Preload para priorizar la carga de recursos y decirle al navegador que recupere lo antes posible recursos estáticos. https://www.keycdn.com/support/preload-directive
  43. 43. #rmc19 @mjcachon prefetch Prefetch descargará todos los recursos necesarios (que se espera que use el usuario) y los almacenará en la caché local https://www.keycdn.com/support/prefetching
  44. 44. #rmc19 @mjcachon Font display Con font-display podemos mostrar los textos en una fuente alternativa mientras se carga la fuente definitiva.
  45. 45. #rmc19 @mjcachon Brotlli compression Es un algoritmo de compresión desarrollado por Google y sirve mejor para la compresión de texto, ofrece una mejor relación de compresión que gzip
  46. 46. #rmc19 @mjcachon Brotlli compression -14% -21% -17% JS HTML CSS Mejora de compresión con Brotlli vs GZIP
  47. 47. #rmc19 @mjcachon Pero cuidado… https://caniuse.com/#feat=brotli
  48. 48. #rmc19 @mjcachon webp WebP es un formato de imagen moderno que proporciona una compresión superior sin pérdidas Ahorros potenciales entre 25-34%
  49. 49. #rmc19 @mjcachon Pero cuidado… https://caniuse.com/#search=webp
  50. 50. #rmc19 @mjcachon Confirmar en analytics AUDIENCIA > TECNOLOGÍA > VERSIÓN NAVEGADOR
  51. 51. #rmc19 @mjcachon Comparativas
  52. 52. #rmc19 @mjcachon TEST PUBLICOS: Lazy loading (INT.OBS) https://parzibyte.me/blog/2018/09/05/lazy-loading-imagenes-intersection-observer/ CON sin
  53. 53. #rmc19 @mjcachon TEST PUBLICOS: preload https://yeisondaza.com/optimizar-sitio-web-preload-prefech CON sinFIRST PAINT 977 MS FIRST PAINT 563 MS
  54. 54. #rmc19 @mjcachon TEST PROPIOS: metodologia Descargamos el html de la web de Renfe y lo subimos a nuestro servidor : 1. Sin optimizar 2. Con compresión gzip 3. Con compresión brotlli 4. Imágenes con formatos png 5. Imágenes con formatos webp
  55. 55. #rmc19 @mjcachon comprobaciones Inspector de Chrome > Pestaña Network
  56. 56. #rmc19 @mjcachon Imagenes en Png PESO TOTAL 1 MB
  57. 57. #rmc19 @mjcachon Imagenes en webp PESO TOTAL: 296 KB
  58. 58. #rmc19 @mjcachon PNG VS webp 1 MB vs 296 KB -70%
  59. 59. #rmc19 @mjcachon Conversor de imagenes squoosh.app
  60. 60. #rmc19 @mjcachon Compresion gzip PESO TOTAL 295 KB
  61. 61. #rmc19 @mjcachon Compresion brotlli PESO TOTAL 277 KB
  62. 62. #rmc19 @mjcachon gzip VS brotlli 295 KB vs 277 KB -6%
  63. 63. #rmc19 @mjcachon COMO SE MIRA Revisando Headers
  64. 64. #rmc19 @mjcachon COMPARATIVA AGREGADA
  65. 65. #rmc19 @mjcachon COMPARATIVA AGREGADA GZIP y PNG vs BROTLLI y WEBP https://www.webpagetest.org/video/ 1,1 MB 297 KB
  66. 66. #rmc19 @mjcachon INTRODUCCION APRENDIZAJES • Ir más allá de una mera puntuación • Pintar el contenido lo antes posible • Considerar la integración de nuevas tecnologías • No podemos controlar todos los aspectos
  67. 67. #rmc19 @mjcachon ALGUNA DUDA?
  68. 68. #rmc19 @mjcachon GRACIAS! hola@mjcachon.es !!
  69. 69. #rmc19 @mjcachon referencias https://www.thinkwithgoogle.com/intl/es-es/insights/velocidad-paginas-web-para-moviles/ https://www.thinkwithgoogle.com/intl/es-es/insights/ya-est%C3%A1n-aqu%C3%AD-los-rankings-de-velocidad-de-los-sitios-web-m%C3%B3viles-europeos-est%C3%A1s-la-altura/ https://www.thinkwithgoogle.com/intl/es-es/canales-de-publicidad/movil/descubre-si-la-velocidad-de-carga-web-en-moviles-es-adecuada/ https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/ https://gtmetrix.com/blog/first-contentful-paint-explained/ https://webmasters.googleblog.com/2018/01/using-page-speed-in-mobile-search.html https://developers.google.com/web/fundamentals/performance/why-performance-matters#el_rendimiento_como_herramienta_para_retener_a_los_usuarios https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics?hl=es https://medium.com/oyotech/how-brotli-compression-gave-us-37-latency-improvement-14d41e50fee4 https://medium.com/walmartlabs/lazy-loading-images-intersectionobserver-8c5bff730920 https://developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting https://developers.google.com/web/updates/2016/02/font-display https://developers.google.com/web/fundamentals/performance/resource-prioritization?hl=es-419 https://caniuse.com/#feat=brotli

×