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.

404summit - El Tiempo de Carga, relevancia, mitos y recomendaciones

257 views

Published on

Charla del 404summit del 23/9/2019. En esta charla hablaremos de la importancia del tiempo de carga en 2019, desmitificaremos algunas ideas sobre el tiempo de carga, y sobre un caso concreto, daremos recomendaciones de como mejorar el tiempo de carga de una página.

Published in: Internet
  • (Unlimited)....ACCESS WEBSITE Over for All Ebooks ................ accessibility Books Library allowing access to top content, including thousands of title from favorite author, plus the ability to read or download a huge selection of books for your pc or smartphone within minutes ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Full PDF EBOOK here { http://bit.ly/2m6jJ5M }
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

404summit - El Tiempo de Carga, relevancia, mitos y recomendaciones

  1. 1. Dominios · Alojamiento web · Correo · SSL El tiempo de carga web Relevancia, Mitos y Recomendaciones
  2. 2. ¿Quienes somos? Xavier Idevik Director de Marketing en DonDominio. Jose Roig Consultor de SEO y Analítica Digital en Ikaue. #404summit
  3. 3. ¿Qué es DonDominio? DonDominio es una empresa ubicada en Mallorca que ofrece servicios de registro de dominios, alojamiento web y certificados SSL, todo lo necesario para poder tener una web online. Fundada el año 2007, inicialmente se centró en la venta de dominios, ampliando después la oferta a planes de alojamiento web / correo y certificados SSL. En la actualidad gestiona más de 350.000 dominios de 130.000 clientes. #404summit
  4. 4. ¿Qué es Ikaue? Consultoría y servicios de Marketing Online, especializados en SEO, Analítica Digital y CRO. Trabajamos desde las Baleares (2 oficinas, una en Mallorca y otra en Ibiza) y ejercemos en toda España, aunque nuestra actividad se centra en Madrid y España. La empresa aunque se fundó en 2016, lleva ejerciendo desde 2012 y seguimos con el mismo espíritu que el primer día, ser cercanos, realmente útiles y centrarnos en proyectos que podamos ayudar y hacer crecer a nuestros clientes. #404summit
  5. 5. ¿Qué se suele entender por tiempo de carga web? #404summit
  6. 6. Tiempo de carga web Dice ser del tiempo que transcurre entre la acción de acceder a una página hasta el momento en que su contenido está disponible #404summit
  7. 7. Situaciones relacionadas con la carga La página se queda en blanco La página parece cargada pero hay muchas cosas que aún no funcionan Se han cargado elementos, pero muchos otros no parecen cargarse o avanzar Hay mensajes de cargando que no parece acabar nunca #404summit
  8. 8. Motivos por lo que optimizar el tiempo 57% de usuarios abandonan el site tras 3s de carga De los que abandonan no vuelve el 80% 50% de los que abandonan no hablaran bien del site #404summit
  9. 9. Un caso de estudio #404summit
  10. 10. Un caso de estudio #404summit Debido a ello surgió lo que se llama WPO (Web Performance Optimization)
  11. 11. En SEO cada vez importa más “So we do say we have a small factor in there for pages that are really slow to load where we take that into account.” John Mueller, Google 2015 “Make sure they [web pages] load fast, for your users. I aim for less than 2-3 secs” John Mueller, Google “For Googlebot a speedy site is a sign of healthy servers, so it can get more content over the same number of connections…” Google “[Google is] announcing that starting in July 2018, page speed will be a ranking factor for mobile searches…” Google 2016 2017 2018 #404summit
  12. 12. Y en 2019 más que nunca Especialmente en Mobile Speed improves your ability to rank well in search engines, the likelihood someone will amplify your work, the reach of your pages to those with slower connections, the percent of visitors who won’t hit that back button… Rand Fishkin, Spark Toro 2019 2019 will be the year of page speed for every business marketing online. Companies that can deliver lightning-fast user experiences will see a first-mover advantage—better Quality Scores, higher ad rank, and more leads and sales. Ryan Engley, Unbounce Web pages don’t have loading bars. So when the page is slow, the visitor doesn’t know if the delay will be another 500 milliseconds or 15 seconds. Maybe it will never load. And the back button is right there. Andy Crestodina, Orbit Media #404summit
  13. 13. Y no olvidemos que también mejoramos tiempo para evitar esto #404summit
  14. 14. Pero hablar de tiempo de carga es muy amplio, profundicemos un poco #404summit
  15. 15. Tiempo de respuesta del servidor Tiempo hasta que se empieza a ver la página Tiempo hasta que se puede utilizar la página Tiempo de carga completa de la página ¿Cual crees que es más importante? #404summit
  16. 16. Tiempo de respuesta del servidor Tiempo hasta que se empieza a ver la página Tiempo hasta que se puede utilizar la página Tiempo de carga completa de la página ¿Cual crees que es más importante? La realidad es que todos lo son
  17. 17. Esto es crucial para una carga rápida. Visualizar una página requiere cargar muchos elementos, si el servidor responde lento, el tiempo de respuesta puede multiplicarse por tantos elementos tenga la página suponiendo un tiempo mucho mayor. Tiempo de respuesta del servidor Cada uno afecta de distinta forma #404summit
  18. 18. Todo el tiempo en que la página esté en blanco, es tiempo en que el usuario no ve cambios y puedes perderle. Por ello hay que empezar a mostrarle que la página se carga tan pronto se pueda. Tiempo hasta que se empieza a ver la página Cada uno afecta de distinta forma #404summit
  19. 19. Aunque empieces a mostrar pronto la página, si la página tarda mucho en poder consumirse hace que el usuario se pueda frustrar e irse. Tiempo hasta que se puede utilizar la página Cada uno afecta de distinta forma #404summit
  20. 20. Este curiosamente es el menos relevantes, pues hay muchos elementos que se cargan al final y que no tiene que ser imprescindibles para el usuario, pero también hay que tenerlos en cuenta (contenidos complementarios, analítica web, botones de compartir en redes, etc). Tiempo de carga completa de la página Cada uno afecta de distinta forma #404summit
  21. 21. Percepción en una carga lenta Abro el navegador y accedo a esta página que parece interesante #404summit
  22. 22. Percepción en una carga lenta Se empieza a ver ¿Por qué la página esta tanto tiempo en blanco? Respuesta servidor Se empieza a ver la página #404summit
  23. 23. Percepción en una carga lenta Se empieza a ver Se puede usar ¿Por qué la página esta tanto tiempo en blanco? ¿Por qué no puedo usarla pese a que ya veo contenido? Respuesta servidor Se empieza a ver la página Tiempo hasta poder usar la página #404summit
  24. 24. Percepción en una carga lenta Se empieza a ver Se puede usar Carga completa ¿Por qué la página esta tanto tiempo en blanco? ¿Por qué no puedo usarla pese a que ya veo contenido? Puedo usar la página, aunque parece hubiera cosas que siguen sin cargarse Respuesta servidor Se empieza a ver la página Tiempo hasta poder usar la página Tiempo hasta que se ha cargado todo #404summit
  25. 25. En SEO la carga lenta afecta así… Pierdes capacidad de indexación por un menor rastreo Peores posiciones en los rankings Desaprovechas tráfico porque se cansan de esperar #404summit
  26. 26. Sabemos como va la carga a grandes rasgos, ¿Pero sabéis cual debe ser vuestro objetivo en tiempo de carga? #404summit
  27. 27. Se suele decir cosas como… 3s 2s(Ecommerce) #404summit
  28. 28. Se suele decir cosas como… 3s 2s(Ecommerce) Esto solo son límites que se recomienda no sobrepasar
  29. 29. Muchas páginas necesitan más tiempo Un ejemplo con el que trabajamos (página con ofertas de vuelos): Se empieza a ver Se puede usar +1,5s +1s +2,5s Una media de unos 5s Disponibilidad obtenida por API #404summit
  30. 30. Tu objetivo en tiempo debería ser… Esta es tu web Esta es tu competencia en SEO 4 Loading speed 2 Loading speed 3 Loading speed 1 Loading speed #404summit
  31. 31. Tu objetivo en tiempo debería ser… Esta es tu web Esta es tu competencia en SEO 1 Loading speed 3 Loading speed 4 Loading speed 2 Loading speed #404summit
  32. 32. Tu objetivo en tiempo debería ser… Esta es tu web Esta es tu competencia en SEO 1 Loading speed 3 Loading speed 4 Loading speed 2 Loading speed Y no deberías pararte ahí, deberías seguir intentando mejorar
  33. 33. Es importante saber como compararse Ya estoy mejor en tiempo que mi competencia Home 1 Loading speed Tu site Competencia SEO Home 2 Loading speed #404summit
  34. 34. Es importante saber como compararse Ya estoy mejor en tiempo que mi competencia Home 1 Loading speed Tu site Competencia SEO Home 2 Loading speed #404summit
  35. 35. Es importante saber como compararse Hay que saber como estamos para cada una de nuestras tipologías principales Home 1 Loading speed Tu site Competencia SEO Cats. 2 Loading speed Ficha 2 Loading speed Home 2 Loading speed Cats. 1 Loading speed Ficha 1 Loading speed #404summit
  36. 36. Es importante saber como compararse Hay que saber como estamos para cada una de nuestras tipologías principales Home 1 Loading speed Tu site Competencia SEO Cats. 2 Loading speed Ficha 2 Loading speed Home 2 Loading speed Cats. 1 Loading speed Ficha 1 Loading speed Procura también que las páginas comparadas tengan una semántica similar
  37. 37. En este caso usaremos estas Google Lighthouse #404summit
  38. 38. En este caso usaremos estas Google Lighthouse #404summit
  39. 39. En adelante un ejemplo de análisis de tiempo y sobre él ideas de optimización del Tiempo de carga #404summit
  40. 40. Sobre la optimización de tiempo Optimizar el tiempo no consiste en obtener un 100/100 en PageSpeed Insights #404summit
  41. 41. Sobre la optimización de tiempo Al optimizar tiempo hay factores sobre los que no tenemos control y que afectan: 1. Velocidad de la red del usuario 2. Carga de servicios externos 3. Navegador y su config. #404summit
  42. 42. Sobre la optimización de tiempo Tiempo de carga de los usuarios de tu site (Alemania) Tiempo de carga desde tu ordenador (España) 3,2s 4,1s Es mejor que pienses en el tiempo de carga de tus usuarios antes que en el tuyo #404summit
  43. 43. Vamos a ver como es el tiempo de carga de esta url: http://www.rtjose.com #404summit
  44. 44. #404summit
  45. 45. Al introducirla en Pingdom Tools #404summit
  46. 46. En cifras generales El tiempo no parece alto, al menos en relación a las 0,9s de media en homes de otros blogs similares El número de ficheros solicitados aunque no es alto, podría reducirse por lo que conviene revisarlo Vista la media de otros blogs en home de 850KB parece una cifra buena, así y todo interesa ver si se puede reducir #404summit
  47. 47. Analizando las peticiones y su peso #404summit
  48. 48. Analizando las peticiones y su peso Mirando estos datos queremos valorar: • Si hay muchas peticiones de un recurso, intentaremos reducirlas (cada petición supone una suma de tiempo de proceso de la petición) • Si un recurso es muy pesado (mucho peso supone mayor tiempo de transferencia), intentaremos reducir su peso. #404summit
  49. 49. Analizando las peticiones y su peso En caso de que las imágenes supongan un peso importante: • Ver si se carga su tamaña en función del dispositivo. • Ver si puede ser recomendable usar una CDN (Content Delivery Network). #404summit
  50. 50. Analizando las peticiones y su peso En caso de pesar las fuentes: • Ver si se usan varias y si se puede prescindir de alguna de ellas. • De las fuentes que sea obligatorio cargar, eliminar sus caracteres innecesarios. #404summit
  51. 51. Analizando las peticiones y su peso Si hay numerosas imágenes: • Ver si se parte de ellas pueden ser cargadas de forma asíncrona. • Si son imágenes de iconos, logos o similares, ver si pueden ser cargadas con una petición en un único fichero (técnica CSS de Sprites). #404summit
  52. 52. Analizando las peticiones y su peso Si se cargan ficheros CSS y JS: • Si todos son de tu dominio, ver si se pueden unir en los mínimos ficheros posibles. • Ver si los ficheros CSS y JS tienen muchos caracteres innecesarios (saltos de líneas, comentarios, espacios sobrantes, etc) y minimizarlos. • Ver que en cada página solo se cargue el código JS y CSS que necesite la página. #404summit
  53. 53. Analizando las peticiones y su peso Si hay muchas redirecciones: • Dado que suponen carga extra de rastreo para el robot, hay que tratarlas. • Por lo tanto si las redirecciones son de tu dominio, sustituye los enlaces con urls redireccionadas y pon las finales. #404summit
  54. 54. Por si os estáis preguntando si HTTP/2 es la solución en SEO a un gran número de peticiones #404summit
  55. 55. Funcionamiento HTTP/2 En HTTP 1.1 por petición hay 1 fichero y en HTTP/2 puede haber muchos ficheros por petición #404summit
  56. 56. Sobre HTTP/2 y el SEO Tu web Usuario Googlebot Que se sepa Google no usa HTTP2 AÚN, pero como mejora la experiencia de usuario y Google lo premia, se vuelve un beneficio indirecto. HTTP/2 HTTP 1.1 #404summit
  57. 57. Sobre HTTP/2 y el SEO Tu web Usuario Googlebot Que se sepa Google no usa HTTP2 AÚN, pero como mejora la experiencia de usuario y Google lo premia, se vuelve un beneficio indirecto. HTTP/2 HTTP 1.1 Por lo tanto implementad HTTP/2 pero no olvides optimizar HTTP 1.1.
  58. 58. Sobre HTTP/2 y el SEO Tu web Usuario Googlebot Que se sepa Google no usa HTTP2 AÚN, pero como mejora la experiencia de usuario y Google lo premia, se vuelve un beneficio indirecto. HTTP/2 HTTP 1.1 Y no te compliques la vida, busca un hosting que por defecto tenga HTTP2 como hace DonDominio
  59. 59. Pero volvamos a la revisión de la página con Pingdom Tools y veamos como responde el servidor #404summit
  60. 60. A nivel de respuesta del servidor #404summit
  61. 61. A nivel de respuesta del servidor Tiempo que tarda el navegador en convertir la url en IP Este tiempo aunque no suele ser alto, conviene buscar un hosting el cual te provea de algún sistema para reducirlo al áximo. Por ejemplo en los hosting de DonDominio cuentan con un servicio de “DNS Anycasta”, el cual genera copias del servidor DNS en diversas localizaciones, permitiendo redirigir al usuario al servidor DNS más cercano con las correspondiente reducción de tiempo. #404summit
  62. 62. A nivel de respuesta del servidor Tiempo que tarda el navegador en realizar la conexión SLL, en conectar con el servidor y en enviar la petición Estos dependen en gran medida del usuario (línea, localización , etc) y difícilmente se puede actuar sobre ellos. #404summit
  63. 63. A nivel de respuesta del servidor Este es el tiempo que propiamente el servidor tarda en responder Google dice que esté por debajo de 1.3s, pero hay que intentar bajarlo al máximo: • No cojas el hosting más barato, coge el que mejor se adapte a ti y mejores prestaciones de aunque te sea más dinero. • Aprovecha la caché del navegador e indica en tu programación que un recurso puede ser cacheado al menos durante una semana. • Aprovecha la caché de página, si varias personas solicitan la misma url y esta no ha cambiado, dales la página cacheada y evita generarla de nuevo. #404summit
  64. 64. A nivel de respuesta del servidor Tiempo de bloqueo Si vemos que en Pingdom Tools hay muchos recursos con un tiempo alto de bloqueo, es porque se solicitan muchos de ellos y esto genera cuellos de botella. Para esto procuremos reducir el número de recursos que se solicitan. #404summit
  65. 65. En Mobile puede ayudar AMP Accelerated Mobile Pages Es un servicio de Google el cual permite maquetar páginas Mobile con un sublenguaje ligero de HTML y cargarlas de forma mucho más rápida desde sus servidores. #404summit
  66. 66. En Mobile puede ayudar AMP Accelerated Mobile Pages Es un servicio de Google el cual permite maquetar páginas Mobile con un sublenguaje ligero de HTML y cargarlas de forma mucho más rápida desde sus servidores. Pero no todas las páginas se pueden convertir en AMP, si tienen mucha interactividad seguramente no puedas
  67. 67. Recomendaciones de la herramienta Te da algunas ideas de por donde tirar. Hay que centrarse en lo que mayor mejora de y luego si hay tiempo y es viable, trabajad el resto. #404summit
  68. 68. Contrastad varias herramientas Aunque en algunos casos da menos datos que Pingdom Tools, suele dar recomendaciones relevantes. #404summit
  69. 69. Hemos visto como optimizar el tiempo de carga de los ficheros, ahora veamos como optimizar el tiempo que tarda la página en poder usarse #404summit
  70. 70. Vamos a usar Google Lighthouse Simplemente presionad botón derecho sobre la página, seleccionad inspeccionar y de las pestañas escoged la de “audits”. #404summit
  71. 71. Vamos a usar Google Lighthouse Simplemente presionad botón derecho sobre la página, seleccionad inspeccionar y de las pestañas escoged la de “audits”. Una recomendación, cuando los uséis hacedlo en una pestaña de incognito, pues plugins y extensiones instaladas le afectan
  72. 72. Resultados generales En este caso el indicador que nos interesa es solo el de rendimiento y nos da una buena puntuación, pero vamos a clicar sobre él y profundizar Clic aquí #404summit
  73. 73. Métricas generales de tiempo #404summit
  74. 74. Métricas generales de tiempo Tiempo hasta el pintado del primer elemento Un tiempo alto significa un pobre rendimiento del servidor y su envió de archivos, y/o un fichero HTML con demasiado código incrustado (CSS o JS). Para tratarlo hay que optimizar el tiempo de respuesta del servidor y reducir código incrustado. #404summit
  75. 75. Métricas generales de tiempo Primer pintado representativo Tiempo hasta que el contenido principal, el que en su mayor parte está “Above the fold”, es visible. Un tiempo alto significa que la ruta de visualización no está optimizada. Para mejorarlo centra esfuerzos en cargar lo que de debe ver inicialmente y el resto a medida que se solicite. #404summit
  76. 76. Métricas generales de tiempo Índice de velocidad Momento en que todo el contenido tanto el que se ve inicialmente como el resto, se ha cargado. Una diferencia grande entre este valor y el primer pintado representativo, puede significar demasiados recursos cargados en cuyo caso habría que tratar de reducir los que se carguen #404summit
  77. 77. Métricas generales de tiempo Interactividad inicial Tiempo hasta que la página permite empezar a interactuar con algunos de los elementos principales. Un tiempo alto significa que hay muchos recursos que bloquean el uso de la página. En dicho caso hay que cargar los que no sean críticos de forma asíncrona. #404summit
  78. 78. Métricas generales de tiempo Interactividad total Tiempo hasta que todos los recursos interactivos pueden ser utilizados. Si el tiempo entre la 1ª interactividad y la total varia mucho, puede significar muchos recursos cargados de forma asíncrona y lentos. Habría que tratar de acelerarlos o priorizar la carga de los importantes. #404summit
  79. 79. Métricas generales de tiempo Tiempo de respuesta en 1a interacción Tiempo desde que un usuario interacciona con un elemento hasta que el navegador reacciona. Si es alto, significaría mucho código cargado/ejecutándose lo que retrasa la respuesta del navegador. En dicho caso habría que tratar de reducir/optimizar el código (especialmente JS). #404summit
  80. 80. Recomendaciones de la herramienta Lo mismo que con la herramienta anterior, intentad centraros en los mayores problemas, si quedan tiempo y es viable, luego trabajad el resto. #404summit
  81. 81. Y para cerrar unas reflexiones #404summit
  82. 82. En SEO el tiempo de carga no es un factor más, es muy importante y cada vez más #404summit
  83. 83. Además mejorarlo tiene un impacto positivo directo sobre la experiencia de usuario #404summit
  84. 84. Así que no lo dudes, trabaja el tiempo de carga y mejora con ello tus resultados #404summit
  85. 85. #404summit
  86. 86. Dominios · Alojamiento web · Correo · SSL ¡Gracias a tod@s! #404summit

×