Checklist para mejorar la velocidad de carga de tu sitio en 2019

podcast

Desde principios de 2018 Google anunció la Speed Update, y en julio se convirtió en realidad. Una actualización que afectó a los sitios más lentos. Si aún no te has adaptado a este factor del ranking es momento de que sigas este checklist para mejorar la velocidad de carga de tu sitio que te trae Posicionamiento Web Salamanca. Sigue leyendo y aprende más.

La importancia de una velocidad de carga óptima

La velocidad de carga de un sitio es un factor del ranking de Google desde hace varios años. Aunque, como acabamos de mencionar, desde 2018 con la Google Speed Update se hizo mucho más relevante y oficial.

Cuando se lanzó esta actualización Google indicó que los tiempos de carga serían una señal del ranking no solo para ordenadores, sino también para búsquedas móviles. Esto solo afectaría a los sitios que ofrecieran la experiencia más lenta y solo a un pequeño porcentaje de búsquedas.

Sin embargo, la velocidad de carga no es solo un factor del ranking sino también una métrica sobre la experiencia de los usuarios. Porque si tu web tarda en cargar subirá tu tasa de rebote, perderás dinero y clientes.

Para móviles Google recomienda tiempos de carga de 5 segundos o menos en dispositivos con conexión 3G. E indican que con “1 segundo de mejora puedes aumentar las conversiones”. Recuerdan que con un segundo de retraso en la velocidad de una web puede significar que las conversiones bajen hasta un 20 %.

Toma en cuenta que según este estudio de Google “si las personas tienen una experiencia negativa en los móviles, es 62 % menos probable que compren en tu web en el futuro”.

Son suficientes estos datos para entender que la velocidad de los sitios web es clave para tu negocio, bien sean versiones móviles o de escritorio. Por eso debes seguir este checklist que te traemos hoy, así podrás mejorar tu web y conseguir más conversiones.

Checklist para mejorar la velocidad de carga de tu sitio en 2019

Aprovechando distintas herramientas de Google como PageSpeed Insight, Lighthouse, entre otras, podrás saber cómo está tu web. Luego, con esos resultados y siguiendo este checklist podrás mejorar la velocidad de carga de tu sitio.

Revisa las redirecciones de las páginas de aterrizaje

Eliminar todas las redirecciones que no son necesarias es un punto clave para mejorar la velocidad de carga de tu sitio. Cada redirección va ralentizando tu web, porque estas añaden una o varias solicitudes de respuesta HTTP.

Lo mejor que puedes hacer en este caso es cambiar a un diseño responsive, esto lo recomienda Google. Así podrás evitar las redirecciones entre las distintas versiones de tu web, la móvil, de escritorio y Tablet. Con un sitio responsivo ofrecerás la mejor experiencia a los usuarios sin importar el dispositivo desde el que se conecten.

Revisa el tipo de redirecciones que estás usando. Obviamente lo mejor sería no tenerlas, pero en caso de que sea necesario debes escoger la mejor opción. La más conocida es la 301, que es permanente; pero si necesitas algo que sea a corto plazo, para páginas promocionales o para ciertos dispositivos, la opción ideal serían las redirecciones 302.

El robot de Google puede procesar las redirecciones HTTP y JavaScript. Recuerda siempre que minimizando el número de redirecciones la velocidad de carga de tu web será mucho mejor.

Mira el tamaño de las imágenes

Las imágenes consumen la mayor parte de los recursos de una web. En GTmetrix indican que al optimizar el tamaño de las imágenes puedes reducir los tiempos de carga hasta en un 80 %. Y que el 90 % de las webs dependen de los gráficos y, por tanto, hay muchos archivos de imágenes; si las dejas sin comprimir o en el formato incorrecto afecta la velocidad del sitio.

Por tanto, debes revisar que en tu web no haya imágenes demasiado grandes, que tarden en cargar.

La recomendación oficial de Google, al igual que en el caso anterior, es recurrir a lo responsive. Tener imágenes responsivas en tu web te asegurará que carguen bien en distintos dispositivos, porque se generarán distintas versiones de cada imagen.

Para reducir el tamaño de las imágenes antes de subirlas a tu web puedes aprovechar distintas herramientas, como Squoosh de Google.

También podrás agregar plugins a tu WordPress que hacen el trabajo dentro del sitio, con las imágenes que ya tienes subidas.

Difiere la carga del CSS que no se usa

El CSS que no se utiliza puede hacer más lenta la construcción del árbol de procesamiento en el navegador. Porque este debe recorrer todo el árbol DOM y verificar qué reglas CSS se aplican a cada nodo.

Si tienes CSS que no se usa, esto ralentiza la carga porque el navegador debe calcular el estilo de cada nodo.

Lo primero que debes hacer es eliminar los archivos CSS que no necesites. Así evitarás enviar a los usuarios recursos que no se requieren.

Luego, sí deberás optimizar el resto de las reglas CSS. Para hacerlo debes reducir los códigos innecesarios, dividir los archivos CSS, reducir los espacios en blanco, incluir los recursos de CSS críticos y de tamaño pequeño en el documento HTML. Al hacer esto último puedes eliminar las peticiones HTTP extra.

Minifica el CSS

Reducir los archivos CSS es una actividad muy importante para mejorar los tiempos de carga de tu sitio web. Al hacerlo podrás ganar algunos milisegundos que serán de ayuda para mejorar tus métricas.

Pero ¿sabes qué es minificar? De acuerdo con Google la minificación es “el proceso mediante el cual se eliminan datos innecesarios o redundantes de un recurso sin que se vea afectada la forma en la que los navegadores lo procesan”.

Esto puede incluir aspectos como eliminar los comentarios o formato innecesario, quitar códigos que no se usan, hacer variables más cortas, entre otros.

Google para desarrolladores recomienda para minificar el CSS las herramientas CSSNano y ccso.

• CSSNano: es una herramienta que toma tu formato CSS y lo ejecuta a través de muchas optimizaciones, todas enfocadas en conseguir que el CSS sea lo más pequeño posible. Mantienen la semántica, pero borran espacios en blanco, comprime los identificadores y las definiciones innecesarios.
• Ccso: es una herramienta de Github para minificar el CSS y conseguir optimizaciones estructurales. Hace tres tipos de transformaciones: limpia, comprime y reestructura.

via GIPHY

Minifica el JavaScript

Para minificar JavaScript lo ideal es que utilices UglifyJS, Google la recomienda. Esta es una herramienta para minificar, comprimir y “embellecer” los códigos JS. Reduce aspectos como nombres de variables locales, entre otros aspectos.

Otra opción sería Closure Compiler. Esta herramienta sirve para que el JS se descargue y cargue más rápido. En lugar de compilar desde un código fuente a un código de máquina se compila al de JS a un mejor JS. Además, analiza el JavaScript para eliminar el código muerto, reescribirlo y minimizar lo que queda.

Codifica las imágenes

Ya sabes que mientras menos pesado o menos contenido tenga tu sitio tardará menos en cargar porque se necesitan descargar menos recursos. Optimizar las imágenes de tu web te puede ayudar a mejorar los tiempos en un 80 %.

Ya sabes que debes comprimir las imágenes antes de subirlas. Pero quizás lo olvidas. Entonces podrás aprovechar herramientas como imagemin o libvips para este proceso de forma automática a través de los códigos.

Es algo mucho más técnico del punto anterior de comprimir las imágenes antes de subirlas, ya que se basa en minificar los códigos.

Comprime el texto

La compresión del texto de tu web también es posible, esto puede ayudarte a ganar milisegundos en los tiempos de carga. Recuerda que siempre que reduzcas la cantidad de bytes de descarga será un punto a favor de tu sitio.

Google recomienda reducir con Gzip la data comprimible. Todos los navegadores actuales sugieren esta compresión para todas las peticiones HTTP. Tener recursos comprimidos puede acortar el tamaño de la petición en un 90 %. Además, podría reducir la cantidad de data que usan los usuarios para que cargue la web la primera vez.

Puedes comprimir el contenido de tu web de forma dinámica o estática.

• La dinámica se trata de comprimir archivos a medida que son pedidos por el usuario y, por defecto, la aproximación se usa en la mayoría de los servidores web. Es útil para una web en la que el contenido cambia con frecuencia.
• La estática comprime cada archivo por adelantado y entrega la versión “pre-comprimida” cuando se solicita la original. Se recomienda para archivos que no cambian con frecuencia como los JavaScript, CSS, fuentes e imágenes.

Decide qué petición de precargará primero

Los navegadores deciden qué cargar primero de una web. Generalmente tienden a hacerlo con los recursos más importantes, por ejemplo, CSS antes que scripts e imágenes. Pero eso no siempre es la mejor opción para tu sitio.

La solución para este inconveniente es indicar qué recursos se precargan, podrás cambiar la prioridad del contenido que cargue. Esto lo conseguirás con la etiqueta <link rel=”preload”>, así le dices al navegador qué recursos necesitas que carguen primero, en la mitad superior de la página.

Mejora el tiempo de respuesta del servidor

El tiempo de respuesta del servidor es la cantidad de tiempo que se requiere para cargar de un servidor al cliente un documento HTML de una web. Esto para que la persona pueda ver la web.

Esto ayudará a que el usuario pase menos tiempo esperando para que las páginas carguen. Para asegurarte de lograr esto debes:

1. Revisar tu hosting: que tenga suficientes recursos para manejar tu tráfico.
2. Escoge bien el servidor: debes revisar lo que necesitas y el esto disponible. Recuerda optimizarlos.
3. Optimiza tu base de datos: al asegurarte que tu base de datos está optimizada podrás mejorar los tiempos de carga. Habrá menos peticiones.
4. Comprime, minifica y optimiza almacena en caché.

Si usas GIFs animados convierte el formato a vídeos

El formato de GIFs animados ocupa mucho espacio dentro de tu web. Por eso, lo ideal para mejorar los tiempos de carga de tu sitio web es que los cambies a vídeo. Para lograr esto utiliza la herramienta ffmpeg.

La instalas, cargas los GIFs, escoges el formato de vídeo al que quieres convertirlo y listo. Lo ideal es que sea a MPEG-4.

Permite lazy loading en tu web

Cuando alguien trata de ingresar a tu web todo el sitio trata de cargar, algunos elementos lo hacen de forma simultánea, mientras que otros deben cargar de manera secuencial. Dependiendo del diseño web del sitio y la configuración, algunos elementos que no ven en primera instancia pueden ralentizar mucho la web.

Al configurar la carga diferida permitirás que los elementos de tu web carguen a medida que se necesitan. Así la parte baja de la página, por ejemplo, el footer no carga hasta que no hagan scroll. De esta manera el usuario tendrá la percepción de mejores tiempos de carga, porque se prioriza el contenido que está más arriba en el sitio.

Con este checklist para mejorar la velocidad de carga de tu sitio en 2019 podrás revisar que todo va bien en tu sitio o mejorar lo que haga falta. ¿Tu web carga suficientemente rápido? ¿Necesitas ayuda en la optimización? No dudes en contactarnos.

uente infografía