Saltar al contenido principal

Una guía completa sobre la velocidad de carga de las páginas y cómo mejorarla

1. ¿Por qué el SEO técnico y la velocidad de carga de la página son importantes

En general, antes de empezar a pensar en los rankings de los motores de búsqueda y en las medidas de SEO para mejorar dichos rankings, es necesario asegurarse de que se ocupan de todos los aspectos relacionados con lo que llamamos "SEO técnico".

El SEO técnico tiene que ver con la funcionalidad de un sitio web. La primera condición previa para un buen posicionamiento en los resultados de búsqueda, es que el sitio funcione correctamente. Por supuesto, nadie clasificará alto un sitio web que no se carga, o muestra errores y enlaces rotos.

Y el primer elemento técnico que queremos mirar es la "velocidad de carga de la página". Los sitios web de carga lenta conducen a 2 problemas igualmente importantes:

  • Usuarios descontentos. Especialmente si miramos a los usuarios de móviles, según un estudio de Google, el 53% de ellos abandonan un sitio web si la carga de la página tarda más de 3 segundos.
  • Problemas de SEO. Los motores de búsqueda no clasificarán alto un sitio que la gente abandona porque la página web no se carga lo suficientemente rápido.

2. Primer paso: Comprobar la velocidad del sitio web

Afortunadamente, hay varias herramientas que pueden ayudarte a hacer una prueba de velocidad de carga de la página. Más aún, pueden añadir un análisis de los problemas que impiden que la página web se cargue más rápido.

Algunos de estos problemas pueden parecer demasiado técnicos para el propietario normal, medio de un sitio web. Otros son más fáciles de comprobar y arreglar. Abordaremos ambos más adelante.

¿Cuál es la mejor herramienta de prueba de velocidad del sitio web? Una que se me ocurre es la diseñada por el propio Google.

2.1 PageSpeed Insights de Google explicado

PageSpeed Insights de Google es una herramienta que ha sido lanzada mayormente con los desarrolladores experimentados en mente. Así que, aparte de la puntuación de velocidad que calcula, el análisis de las causas puede ser más difícil de entender.

Vamos a dividir el tema un poco y a darle sentido a las partes principales.

En primer lugar, la herramienta comprueba el rendimiento de la web en 2 pestañas diferentes, una para el móvil y otra para el escritorio. Los resultados de una de ellas pueden ser muy diferentes de los resultados de la otra. Pero la escala de puntuación es la misma.

Basada en 6 criterios diferentes de velocidad del sitio, genera una puntuación de 0 a 100. Los puntajes entre 0 y 49 están en la zona "roja". 50-89 es un resultado promedio. 90-100 es "verde", dando al sitio web una evaluación perfecta en términos de velocidad de carga de la página.

Tenga en cuenta que diferentes páginas de un mismo sitio web pueden tener puntuaciones muy diferentes. Además, incluso la misma página puede tener mucha variación durante un día, debido a varios factores que no se pueden controlar completamente.

Ahora, más allá del puntaje, hay información más detallada a continuación.

Datos de campo (field data): esta sección contiene algunas métricas importantes que desglosan exactamente el tiempo que tardan los primeros elementos, así como los elementos más grandes en cargarse. También mide el tiempo de respuesta del navegador y la capacidad de interacción. Lo hace basándose en el promedio de los tiempos de carga de los 28 días anteriores.

Por debajo de esto, la sección de datosde laboratorio (lab data) tiene algunas métricas similares, pero se basan en las visitas de prueba realizadas en el lugar, después de enviar la URL para la prueba. Si la velocidad de su sitio web ha estado mejorando últimamente, entonces podría esperar que los resultados en Lab Data sean mejores que los de Field Data. Para todas las métricas de esta sección, deberías esforzarte por permanecer en las áreas verdes, o al menos cerca de ellas.

Probablemente las métricas más importantes (y más fáciles de entender) son el FCP y el Time to Interactive (Tiempo Hasta Interactividad)

La primera pintura de contenido (FCP) es el tiempo que transcurre hasta que su página ha cargado cualquier contenido (texto, imagen o cualquier otro elemento que el usuario pueda "consumir"). Si esto está por debajo de 3s, debería estar bien. Las mejores páginas tienen un FCP de menos de 1s.

Eltiempo hasta interactividad es el tiempo que transcurre desde el momento en que la página empieza a cargarse hasta que los usuarios pueden interactuar con ella. Con suerte, esto también está por debajo de 3s.

Si estas métricas no se ven muy bien, entonces debería desplazarse más abajo para ver por qué. Hay una sección de Diagnóstico y una de PruebasAprobadas (Passed Audits) debajo de ella. La primera destaca las medidas que podrían mejorar tu rendimiento. Busca las que tienen un triángulo rojo cerca de ellas.

Algunas de ellas son más técnicas. Ejemplos:

  • Eliminar los recursosque bloquean el render - esto básicamente significa que hay procesos que se están cargando antes de su FCP. Esto podría incluir aplicaciones o plugins que usan Javascript. El navegador intenta cargar estos procesos antes de renderizar el contenido real. Esto puede ralentizar severamente el sitio web. Lea más abajo para saber qué hacer al respecto.
  • Minimizar CSS o Minimizar Javascript - la forma en que su sitio web se ve y actúa está dictada por estos archivos. En los archivos CSS se establecen detalles como el tamaño de las fuentes, los colores, el posicionamiento, etc. Los archivos CSS y JS se ven como archivos de texto con pocos caracteres por cada línea. Esto deja muchos espacios en blanco en estos archivos. Los espacios en blanco conducen a archivos más grandes, que tardan más en cargarse. Lo creas o no, podrías obtener un pequeño aumento de velocidad, con eliminar estos espacios en blanco. Y esto es lo que significa "minificar". En la siguiente sección, te diremos cómo hacerlo.
  • Minimizar el usode terceros - a veces, tu plantilla o las aplicaciones o plugins que instalaste pueden cargar recursos externos. Puede que haya proveedores de servicios para los que haya colocado un script en el encabezado de su sitio web (las herramientas de análisis no son una excepción). Intente limitar el número de proveedores de terceros a los que usted necesita absolutamente. De lo contrario, puede afectar a la velocidad del sitio web.

Otras cuestiones que afectan a la velocidad de la página son menos técnicas, y cualquier propietario de un sitio web, independientemente de su habilidad, puede mejorarlas fácilmente. A continuación los abarcamos.

3. Cómo acelerar el tiempo de carga de la página

3.1 Cosas no técnicas que puedes hacer para mejorar la velocidad del sitio web (tamaños de archivos, imágenes, fuentes, etc.)

Estas son las cosas que puedes marcar, sin importar el tipo de sitio que tengas y sin importar las habilidades técnicas.

3.1.1 Reducir el tamaño de las imágenes: cuanto más grande sea la página web, más tiempo necesita para cargarse. Y una gran parte de eso tiene que ver con las imágenes. Mantén el tamaño de las imágenes lo más bajo posible. Las imágenes más pequeñas se cargan más rápido. Aunque en algunos casos necesitas imágenes más grandes, no desperdicies preciosos KB y segundos usando imágenes innecesariamente grandes. En este ejemplo, esta imagen se muestra con un ancho máximo de 400-500 px en mi sitio web, incluso en pantallas más grandes. Este es simplemente el espacio que tenemos para ello en nuestro diseño.

Entonces no necesitas una imagen que tiene un ancho nativo de 1200 px, que es más grande, más lenta de cargar y necesita ser redimensionada por el navegador cada vez que la página se carga. Una con la mitad de ancho del tamaño se vería exactamente igual en esta situación. Por lo tanto, para la mayoría de las imágenes, puedes mantener el tamaño bajo y ganarás velocidad extra. Pero ten cuidado con las las imágenes más grandes en tu diseño. No las cambies de tamaño si se van a mostrar en un tamaño más grande. Esto disminuirá la calidad.

3.1.2 Utilizar nuevos formatos de imagen que sean más eficientes: el .webp es un ejemplo de formato de archivo de imagen que se desarrolló específicamente para obtener la misma calidad de imagen con un tamaño de archivo más pequeño en los sitios web. Intente convertir sus imágenes a este formato y gane velocidad de carga extra.

3.1.3 Limite el número de fuentes que utiliza en una página: cada fuente carga un recurso externo que ralentiza el sitio web. Usar menos fuentes también hará que las cosas sean más coherentes visualmente. Sin embargo, en comparación, esto ahorrará menos tiempo de carga que otras medidas.

3.1.4 Utilizar vídeos y efectos especiales o animaciones sólo debajo del pliegue (below the fold): por encima del pliegue está la primera sección de la página que ven tus visitantes. También es la primera en cargarse, así que debes mantenerla limpia. Si tienes un vídeo grande justo en la parte superior de la página, esto hará que los tiempos de carga sean más lentos y que la satisfacción del usuario sea menor. Sin embargo, si está más abajo, entonces hay tiempo para que se cargue en el momento en que los usuarios empiecen a desplazarse y el puntaje de velocidad general no se verá afectado.

3.1.5 Contenido de la memoria caché: la memoria caché es un proceso que utiliza capas de almacenamiento de datos de alta velocidad, con el fin de acceder más rápidamente al contenido de una página. El contenido de su sitio web puede guardarse como contenido estático en un caché. Esto también significa, dependiendo de cómo esté configurado el caché, que los usuarios pueden ver la versión en caché de su página, en lugar de la versión en vivo. Si actualiza y edita con frecuencia una página, el uso excesivo de la caché es arriesgado, ya que los visitantes pueden ver una versión obsoleta de la página, cargada desde la caché. Pero especialmente para las páginas que no cambian tan a menudo, el caché es un gran potenciador de la velocidad. El contenido del caché no permanecerá igual para siempre. Puede, en cualquier caso, ser restablecido o refrescado en determinados periodos de tiempo.

El caché no es difícil de realizar, dependiendo del tipo de plataforma en la que se construya su sitio web.

Cómo hacer un caché de un sitio web de Wix:

Para habilitar el caché:

  1. Ve a tu editor.
  2. Haz clic en Menúsy páginas.
  3. Pasa el cursor sobre la página que quieres cachear y haz clic en el ícono Mostrarmás.
  4. Haz clic en Configuración.
  5. Haz clic en Configuración avanzada.
  6. Ve a "Controlar manualmente la caché de esta página" y cambia la palanca para activarla.
  7. Ahora deberías ver: Habilitado: la página se almacenará en el caché.
  8. A continuación, puedes seleccionar la frecuencia con la que deseas restablecer el caché de la página: cada hora, cada 24 horas, etc.

Cómo guardar en caché un sitio web de WordPress:

Ve a la sección de Plugins en tu tablero y busca un plugin de cache como WP Fastest Cache. Instálalo y luego ve a Configuración. En la ventana, asegúrate de que el caché esté habilitado.

También obtendrás más opciones para acelerar tu sitio web con el mismo plugin, como la minificación de archivos y la posibilidad de combinar CSS, así como de combinar archivos JS. Discutimos esto en la siguiente sección.

Si tienes otro tipo de sitio web, normalmente hay aplicaciones y plugins desarrollados para ayudarte con esto. Para los usuarios avanzados y los desarrolladores, hay herramientas de almacenamiento en caché de código abierto disponibles en línea.

3.1.6 En general, mantenga limpio su sitio web: No guarde archivos, elementos o aplicaciones innecesarios, si no los está utilizando activamente. Mantenga las cosas simples y no complique en exceso la estructura de su sitio web, para que se cargue más rápido.

3.2 Cosas técnicas que puedes hacer para mejorar la velocidad del sitio web (minificación, archivos Javascript, etc.)

Como se ha visto en la sección sobre la velocidad de la página de Google, hay varios problemas de naturaleza técnica que aparecerán cuando evalúe la velocidad de su página. Intentaremos explicar cómo tener sentido y resolver algunos de estos problemas. Sin embargo, si crees que están por encima de tu nivel de habilidad, puede que prefieras trabajar con un experto en estos problemas.

Además, si no hospedas tu página web y la mantienes en tu plataforma de construcción de páginas web (por ejemplo, Weebly, Wix, Squarespace), entonces no tienes que preocuparte por ninguno de los aspectos descritos en esta sección. Estas plataformas de construcción de sitios web también alojan los sitios web de sus clientes y normalmente hacen un muy buen trabajo asegurándose de que se cargan lo más rápido posible.

3.2.1 Aplazar o sincronizar los archivos Javascript para eliminar los recursos de bloqueo del renderizado. Hablamos de los recursos que bloquean el renderizado en la sección 2.1. El navegador carga los elementos y scripts en el orden en que se presentan en los archivos del sitio web. Primero, intenta cargar los archivos en la sección <head>. Allí es donde suele encontrar muchos scripts de terceros pertenecientes a las aplicaciones que el sitio web está utilizando (por ejemplo, análisis, servicios de anuncios y muchos más).

El contenido real de la sección <body> tiene que esperar a que estos scripts se ejecuten. Esto significa que el visitante no verá ningún contenido hasta que se inicien las aplicaciones del <head> del sitio. Ya hemos sugerido utilizar sólo las aplicaciones que son totalmente necesarias y eliminar las demás. Lo que se puede hacer alternativamente es "posponer" la carga de estos scripts o "separarlos" del contenido.

Si tienes algún conocimiento básico de HTML, puedes hacerlo directamente en el código de tu sitio web. Si agregas defer a los scripts que están ralentizando el sitio (<script src="scriptname.js" defer></script>), el navegador los descargará en segundo plano, sin bloquear el contenido. Si añades async (<script src="scriptname.js" async></script>), el efecto es similar, sólo que el script se vuelve completamente independiente del resto de la página, se carga por separado y se ejecuta siempre que se hace.

Alternativamente, el aplazamiento y la asincronía pueden hacerse usando plugins/apps/extensiones. En WordPress, hay plugins como Async JavaScript u otros que harán esto fácilmente por ti, sin necesidad de saber código.

Ten en cuenta que trabajar con estos, afectará a la funcionalidad del sitio web. Es posible que tengas que deshacer algunos de los cambios si algunas partes de tu página no funcionan como se predijo.

3.2.2 Minimizar CSS y Javascript. Ya hemos explicado lo que es la minificación (eliminar los espacios en blanco de las líneas de sus archivos). Seguramente no querrás hacerlo manualmente. Si tienes un sitio web HTML y no usas un CMS, una forma de hacerlo sería usar una herramienta como CSS Minifier, que requerirá que introduzcas el texto original en los archivos CSS/JS y obtengas el resultado de la minificación. Descargue el archivo minificado y reemplace el archivo antiguo con él.

Tenga en cuenta que si necesita hacer cambios en los archivos en el futuro, será mucho más difícil trabajar con el contenido de los archivos, ya que habrá una gran cantidad de texto sin párrafos y sin espacios entre las palabras.

WP Fastest Cache, Fast Velocity Minify son algunos de los muchos plugins que ofrecen minificación para sitios web de Wordpress.

3.2.3 Combinararchivos CSS y JS

Su sitio web puede estar usando varios archivos CSS que dan forma al estilo de su página, así como varios archivos JS que dictan varias acciones y procesos en ella. Cuanto más complejo sea el sitio web (cuantos más plugins/extensiones/applicaciones tengas instalados), más archivos CSS y JS se ejecutarán en segundo plano. Y cuantos más sean estos archivos, más tiempo tardarán en cargarse.

Al combinarlos automáticamente se fusionan todos estos archivos en uno solo, así que en lugar de tantos archivos CSS o JS, sólo habrá un archivo grande para CSS y uno para JS. Esto ayudará a cargar el sitio web mucho más rápido.

Nota: por favor haga una copia de seguridad del sitio antes de optar por combinar los archivos, ya que puede romper parte de la funcionalidad y es posible que tenga que deshacerla.

De nuevo, las aplicaciones o plugins que ofrecen otras características de velocidad de página (minificación, caché, etc.) también deberían ofrecer la opción de combinar CSS y JS. Si no utilizas un CMS y manejas el código del sitio web directamente, hay opciones en línea para ayudarte a combinar tus archivos.

3.2.4 Usar CDN

Una CDN (red de entrega de contenido) es una red de servidores distribuidos geográficamente que puede almacenar en caché el contenido y proporcionarlo más rápidamente a los visitantes de un sitio web, dependiendo de la ubicación de estos visitantes. Esto puede ser especialmente importante para los sitios web que tienen una audiencia mundial. Los proveedores de hospedaje modernos ofrecen CDN por defecto, pudiendo cargar el contenido desde un nodo que esté más cerca de la ubicación del usuario. Esto puede marcar una gran diferencia en términos de velocidad de carga de la página.

Por lo tanto, compruebe si su proveedor de hospedaje utiliza CDN y, si no, considere cambiar a otro.

4. Otros Factores de Velocidad de Carga

Hay algunos aspectos de la velocidad de carga de la página que no están bajo su control. En su PageSpeed Insights, puede ver una línea sobre la reducción del tiempo de respuesta del servidor. Esto depende totalmente de la configuración del servidor donde se aloja el sitio web. Es poco lo que el propietario de un sitio web puede hacer al respecto.

Otro factor es si el servidor web está usando compresión Gzip de los archivos, lo que puede reducir el tiempo de espera para que la página web se cargue.

Y la lista está abierta a más aspectos, pero los que hacen la mayor diferencia han sido cubiertos.

¿Has revisado toda la lista? ¿Puedes aplicar algunos o todos estos a tu propia página web? Una vez que lo hagas, vuelve a la página de PageSpeed Insights o a otras páginas de control de velocidad como GT Metrix y mira si has ganado unos preciosos segundos. Si lo haces correctamente, deberías notar una mejora significativa.