La importancia de la velocidad de carga del sitio web

Velocidad de carga web

Imagen de Gerd Altmann en Pixabay

La velocidad de carga es uno de los pilares básicos sobre los que debe asentarse cualquier proyecto web. Al tratarse de la primera variable que va a ser percibida por el usuario, el desarrollador debe prestar especial atención a sus valores ya que, si son elevados, pueden dificultar el acceso a la web, dejando la puerta abierta al abandono de la misma.

No puedes pretender ser el número uno si tu sitio se mueve demasiado lento!

Cómo afecta la velocidad de carga a la tasa de rebote

En 2016 Ericsson publicó un  estudio en el que revelaba el impacto que pueden ocasionar los diferentes niveles de rendimiento de la red en los usuarios de  smartphones y sus percepciones sobre los operadores móviles y proveedores de contenido digital.

Para medir de manera objetiva las respuestas emocionales ante diferentes experiencias con smartphones durante el estudio se utilizó la Neurotecnología.  Los resultados fueron demoledores: las demoras o retrasos en cargar videos y páginas web bajo presión de tiempo, causaron que usuarios de móviles incrementarán su ritmo cardíaco en un promedio de 38%. Seis segundos de demora en la transmisión de video ocasionó niveles de estrés que se incrementaron en un tercio. Para contextualizar lo mencionado anteriormente, el estrés en el que se incurre equivale a la ansiedad que se genera al afrontar un examen matemático o ver solo una película de terror, e incluso mayor que el nivel de estrés experimentado al estar parado al borde de un acantilado virtual. Una vez que el video empieza, una pausa adicional puede ocasionar que los niveles de estrés se incrementen de manera dramática.

Tomando en consideración estos apuntes acerca del comportamiento humano y  teniendo presente que la mayor parte de los usuarios de Internet  utilizan el móvil para acceder a la web – muchos de ellos desde redes móviles LTE, 4G, 3G e incluso 2G-,  debemos pensar que  tolerarán aplicaciones de bajo rendimiento durante breve espacio de tiempo antes de abandonarlas.

Realidad o mito

Sobre la velocidad de carga se ha escrito largo y tendido, siendo uno de los aspectos más controvertidos el que hace referencia a la supuesta «gran importancia» que los motores de búsqueda, particularmente Google, otorgan a este parámetro para determinar qué sitios web serán mostrados en la parte superior de las páginas de resultados. Personalmente creo que son otros factores los que hacen que una página aparezca mejor o peor posicionada, no obstante los sitios de alto rendimiento atraen y retienen a los usuarios mejor que los de bajo rendimiento lo que indirectamente, repercute a la larga en su posicionamiento.
Si buscamos  diferentes palabras clave en cualquiera de los buscadores disponibles y realizamos unas cuantas mediciones observaremos que el peso de  la velocidad de carga, es poco menos que anecdótico.

Vamos a ello…

Prueba de velocidad/Posicionamiento

En la actualidad disponemos de una amplia gama de herramientas con las que comprobar estas y otras muchas variables; en el caso que nos ocupa utilizaremos la extensión de Chrome Lighthouse y las páginas WebPageTest o Pingdom Website Speed Test

Palabra clave: catedral de ourense.
Muestra:
A) Catedral de San Martín | Turismo de Ourense -> Posicion de búsqueda:3
B) Catedral de Ourense – Spain.info -> Posicion de búsqueda:35
C) La Catedral de Ourense, una visita obligada – Círculo Galego -> Posicion de búsqueda:48

Test en WebPageTest

Resultados prueba en móvil Motorola 4G con Chrome

First Byte
A) 3.417s
B) 1.988s
C) 2.257s

Vemos que las tres páginas analizadas tienen valores elevados de TTFB. Esto puede provocar que los usuarios abandonen la página antes de que termine de cargar. Curiosamente la que más alto tiene este marcador es la que aparece más arriba en los resultados de búsqueda.

Start Render
A) 5.100s
B) 3.800s
C) 3.000s

Start render mide la velocidad con la que se presenta el primer elemento en la ventana gráfica. Puede ser solo un fondo, una imagen o un fragmento de texto. Esta variable está directamente relacionada con la percepción de velocidad de carga.
Como vemos, nuevamente la página mejor situada en la página de búsqueda es la que obtiene peores resultados.

First Contenful Paint
A) 5.062s
B) 3.756s
C) 2.902s

First Contenful Paint mide la velocidad con la que se representan por primera vez en la pantalla, el texto o los gráficos.
La página mejor parada en este caso es la peor situada en la página de busquedas.

Speed Index
A) 5.949s
B) 5.370s
C) 3.510s

Speed Index mide la rapidez con la que se muestra visualmente el contenido superior de la página durante la carga.

Largest Contenful Paint
A) 6.593s
B) 6.432s
C) 2.945s

Mide la velocidad con la que se hace visible el elemento de contenido más grande en la ventana de visualización.

Cumulative Layout Shift
A) 0.277
B) 1.111
C) 0.004

Cumulative Layout Shift mide cuántos cambios repentinos experimenta una página durante su carga. Por ejemplo, si un visitante abre una página y mientras la esta leyendo, se carga una imagen desplazandola hacia abajo, eso constituiría una puntuación CLS alta.

Total Blocking Time
A) ≥2.679s
B) ≥1.466s
C) ≥2.819s

Total Blocking Time, mide la cantidad total de tiempo durante el que una página está bloqueada sin responder a interacciones del usuario, tales como clics del ratón, toques de la pantalla o pulsaciones del teclado.

Total Bytes
A) 2,434 KB
B) 2,711 KB
C) 503 KB

En esta primera prueba vemos como la página A es la que cosecha los peores resultados, mientras que su poco peso facilita que, en conjunto, la C sea la más rápida.

Resultados prueba en PC + Cable + Chrome

First Byte
A) 2.846s
B) 0.277s
C) 2.500s
Start Render
A) 3.500s
B) 1.400s
C) 2.700s
First Contenful Paint
A) 3.360s
B) 1.298s
C) 2.671s
Speed Index
A) 4.753s
B) 4.212s
C) 2.707s
Largest Contenful Paint
A) 5.945s
B) 4.113s
C) 3.184s
Cumulative Layout Shift
A) 0.01
B) 1.009
C) 0.001
Total Blocking Time
A) 0.266
B) 0.003s
C) 0s
Total Bytes
A) 2,585 KB
B) 2,864 KB
C) 503 KB

Al igual que en la anterior prueba, la opción A es la obtiene los peores resultados. La opción B es la que sale mejor parada en conjunto.

Test Pingdom Website Speed Test

Resultados prueba en móvil Motorola 4G con Chrome

Performance grade
A) 71
B) 67
C) 85
Load Time
A) 2.71
B) 1.61
C) 3.1s
Requests
A) 93
B) 80
C) 27
Page Size
A) 4.5MB
B) 3 MB
C) 836.5KB

Los resultados con Pingdom son parejos, si bien la opción C ofrece el mejor tiempo de carga.

Test en Lighthouse

Resultados prueba en móvil

Rendimiento
A) 12
B) 9
C) 75
First Contenful Paint
A) 3.2s
B) 3s
C) 2.6s
Time to Interactive
A) 9.9s
B) 14.6s
C) 3.9s

La métrica TTI mide el tiempo que transcurre desde que se inicia la carga de la página hasta que se cargan sus principales recursos secundarios y es capaz de responder de manera confiable y rápidamente a una entrada del usuario.

Speed Index
A) 7.0s
B) 9.2s
C) 6.2s
Total Blocking Time
A) 4740ms
B) 2330ms
C) 220ms
Largest Contenful Paint
A) 14.8s
B) 12.5s
C) 3.7s
Cumulative Layout Shift
A) 0.555
B) 1.02
C) 0.004

En conjunto la opción C es la que obtiene mejores resultados.

Test en Lighthouse

Resultados prueba en PC

Rendimiento
A) 68
B) 64
C) 91
First Paint Contentful
A) 0.6s
B) 0.7s
C) 0.8s
Total Time to Interactive
A) 1.8s
B) 2.9s
C) 0.8s
Speed Index
A) 2.1s
B) 2.3s
C) 3.1s
Total Blocking Time
A) 300ms
B) 170ms
C) 0ms
Largest Contenful Paint
A) 2.7s
B) 2.0s
C) 0.9s
Cumulative Layout Shift
A) 0.007
B) 1012
C) 0.003

En conjunto la opción C es la que obtiene mejores resultados.

 

Conclusiones

Atendiendo únicamente a contenido y velocidad de carga, es posible que el posicionamiento de estas tres páginas fuese distinto. Como hemos podido observar las diferencias en cuanto a velocidad son mínimas, cabe pues suponer que la velocidad de carga, aunque sumamente importante para ofrecer una buena experiencia de usuario, no tiene el peso real que algunos le otorgan a la hora de posicionarse.

Los resultados mostrados son la media obtenida después de efectuar cinco pruebas por página y herramienta utilizada.