Cómo equilibrar las velocidades de carga de páginas web rápidas con contenido enriquecido

Publicado: 2021-07-19

Los tiempos de carga de la página rápidos y el contenido rico e interactivo son clave para que un sitio web sea exitoso, pero lograr un equilibrio entre los dos puede ser un desafío.

No es ningún gran secreto que los tiempos de carga de la página son extremadamente importantes para el éxito de un sitio web. Los algoritmos de búsqueda de Google favorecen los tiempos de carga rápidos y también hay muchas investigaciones que muestran que un pequeño aumento en el tiempo de carga de la página puede tener un impacto negativo en las conversiones. El gerente de marketing digital de Hallam, Tom Whiley, escribió una excelente publicación de blog sobre cómo mejorar la velocidad de carga de su página el año pasado. Mientras que nuestros socios de alojamiento, WP Engine, han producido una gran infografía sobre la velocidad de carga de la página.

Los sitios web también deben ser ricos en contenido, imágenes e interactividad para fomentar las conversiones. Esto conduce inevitablemente a páginas más grandes, lo que naturalmente ralentiza el tiempo de carga de la página.

El conflicto entre la necesidad de velocidad y la demanda de contenido enriquecido puede paralizar los proyectos de diseño. Por tanto, es fundamental encontrar un equilibrio que satisfaga ambos requisitos.

En este blog, compartiré contigo un enfoque que te ayudará a equilibrar estos dos desafíos contradictorios.

Relacionar la velocidad de una página con su propósito

No es posible predecir los tiempos de carga hasta que un sitio web se haya desarrollado en una etapa razonablemente madura, por lo que es mejor adoptar un enfoque iterativo para medir y mejorar la velocidad.

El punto de partida clave es identificar las páginas de destino de SEO del sitio y sus páginas de contenido enriquecido. Luego, puede concentrarse en reducir el tamaño de la página y la velocidad de carga de las páginas de SEO tanto como sea posible.

Del mismo modo, a las páginas de destino enriquecidas se les puede permitir un poco más de espacio para la interacción del usuario.

Aquí hay un proceso aproximado que se puede aplicar:

Identifique las páginas de destino clave que seremos el objetivo para velocidades de carga reducidas.
Diseñe según las mejores prácticas para tiempos de carga reducidos.
Decida las características en torno a las mejores prácticas para tiempos de carga reducidos.
Desarrolle la (s) página (s).
Mida y busque oportunidades para ahorrar tiempo de carga.
Repita 4-5 según corresponda.

Esto solo cubre la primera parte de la historia. Luego, las páginas clave de SEO deben monitorearse continuamente para los tiempos de carga de la página para asegurarse de que sigan funcionando como se espera, especialmente cuando se usa un sistema de administración de contenido que permite que cualquiera pueda editar las páginas.

Entonces, después de lanzar el sitio web, hay dos pasos simples que se pueden seguir:

Configure una verificación mensual de las páginas clave de destino clave para asegurarse de que sigan funcionando.
Utilice una herramienta de control de la velocidad de la página que se activa una vez que la página se está desempeñando por debajo del nivel acordado.

Consideraciones de diseño para optimizar las velocidades de carga

El diseño del sitio juega un papel clave para determinar cuánto es posible optimizar los tiempos de carga de la página. Cuando se trata de páginas web, el tamaño realmente importa. El objetivo es mantener el tiempo de carga de la página por debajo de 500k idealmente, pero ciertamente por debajo de 1 MB como máximo.

A continuación, se indican algunos pasos a seguir para minimizar los tiempos de carga:

Minimice el uso de imágenes en las páginas de destino clave tanto como sea posible. Es demasiado fácil usar imágenes para hacer que una página parezca rica cuando el uso sutil de la iconografía y el diseño puede tener el mismo efecto.
Cuando se utilizan imágenes, deben optimizarse y, al mismo tiempo, garantizar que no haya una degradación inaceptable de la calidad.
Utilice páginas de destino ajustadas optimizadas para la búsqueda orgánica y mantenga el contenido enriquecido en páginas más profundas a las que no se dirige la búsqueda orgánica.
Evite muchos diseños únicos y complejos en varias plantillas. Cuanto más simple sea el marcado HTML, más pequeños serán los archivos.
Evite los elementos interactivos complejos que se basan en bibliotecas de JavaScript pesadas. Puede parecer genial ver algo moverse por la pantalla, pero ¿es realmente necesario?

Consideraciones técnicas durante la implementación

Y finalmente, podemos entrar en algunos de los aspectos más técnicos de la velocidad de carga de la página que deben considerarse como parte de la elección del alojamiento:

Elimine la dependencia de scripts de terceros siempre que sea posible. Estos causan problemas porque no solo depende de que esos scripts se carguen antes de que se cargue la página, sino que a veces también tienen una carga alta y se cargan más lentamente de lo habitual. Esto puede dar lugar a tiempos de carga "abultados".
Emplee técnicas de carga diferida para asegurarse de que las imágenes que no aparecen en la mitad superior del pliegue se carguen cuando el usuario se desplaza hacia la vista.
Aproveche mejor las imágenes receptivas. Ha habido algunos avances en la forma en que los navegadores manejan las imágenes receptivas, lo que significa que no necesitamos proporcionar una sola imagen grande que funcione en todos los puertos de visualización y que podamos ofrecer una mejor imagen para resoluciones específicas.
Asegúrese de que los videos incrustados se carguen después de que se haya cargado la página, en lugar de como parte de la carga de la página. Esto significa que los usuarios verán una imagen de vista previa de un video y luego verán el video real después de hacer clic en el enlace.
Evite grandes archivos htaccess para redireccionamientos 301 y combine reglas en redireccionamientos de categorías masivos, en lugar de redireccionamientos individuales de página a página.
Utilice una CDN para las imágenes. Será necesario medir esto, ya que las CDN pueden ser perjudiciales para el rendimiento, si la base de usuarios del sitio está particularmente localizada.
Minimice los archivos CSS y Javascript. Ya debería estar haciendo esto en la mayoría de los casos, pero puede haber más oportunidades para reducir algunos de los archivos en las páginas clave. Esta es una parte fundamental para tomar la decisión de instalar nuevos complementos.
Elimine el soporte para navegadores más antiguos. Los navegadores más antiguos requieren que se creen y carguen archivos CSS y JS específicos en el sitio de forma condicional. Si podemos eliminarlos por completo, es una solicitud menos que hacer.
Minimice la cantidad de complementos utilizados en su sitio. Regularmente heredamos sitios web que sufren de saturación de complementos. No es un problema nuevo cuando se trabaja con un CMS, pero sigue siendo importante.
Elimine cualquier dependencia de los requisitos de alojamiento no esenciales, como el alojamiento de imágenes para firmas de correo electrónico
Ejecute consultas de optimización de la base de datos. Si su sitio web ha existido por un tiempo, existe una serie de técnicas de base de datos que se pueden utilizar para optimizar el tiempo en el que se ejecutan las consultas.

En resumen, la creación de un sitio altamente optimizado es un equilibrio entre la especificación, el diseño y la implementación. El factor clave para mí es diferenciar las páginas SEO altamente optimizadas de otras páginas cuando sea posible y concentrarme en optimizarlas en la medida de lo posible.

Si necesita ayuda con su desarrollo web, no dude en contactarnos.