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.

The wpo academy_clinic_seo

361 views

Published on

¿Es mi web rápida? ¿Es válido lo que dicen las herramientas? Cómo interpretar los distintos valores que dan las herramientas y saber si la web es rápida o no más allá de una sensación. Repasamos las principales herramientas de análisis y que significan los datos que nos ofrecen.Repasamos el nuevo marco de medición de Google con el lanzamiento dela versión 3.1..1 de Lighthouse.

Published in: Marketing
  • Be the first to comment

  • Be the first to like this

The wpo academy_clinic_seo

  1. 1. THE WPO ACADE MY
  2. 2. ¿Porque es importante la velocidad a nivel SEO?
  3. 3. ¿Porque es importante la velocidad a nivel usuario?
  4. 4. ¿Porque es importante la velocidad a nivel negocio?
  5. 5. ¿Cómo se ha medido la velocidad en muchos casos?
  6. 6. Mitos sobre el perfomance
  7. 7. Mitos sobre el perfomance La experiencia de usuario se puede capturar con una sola métrica La buena experiencia de usuario no se puede capturar en un solo punto en el tiempo. Se compone de varios touchpoints en el user journey. Hay que saber que métricas influyen y medir las que son importantes.
  8. 8. Mitos sobre el perfomance La experiencia de usuario puede ser testeada contra un solo “usuario representativo” La Perfomance de los sites depende de muchos factores tales como el dispositivo utilizado, las conexiones de red y otros factores. Hay que definir una serie de escenarios que sean representativos de nuestros usuarios con más porcentaje sobre el total y que tenga en cuenta los parámetros mediante los que se conectan.
  9. 9. Mitos sobre el perfomance Si a mí me carga rápida, a mis usuarios también Muchas veces usamos dispositivos y redes para realizar los tests de Perfomance que son más rápidos y mejores que los de nuestros usuarios. Hay que tener en cuenta las características reales de uso de nuestro site y testear contra eso en nuestras métricas.
  10. 10. Datos de laboratorio vs datos de campo
  11. 11. Datos de Perfomance recogidos en un entorno controlado con ajustes de redes y dispositivos predefinidos. Ofrecen resultados reproducibles y permiten debugar para identificar y corregir problemas de perfomance. Fortalezas Permiten solucionar problemas de perfomance Visión completa del problema y foco en la UX Crea un entorno de testeo reproducible Limitaciones Puede que no tenga en cuenta problemas reales que están ocurriendo Datos de laboratorio
  12. 12. También llamados Datos Reales de Usuarios (RUM) Son datos de perfomance recogidos de cargas reales de páginas de nuestros usuarios en nuestro site. Fortalezas Capturan la experiencia real de los usuarios Pueden correlacionarse con KPI´s de negocio Limitaciones Cantidad de datos restringido Opciones de reproducir las condiciones son limitadas Datos de campo
  13. 13. Lighthouse Consejos personalizados para mejorar Perfomance, accesibilidad, PWA, SEO y otras best practices. WebPageTest Permite analizar performance de un site en un entorno controlado y profundizar en algunas métricas. TestMySite Diagnostica la Perfomance y provee algunos fixes basados en Webpagetest and PageSpeed Insights. PageSpeed Insights Muestra datos de perfomance de campo de tu site y sugerencias de como mejorarla. Speed Scorecard Permite comparar tu site mobile contra otros. Utiliza datos de campo del Chrome UX Report. Impact Calculator Permite estimar el ingreso adicional proveniente de la mejora de Perfomance. Se basa en los datos de Chrome Developer Tools Allows you to profile the runtime of a page, as well as identify and debug performance bottlenecks. Distintas herramientas de perfomance
  14. 14. Product owner, marketero o desarrollador que quiere hacer un business case para mejorar la perfomance dentro de un site. Necesitas calcular el impacto a nivel de negocio y buscas datos económicos que cuantificar el coste de oportunidad Usas el Speed Scorecard y TestMysite para hacer benchmark de tu Perfomance. Usas el Impact Calculator para estimar el coste de oportunidad económico de perfomance. Distintos casos de uso de las herramientas de perfomance
  15. 15. Desarrollador que … …intentando comprender la Perfomance actual y que busca recomandeaciones en forma de auditoría. PageSpeedInsights …intentando mejorar su site comparándolo contra las best practices a nivel desarrollo. Lighthouse …buscando soporte técnico sobre como debugar o profundizar en la Perfomance de un site. Chrome Developer Tools -WPTest Distintos casos de uso de las herramientas de perfomance
  16. 16. Método Rail Las buenas métricas de Perfomance se centran en el usuario
  17. 17. ¿La perfomance depende de la percepción?
  18. 18. He probado nuestra web y se carga en X,XX segu La carga no es un solo momento en el tiempo; es una experiencia que ninguna métrica puede capturar por completo. Así que, en lugar de medir la carga con una sola métrica, debemos medir los tiempos de cada momento a lo largo de la experiencia que pueden afectar La perfomance depende de la percepción
  19. 19. Métricas de Perfomance que responden a la realidad de los usuarios
  20. 20. Métricas de Perfomance que responden a la realidad de los usuarios
  21. 21. Primer procesamiento de imagen (FP) y primer procesamiento de imagen con contenido (FCP) La API PaintTiming define dos métricas: primer procesamiento de imagen (FP) y primer (FP) y primer procesamiento de imagen con contenido (FCP). Estas métricas indican los puntos, inmediatamente después de la navegación, cuando el navegador representa los píxeles en la pantalla. Es importante para el usuario, ya que responde a la pregunta: ¿está sucediendo? FP indica el punto cuando el navegador representa cualquier elemento visualmente diferente de lo que estaba en la pantalla antes de la navegación. FCP es el punto cuando el navegador representa el primer bit de contenido desde el DOM, lo que puede ser texto, una imagen, SVG o, incluso, un elemento <canvas>. Métricas de Perfomance que responden a la realidad de los usuarios FP & FCP
  22. 22. Primer procesamiento de imagen con significado y tiempo de elemento hero El primer procesamiento de imagen con significado (FMP) es la métrica que responde pregunta: "¿es útil?". Si bien el concepto "útil" es sumamente difícil de especificar aplicarlo de forma genérica a todas las páginas web (por ende, no existe una todavía), es bastante fácil para los desarrolladores web saber las partes de sus páginas que serán más útiles para los usuarios. Métricas de Perfomance que responden a la realidad de los usuarios FMP & HERO
  23. 23. Los elementos Hero responden al propósito de la página. Casi siempre, las páginas web tienen partes más importantes que otras. Si las importantes de una página se cargan de forma rápida, es posible que el usuario note que el resto de la página no se carga. Métricas de Perfomance que responden a la realidad de los usuarios FMP & HERO
  24. 24. Tiempo hasta que es interactiva La métrica Tiempo hasta que es interactiva (TTI) indica el punto en el que la que la aplicación se representa visualmente y es capaz de responder de forma de forma confiable a una entrada del usuario. Es posible que una aplicación no aplicación no pueda responder a una entrada del usuario por diversos motivos: •Todavía no se cargó el JavaScript necesario para que los componentes en la página funcionen. •Existen tareas largas que bloquean el subproceso principal (como se describe en la última sección). La métricaTTI identifica el punto en el que se carga el JavaScript inicial de la página y se inactiva el subproceso principal (sin tareas largas). Métricas de Perfomance que responden a la realidad de los usuarios TTI
  25. 25. Tareas largas Los navegadores agregan tareas a una cola en el subproceso principal para ejecutarlas una por una. En algunos casos, estas tareas pueden demorar más tiempo en ejecutarse y, si eso sucede, el subproceso principal se bloquea y el resto de las tareas en la cola deben esperar. La API LongTasks identifica las tareas de más de 50 ms de duración como potencialmente problemáticas y las expone al desarrollador de aplicaciones. Se seleccionó la duración de 50 ms para que las aplicaciones cumplan con las pautas de RAIL de responder a una entrada del usuario en 100 ms. Métricas de Perfomance que responden a la realidad de los usuarios
  26. 26. ¿Cuánto pesan estas métricas en las auditorías? Scoring Details ¿Como se calculan? Distribución derivada de métricas reales de perfomance de sites del HTTPArchive. Los top performers del First Meaningful Paint (FMP) en HTTPArchive renderizan en 1,220ms así que ese valor es el quivalente de un score de Lighthouse de 99.
  27. 27. ¿Cómo se clasifican estos resultados? •0 to 49 (lento): Rojo •50 to 89 (medio): Naranja
  28. 28. Optimización de la ruta de acceso de representación crítica ¿Cómo optimizar estas métricas? Optimización del ahorro del contenido
  29. 29. Evolución bytes descargados en la Web 2013-14 Optimización del ahorro del contenido Diferentes cuantiles dentro de la distribución: 50
  30. 30. Optimización del ahorro del contenido Eliminación de descargas innecesarias Optimizar encoding y tamaño de transferencia de activos Optimización de imágenes Automatizar la optimización de imágenes Reemplazar GIFs animados por videos Optimización de arranque de Javascript Carga de JS de terceros Optimización Web Fonts Almacenamiento de caché en HTTP Uso de los Client Hints Uso del header Save-Data
  31. 31. Eliminación de descargas innecesarias Análisis e inventario de los recursos propios y de terceros (p.e.script testing) ¿Podemos calcular su valor? ¿Cuándo se usan? Mide el rendimiento de cada recurso. ¿Se encuentra, o debe encontrarse en la ruta de acceso crítica? Si el recurso no está disponible, ¿afectará el rendimiento y la experiencia del usuario en tus páginas? ¿Sigue este recurso las prácticas recomendadas de rendimiento (compresión, almacenamiento en caché, etc.)? Los recursos más rápidos y más optimizados son aquellos que no se envían. Foco en el análisis individual
  32. 32. Optimizar encoding y tamaño de transferencia de activos Aplicar optimizaciones específicas por contenido: minificadores CSS, JS y HTML. Aplicar GZIP para comprimir el resultado minificado.
  33. 33. Optimización de imágenes Quick Wins Eliminar recursos de imagen innecesarios (EXIF) Aprovechar los efectos CSS3 cuando sea posible Usar fuentes web en lugar de codificar texto en las imágenes Las imágenes siguen siendo la causa número uno de los archivos de tamaño excesivo en la Web. Según HTTP Archive, el 60% de los datos transferidos para obtener una página web son imágenes compuestas de archivos JPEG, PNG y GIF. ¿Existe el equilibrio?
  34. 34. Automatizar la optimización de imágenes JPEG – JPEG Progresivo – Codificadores JPEG – MOZJPEG – GUETZLI – BUTTERAUGLI – WEB ¡Automatización es solución eficaz! Las prácticas recomendadas cambian y el contenido que no pasa por una canalización de compilación puede omitirse fácilmente. Compilación: imagemin o libvps La mayoría de los CDN (p.ej., Akamai) y soluciones de terceros como Cloudinary, imgix, Image Optimizer de Fastly, SmartVision de Instart Logic o la API ImageOptim ofrecen una optimización de imágenes automatizada. Es más baratos pagar por estos servicios que dedicar el tiempo necesario y adaptarse a las best practices.
  35. 35. Automatizar la optimización de imágenes Presupuestos de rendimiento web para imágenes, nueva métrica SEO? Un presupuesto de rendimiento es un "tope" para el rendimiento de páginas web que un equipo intenta no superar: "las imágenes no superarán los 200 KB en ninguna página“. Calibreapp Speedcurve
  36. 36. Reemplazar GIFs animados por videos
  37. 37. Optimización de arranque de Javascript Si eliminas el código JavaScript que no es esencial de tus páginas, puedes reducir los tiempos de trasmisión, las operaciones de análisis y compilación que hacen uso intensivo de la CPU, y una potencial sobrecarga de la memoria. Esto también ayuda a que tus páginas sean interactivas más rápido.
  38. 38. Optimización de arranque de Javascript El tamaño de transmisión es esencial en las redes de baja gama. El tiempo de análisis es importante para dispositivos con limitaciones de CPU. Es importante mantener estos valores bajos.
  39. 39. Carga de JS de terceros Botones de compartir Videos embebidos Iframes de publicidad Scripts de analítica Scripts de A/B Otras librerías
  40. 40. Evaluación del impacto de los scripts: - Medimos el tiempo de carga usando el panel de red de chrome - Creamos perfiles de red que respondan a las condiciones de nuestros usuarios más communes (Network/CPU) - Bloqueamos scripts de terceros y comparamos tiempo de carga Carga de JS de terceros
  41. 41. Optimización scripts de terceros - Usar atributos async o defer para evitar que se bloquee la carga. - Analizar opciones de hostear el script para ver si mejora Perfomance. - ¿Es posible eliminar el script? - Utilizar <link rel=preconnect> o <link rel=dns-prefetch> cuando sea posible para disminuir la latencia. Carga de JS de terceros ¿Existe el equilibrio?
  42. 42. Es normal
  43. 43. Optimización Web Fonts Selecciona fuentes que contengan los grupos e caracteres admitidos que necesitas en función del contenido y los idiomas que vayas a utilizar, y nada más . la familia de fuentes Noto de Google apunta a admitir todos los idiomas del mundo y su tamaño total del archivo ZIP pesa más de 1,1 GB.
  44. 44. Optimización Web Fonts Audita y controla el uso de fuentes - Formatos WOFF2, WOFF, EOT y TTF - GZIP para EOT y TTF ya que no lo hacen de forma predeterminada - Prioriza local() en la lista src para evitar solicitudes HTTP - Divide en distintos intervalos Unicode para proporcionar solo los glifos necesarios para una página determinada. - Aplica optimizaciones para la reutilización de las fuentes; por ejemplo según el tipo de fuente; por ejemplo, latino, cirílico, etc. - Especifica max-age para la caché - Utiliza la carga progresiva con <link rel="preload">, font- display o la API Font Loading
  45. 45. Encabezados Etag “304 Not Modified” HTTP Cache- Almacenamiento en caché Desde el punto de vista de la optimización del rendimiento, la mejor solicitud es aquella que no necesita comunicarse con el servidor.
  46. 46. Encabezados optativos que nos dan datos sobre el dispositivo y la red que utilizan nuestros usuarios. Son un método de negociación del contenido, lo que provoca que adaptemos el mismo en función de la respuesta del navegador. Uso del Accept header que describe que tipos de contenido entiende el navegador, por lo que podemos ofrecerle esos. Uso del header Save-Data, que en navegadores soportados permite aplicar optimizacionse para reducir los datos necesarios para el renderizado. Client Hints
  47. 47. Optimización de la ruta de acceso de representación crítica
  48. 48. Optimización de la ruta de representación crítica - CRP CRP habilita al navegador cargar una página lo más rápido posible al priorizar qué recursos se cargan y el orden en el que se cargan. LEAN LOADING
  49. 49. CRP carga HTML, CSS y JavaScript. DOMContentLoaded. Optimización de la ruta de representación crítica - CRP
  50. 50. Perfomance = Percepción = Carga Progresiva
  51. 51. Eduardo Garolera edu@digitalgrowth.io @egarolera

×