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.

1. Dominios · Alojamiento web · Correo ·
SSL
El tiempo de carga web
Relevancia, Mitos y Recomendaciones

2. ¿Quienes somos?
Xavier Idevik
Director de Marketing en DonDominio.
Jose Roig
Consultor de SEO y Analítica Digital en Ikaue.
#404summit

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. ¿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. ¿Qué se suele entender por
tiempo de carga web?
#404summit

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. 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. 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. Un caso de estudio
#404summit

10. Un caso de estudio
#404summit
Debido a ello surgió lo
que se llama WPO
(Web Performance Optimization)

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. 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. Y no olvidemos
que también
mejoramos
tiempo para
evitar esto
#404summit

14. Pero hablar de
tiempo de carga
es muy amplio,
profundicemos un poco
#404summit

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. 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. 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. 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. 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. 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. Percepción en una carga lenta
Abro el navegador y accedo a esta página
que parece interesante
#404summit

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. 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. 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. 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. Sabemos como va la carga a
grandes rasgos,
¿Pero sabéis cual debe ser
vuestro objetivo en tiempo de
carga?
#404summit

27. Se suele decir cosas como…
3s 2s(Ecommerce)
#404summit

28. Se suele decir cosas como…
3s 2s(Ecommerce)
Esto solo son límites
que se recomienda no
sobrepasar

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. 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. 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. 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. 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. 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. 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. 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. En este caso usaremos estas
Google
Lighthouse
#404summit

38. En este caso usaremos estas
Google
Lighthouse
#404summit

39. En adelante un ejemplo de
análisis de tiempo y sobre él
ideas de optimización del
Tiempo de carga
#404summit

40. Sobre la optimización de tiempo
Optimizar el tiempo no
consiste en obtener un
100/100 en PageSpeed
Insights
#404summit

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. 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. Vamos a ver como es el
tiempo de carga de esta url:
http://www.rtjose.com
#404summit

44. #404summit

45. Al introducirla en Pingdom Tools
#404summit

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. Analizando las peticiones y su peso
#404summit

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. 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. 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. 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. 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. 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. Por si os estáis
preguntando si HTTP/2
es la solución en SEO a un
gran número de peticiones
#404summit

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. 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. 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. 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. Pero volvamos a la revisión
de la página con
Pingdom Tools y veamos como
responde el servidor
#404summit

60. A nivel de respuesta del servidor
#404summit

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. 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. 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. 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. 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. 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. 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. Contrastad varias herramientas
Aunque en algunos casos da
menos datos que Pingdom
Tools, suele dar
recomendaciones relevantes.
#404summit

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. 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. 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. 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. Métricas generales de tiempo
#404summit

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. 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. 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. 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. 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. 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. 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. Y para cerrar unas reflexiones
#404summit

82. En SEO el
tiempo de
carga no es un
factor más, es
muy importante
y cada vez más
#404summit

83. Además
mejorarlo tiene
un impacto
positivo directo
sobre la
experiencia de
usuario
#404summit

84. Así que no lo
dudes, trabaja
el tiempo de
carga y mejora
con ello tus
resultados
#404summit

85. #404summit

86. Dominios · Alojamiento web · Correo ·
SSL
¡Gracias a tod@s!
#404summit