La velocidad de la web es parte crucial del SEO (puedes saber un poco más sobre SEO aquí), y a medida que más empresas deben trabajar de forma virtual, la optimización se vuelve más importante que nunca. Esta también es una parte fundamental de tu estrategia de Marketing Digital que debes cuidar para ofrecer una buena experiencia a los usuarios que visitan tu sitio.
Según un estudio realizado por Google, con 3.700 datos anónimos de Google Analytics, el 53% de los usuarios abandona una página si ésta tarda más de 3 segundos en cargar. Google se ha diferenciado por poner las necesidades de los usuarios primero. Por eso, dan prioridad a los sitios web más rápidos y con mejor rendimiento.
¿Qué significa esto? que si tu web es rápida tendrá más posibilidades de estar entre los primeros resultados de Google. Esto ha ganado importancia desde la aparición de los smartphones.
¿Cuáles son los aspectos más importantes que debes comprender acerca de la velocidad de tu página y cómo puedes mejorarla? Aquí te damos más detalles.
¿Cómo se carga una página web?
Para entender por qué un sitio puede ser más lento, es importante conocer qué pasa al cargar una web:
- Un usuario va abre su navegador de Internet, escribe la dirección de tu sitio web y el navegador genera una solicitud de DNS (Domain Name System). En otras palabras le pregunta a un sistema que le diga dónde está alojado el sitio web (lo que conocemos como Hosting).
- Esta respuesta del DNS entrega la dirección IP o identificador donde se alojan los archivos de tu página web.
- El navegador entonces le pide a ese hosting que le envíe todos los archivos que componen la web que quieres ver.
- El navegador recibe los archivos y comienza a cargar todo el HTML, CSS y JavaScript. Por fin, el visitante a tu web puede ver tu contenido.
Este procesos simplificado tiene varias puntos que pueden hacer que tu web sea rápida o lenta y los vamos a explicar a continuación.
¿Qué podría estar ralentizando tu web?
Los problemas más comunes que pueden hacer una página sea lenta son los siguientes:
Imágenes muy pesadas
Las imágenes son una parte importante de cualquier sitio web. Ayudan a transmitir un mensaje o contar una historia. Sin embargo, si no se usan correctamente, pueden ralentizar un sitio web. Esto se debe a que las imágenes pueden ser de gran tamaño y ocupar mucho ancho de banda.
Para asegurarse de que tu sitio web se cargue rápidamente, debes optimizar tus imágenes. Esto significa reducir su peso sin comprometer la calidad. Puedes hacerlo utilizando el formato de archivo correcto, comprimiéndolos y reduciendo su tamaño.
El tamaño ideal para una imagen en la web es que máximo tenga un peso de 400 kb. Esto implica reducir la profundidad de bits del color, el tamaño en pixeles e incluso el formato de las fotos (por ejemplo, los archivos .png pesan más que los .jpg).
Si no eres diseñador y no manejas herramientas avanzadas de optimización de imágenes, existen aplicaciones online como compressor.io que te permiten realizar el proceso de compresión manera rápida y simple. Otra manera de optimizar las imágenes de una web para reducir su peso es utilizando formatos de última tecnología como el WebP.
WebP es un formato de imagen que ofrece compresión sin pérdidas y con pérdidas para imágenes en la web. Fue creado por Google en 2010 y está basado en el códec de video VP8. Los archivos WebP suelen ser un 30 % más pequeños que los archivos JPEG y ofrecen mejor calidad que los archivos GIF o PNG.
El principal inconveniente de WebP es que no es tan compatible como JPEG o PNG. Sin embargo, con más y más navegadores compatibles con el formato, vale la pena considerarlo si está buscando un tamaño de archivo más pequeño sin sacrificar la calidad.
Este blog que estás leyendo usa imágenes WebP generadas gracias al plugin Siteground Optimizer que nos pone a disposición nuestro proveedor de hosting como valor agregado. Puedes comprobarlo intentando descargar la siguiente foto: la obtendrás en formato WebP.
El hosting podrían reducir la velocidad de la web
Todo el contenido de un sitio web debe estar alojado en un servidor. Y si bien el alojamiento o hosting puede tener muchos beneficios para las empresas y las personas, también puede afectar la velocidad de la web. A continuación, veremos algunas de las razones por las cuales el alojamiento puede reducir la velocidad de la web:
- Hosting de mala calidad: a veces lo barato sale caro. Dentro de la mala calidad, se incluye poca capacidad de procesamiento, discos duros convencionales (y no de estado sólido o SSD), con poca memoria RAM o con ancho de banda limitado.
- Configuración inadecuada del hosting: si estás optimizando la velocidad de tu web, es importante que te apoyes de personas que sepan configurar apropiadamente funciones como la compresión Gzip, funciones como la versión de PHP y sus parámetros, sistemas de caché como Litespeed o Varnish, entre otros. Esto es bastante técnico, por lo tanto déjalo en manos de personal especializado.
Otros problemas que puede reducir la velocidad de la web
- Complementos, aplicaciones y widgets, básicamente cualquier script de terceros también puede ralentizar el tiempo de carga.
- El tema y cualquier archivo grande pueden ralentizar el sitio.
- La cantidad de saltos o redirecciones necesarias para acceder a una página web pueden ralentizar el proceso de carga.
- Un sitio web con grandes bases de datos que no estén correctamente optimizadas.
- Si estás usando un sistema de gestión de contenidos (CMS) como WordPress, tener muchos plugins puede hacer que tu web tenga un desempeño pobre en velocidad.
Herramientas y recursos relacionados con la velocidad de página
Estas herramientas son las más recomendadas para analizar tu página y las de tus competidores y que puedas realizar los cambios necesarios para mejorar:
Informe de experiencia del usuario de Chrome
Esta es la métrica de usuario real de Chrome. Desafortunadamente, solo está disponible para sitios web más grandes y populares, pero permite obtener algunos datos muy buenos. Está alojado en BigQuery, por lo que se necesitan algunos conocimientos básicos de SQL.
Lighthouse
Lighthouse está disponible en Chrome Dev Tools. Si estás en una página web y haces clic en “Inspeccionar elemento” y abres Chrome Dev Tools, en la pestaña de la derecha donde dice “Auditoría”, puedes ejecutar un informe de Lighthouse directamente en tu navegador.
Page Speed Insights
PageSpeed Insights es realmente interesante. Esta herramienta verá cómo está configurado tu sitio y proporcionará comentarios de acuerdo con eso y lo puntuará. Además permite probar la velocidad y el rendimiento de tu sitio web móvil.
TestMySite de Google
En esta herramienta, Google aprovecha las métricas del mundo real, vinculándolas al porcentaje de personas que estás perdiendo debido a la lentitud de tu sitio
Otras herramientas muy útiles con Pingdom y GTmetrix.
Métricas de velocidad de la web
¿Cuáles son algunas de las métricas que debes analizar para conocer la velocidad de tu página y mejorarla?
First paint
First Paint es la primera pintura que no está en blanco en una pantalla. Podría ser solo el primer cambio de píxel. Ese cambio inicial se considera primera pintura.
¿Qué es First Paint con contenido? Es cuando aparece el primer contenido. Esto podría ser parte del navegador o la barra de búsqueda o lo que sea.
¿Qué es First Paint significativo? Es cuando el contenido primario es visible. Cuando obtienes esa reacción de «Sí, esto es para lo que vine a esta página», esa es la First Paint significativa.
Tiempo para interactuar
Todos hemos ido a una página web y parece que está lista, pero todavía no podemos usarla. Ahí es donde entra esta métrica. Entonces, ¿cuánto tarda la página en poder ser utilizada por el usuario?
Contenido DOM cargado
Es cuando el HTML está completamente cargado y analizado.
Formas de mejorar la velocidad de tu página
Existen muchas formas de mejorar la velocidad de tu página y darle a tus usuarios una experiencia positiva:
HTTP/2
HTTP/2 definitivamente puede acelerar las cosas. Se basa en SPDY, un protocolo presentado en 2009 por Google con la intención de acelerar las webs. En ese entonces se hablaba de un aumento del 22-60% de la velocidad de carga de las webs convencionales y un aumento del 39-55% en el caso de las webs con SSL.
Preconectar, captar previamente, precargar
La conexión previa, la captación previa y la carga previa son muy importantes para acelerar un sitio. Vemos a Google haciendo esto en sus SERPs. Si inspeccionas un elemento, puedes ver que Google obtiene previamente algunas de las URL para que lo tengas más rápido si haces clic en algunos de esos resultados. De manera similar, puedes hacer esto en tu sitio. Ayuda a cargar y acelerar ese proceso.
Habilitar el almacenamiento en caché y usar una red de entrega de contenido (CDN)
El almacenamiento en caché es muy importante por eso debes asegurarte de que está configurado correctamente. Lo mismo con la red de entrega de contenido o CDN
Comprimir imágenes
La forma más fácil y probablemente más rápida de acelerar tu sitio es comprimir las imágenes. Hay todo tipo de herramientas gratuitas disponibles para guardar para Web y comprimir correctamente.
Minificar recursos
La minificación es el proceso de eliminar caracteres innecesarios del código sin cambiar la forma en que funciona.
Estos caracteres innecesarios suelen ser cosas como:
- Caracteres en espacios en blanco
- Nuevos saltos de línea
- Comentarios
- Delimitadores de bloque (corchetes)
¿Por qué debes acelerar tu página web?
Existen 3 aspectos fundamentales que deben darte razones suficientes para preocuparte por la velocidad de tu sitio web. Estos son:
Usabilidad: se trata de permitir que tus usuarios tengan una experiencia más intuitiva y sencilla en la web. Al tener un sitio que se tarda demasiado en cargar, los usuarios se irán a otro que les permita navegar de una forma más fácil.
Ranking de Google: como ya mencionamos, Google le da prioridad en sus resultados a los sitios que cargan con más rapidez. Estar aquí es muy importante ya que aumentan tus posibilidades de conversión y venta.
Experiencia de usuario de dispositivos móviles: Como lo mencionábamos al principio, los usuarios no esperarán a que tu web cargue. Eso significa que si el sitio de tu negocio es lento y no está adaptado para dispositivos móviles, esta no será una buena experiencia y puedes perder ventas y clientes. Es por esto que la experiencia de usuario cada vez es más importante.
Una experiencia de usuario negativa no solo hará que pierdas un cliente o venta, también puede afectar considerablemente la reputación online de tu marca, tomando en cuenta que, hoy en día, los usuarios acuden a internet para dar su opinión sobre todo lo que compran (o intentan comprar). Las malas referencias se popularizan y la labor para limpiar tu nombre puede ser más cara que poner en práctica estas optimizaciones.
Como ves, lograr un sitio optimizado requiere de cuidar varios detalles y tener algunos conocimientos técnicos. En el mundo tecnológico es muy importante mantenernos actualizados y saber que constantemente nacen nuevas tendencias y herramientas diseñadas para que las marcas y negocios aprovechen al máximo las ventajas del internet.
En BTODigital contamos con un equipo capacitado en temas de programación y diseño web que puede ser la clave para lograr una web que le dé a tus usuarios la experiencia que merecen y a tu negocio, las ventas que siempre soñaste. Esta web está optimizada para que cargue muy rápidamente y tu mismo puedes verificarlo con GTmetrix como se ve en la siguiente imagen.
