Cómo mejorar la velocidad de carga de una página web: buenas prácticas a seguir

El tiempo de carga de las páginas de un sitio web juega un papel crucial en la experiencia del usuario, siendo uno de los aspectos técnicos más importantes a considerar en la creación de un sitio web. En pinchaaqui.es lo sabemos muy bien y por eso tomamos todas las medidas oportunas en todas las fases de creación de una web, empezando por el diseño porque un sitio mal diseñado y, por lo tanto, lento, puede causar una enorme pérdida de potenciales clientes y ventas. Además, nos aseguramos de proporcionar una experiencia óptima para los dispositivos móviles, como no podría ser de otra manera considerando las costumbres del usuario de hoy.

¿Por qué es importante la velocidad de carga?

• Experiencia del Usuario (UX):
  – Los usuarios esperan que las páginas web carguen rápidamente. De hecho, estudios muestran que el 53% de los usuarios abandonan una página web si tarda más de 3 segundos en cargar.
  – Una experiencia de usuario fluida y rápida aumenta el tiempo que los visitantes pasan en el sitio, disminuyendo las tasas de rebote.
• SEO y Posicionamiento en Motores de Búsqueda:
  – Google ha dejado claro que la velocidad de carga es un factor importante en su algoritmo de clasificación. Los sitios web más rápidos tienen más probabilidades de aparecer en los primeros resultados de búsqueda.
  – Las Core Web Vitals, introducidas por Google, incluyen métricas específicas relacionadas con la velocidad de carga y la interactividad del sitio.
• Conversión y Retención de Clientes:
  – Un sitio web rápido mejora las tasas de conversión. Amazon, por ejemplo, descubrió que una disminución de 100 milisegundos en el tiempo de carga de sus páginas aumentaba sus ingresos en un 1%.
  – Los clientes satisfechos con la velocidad de un sitio web son más propensos a regresar y recomendar el sitio a otros.

¿Cómo se mide la velocidad?

En cuanto a los aspectos del backend (servidor web, servidor de bases de datos, etc.), no es posible realizar análisis desde el exterior, es decir, mediante herramientas en línea: solo se pueden monitorear los tiempos de respuesta. Para entender qué está frenando los tiempos de respuesta, es necesario analizar los diferentes servicios del servidor a través de los registros de los mismos o herramientas de monitoreo avanzadas disponibles para los administradores del sistema.
En el lado client, se pueden realizar análisis específicos con una amplia gama de herramientas en línea, como Google PageSpeed, Lighthouse, WebPageTest, GT Metrix, entre otras. Google lleva tiempo impulsado fuertemente esta dirección, publicando numerosos artículos en su blog y secciones dedicadas en su sitio para desarrolladores. Además, ha puesto a disposición su base de datos de mediciones de velocidad (Chrome UX Report), que permite monitorear los tiempos de respuesta recopilados de manera anónima por los usuarios del navegador Chrome y compararlos con los de la competencia. Más recientemente, para impulsar la rapidez de carga y la buena experiencia de usuario en las webs de todo el mundo, Google lanzó una iniciativa llamada Core Web Vitals (CWV).

¿Por qué un sitio web es lento?

Las causas pueden ser múltiples. Las más comunes son:

• Hosting lento y poco eficiente: es altamente desaconsejable elegir hosting compartidos y económicos.
• Diseño web deficiente: presencia de múltiples códigos pesados y variados, códigos poco optimizados, efectos elaborados, imágenes muy pesadas.
• Ausencia de un archivo .htaccess: un archivo .htaccess proporciona la caché del sitio a los motores de búsqueda.

Optimiza la carga de tu sitio web con estas prácticas

Mejorar la velocidad de carga de un sitio web es esencial para mejorar la experiencia del usuario y el rendimiento del sitio. ¿Qué hacemos en pinchaaqui.es para reducir el tiempo de carga de los sitios web de nuestros clientes?. Aquí explicamos las que son varias formas efectivas de lograrlo:

1. Optimización de imágenes

Las imágenes son decisivas para mejorar la velocidad web. Uno de los errores más comunes que provocan una baja velocidad de carga de una web es la inclusión de imágenes de tamaño gigantesco. Hay que optimizarlas siempre antes de subirlas. Lo ideal es comprimirlas para reducir el tamaño de los archivos sin comprometer la calidad visual, utilizando formatos como JPEG 2000, JPEG XR y WebP para consumir menos datos. También hay que comprobar que las imágenes no se redimensionan. El objetivo es reducir su peso sin pérdida de calidad (lossless). Hay muchas herramientas que permiten mantener la calidad de la imagen casi al máximo con una reducción del tamaño de esta de hasta un 90%. Resumiendo:

• Compresión de Imágenes: utilizar herramientas como TinyPNG, JPEG Optimizer, CompressPNG o PNGGauntlet para reducir el tamaño de las imágenes sin sacrificar calidad.
• Formatos Modernos: usar formatos de imagen más eficientes como WebP en lugar de JPEG o PNG.

2. Carga diferida de imágenes

Ya que las imágenes son de los archivos más pesados que podemos incluir en nuestra web, también son los que nos ofrecen mayor oportunidad de optimización. En todas las webs hay imágenes que el usuario no verá hasta que no haga scroll, por lo que no tiene sentido cargarlas con el primer renderizado de la página, en el cual solo hay que cargar los archivos de carácter crítico.
La solución es la carga diferida (lazy loading): las imágenes y otros contenidos multimedia se cargan sólo cuando están a punto de ser visibles en la pantalla. Cuando se carga una página web, solo se cargan los elementos esenciales y visibles en la primera vista del usuario (above the fold). Los elementos no visibles, como imágenes, vídeos, o iframes que están más abajo en la página, no se cargan de inmediato. A medida que el usuario se desplaza hacia abajo en la página, el navegador detecta cuando un elemento que está marcado para carga diferida se aproxima al viewport.
Existen varias maneras de implementar lazy loading, siendo algunas más manuales y otras facilitadas por bibliotecas y frameworks.

3. Habilitar compresión GZIP

Los servidores pueden comprimir archivos en formato Gzip antes de enviarlos para su descarga, permitiendo que la web se cargue en menos tiempo. Es recomendable utilizar esta compresión ante los siguientes formatos de archivo: js, css, html, xml, svg, wof.

4. Uso de una Red de Distribución de Contenido (CDN)

La tecnología Content Delivery Network (CDN) distribuye el contenido estático del sitio a través de servidores ubicados en todo el mundo. La tecnología guarda copias de la página en distintos puntos geográficos y los descarga desde el más cercano al usuario, reduciendo el tiempo de espera ante las peticiones de navegación.

5. Optimización del servidor

La función del servidor es absorber el tráfico o las peticiones que la web necesita.
Si el servidor actual no cumple con el requisito, afectará a la velocidad de carga de la web, y habrá que cambiar de alojamiento y comprar un servidor dedicado.

• Actualización del servidor: asegurarse de que el servidor web esté actualizado y sea lo suficientemente potente para manejar el tráfico del sitio.
• Alojamiento de calidad: utilizar un servicio de alojamiento web de alta calidad que ofrezca buenos tiempos de respuesta y soporte técnico.

6. Reducción del Tiempo de Respuesta del Servidor (TTFB)

El Tiempo al Primer Byte (TTFB) se refiere a la cantidad de tiempo que necesita el navegador para recibir el primer byte de datos desde el servidor una vez se ha realizado una solicitud. Google considera que este punto necesita ser mejorado cuando el navegador espera más de 600ms. Son varios los factores que pueden influir en el TTFB. Elegir el servidor adecuado para alojar la web es fundamental para su rendimiento y su puntuación en page speed. La diferencia entre servidores puede ser considerable, y esta elección puede afectar significativamente el éxito de la web desde el inicio. Un buen servidor puede proporcionar una base sólida para un rendimiento óptimo, mientras que un servidor inadecuado puede limitar nuestras posibilidades de obtener una buena puntuación, independientemente de otros esfuerzos que hagamos para optimizar la web. Qué acciones hay que tomar:

• Servidor de baja latencia: utilizar servidores con baja latencia y buen rendimiento.
• Configuración del servidor: optimiza la configuración del servidor para reducir el TTFB (Time to First Byte).

7. Reducción del uso de Plugins

Un factor que puede afectar significativamente el TTFB es la cantidad y el tamaño de los plugins instalados en la web. Aunque es tentador incorporar todas las funcionalidades disponibles mediante diversos plugins, debemos recordar que cada uno de ellos añade una considerable cantidad de código que la web debe procesar, lo cual incrementa el tiempo de carga. Algunos plugins y scripts instalados en CMS como WordPress, pesan mucho y pueden hacer que la web vaya más lenta. Por lo tanto, es esencial ser selectivos con los plugins que utilizamos para no comprometer el rendimiento del sitio.
Es una buena práctica revisar periódicamente estos plugins y actualizarlos y/o eliminarlos cuando sea necesario. Resumiendo:

• Evaluar necesidad de Plugins: eliminar o reemplazar plugins innecesarios que puedan ralentizar el sitio.
• Plugins optimizados: utiliza plugins bien optimizados y actualizados regularmente.

8. Reducción de solicitudes HTTP

La reducción de solicitudes HTTP es una forma de optimización web que busca minimizar el número de peticiones que un navegador realiza al servidor para cargar todos los recursos necesarios de una página web. Cada solicitud HTTP puede añadir un tiempo de latencia que afecta negativamente la velocidad de carga de la página.

Algunas técnicas que se pueden utilizar:

• Minimizar HTML, CSS y JavaScript: eliminar caracteres/bytes innecesarios, como espacios adicionales, saltos de línea o sangrías de los contenidos que se suban al CMS. Se trata de una implementación “secundaria” frente a la compresión Gzip, pero también es importante. los archivos CSS y JS, se hacen para ser legibles para los humanos, incluyendo carácteres y espacios que realmente no son necesarios. Esto supone un aumento en el peso de los archivos y consecuentemente un aumento en la velocidad de carga de estos. Para resolver este problema, se pueden minimizar estos archivos CSS y JS, de manera que todos esos carácteres y espacios innecesarios vengan eliminados y se reduzca el tiempo necesario para leerlos por el ordenador del usuario. Herramientas como UglifyJS y CSSNano pueden ayudar.
• Carga Asíncrona de JavaScript y CSS: los recursos externos generan mucho trabajo en el servidor y hacen que la página le cueste más tiempo cargar. Una opción interesante es combinar archivos .js y .css para reducir el número de peticiones necesarias para visualizar el site. Si los recursos CSS externos son pequeños, se pueden insertar directamente en el documento HTML, con archivos CSS grandes, insertar en el HTML el código CSS necesario para mostrar el contenido de la mitad superior de la página, sin insertar URL de datos en estos archivos ni atributos CSS en elementos HTML.
• Uso de Sprites de CSS: combinar varias imágenes en una sola imagen y usar CSS para mostrar solo la parte necesaria de la imagen combinada.
• Incorporación de imágenes en CSS o HTML: utilizar imágenes en línea mediante el uso de datos URI para incorporar pequeñas imágenes directamente en el código CSS o HTML.
• Usar Fuentes Web: utilizar un solo archivo de fuente que incluya todos los estilos necesarios (normal, bold, italic, etc.) en lugar de múltiples archivos.
• Carga condicional de recursos: cargar scripts y estilos solo cuando sean necesarios, en lugar de cargarlos todos de una vez al inicio.

9. Almacenamiento en caché

El almacenamiento en caché es una técnica que guarda una copia de los recursos de una página web en una ubicación de fácil acceso, como la memoria del navegador o un servidor intermedio. Cómo se hace:

• Caché del Navegador: se configura el caché del navegador para almacenar archivos estáticos en el dispositivo del usuario, reduciendo el tiempo de carga en visitas repetidas.
• Caché del Servidor: se implementa almacenamiento en caché en el servidor para reducir el tiempo de generación de páginas dinámicas.

10. Optimización de base de datos

La optimización de bases de datos mejora la velocidad de carga al reducir el tiempo necesario para acceder y manipular datos mediante técnicas como la indexación, la optimización de consultas y la caché. Cómo se consigue:

• Consulta eficiente: se optimizan las consultas SQL para que sean más rápidas y consumen menos recursos.
• Indexación: nos aseguramos de que las tablas de la base de datos estén adecuadamente indexadas para mejorar la velocidad de las consultas.

Nunca ignores la importancia de la velocidad de una página web

La velocidad de carga es un componente crítico del diseño web que no puede ser ignorado. Afecta directamente la experiencia del usuario, el SEO y las conversiones. Implementar estas técnicas puede llevar a una reducción significativa en los tiempos de carga de tu sitio web, mejorando la experiencia del usuario y el rendimiento general del sitio. Los casos de estudio demuestran que incluso pequeñas mejoras en la velocidad de carga pueden tener un impacto significativo en el rendimiento general de un sitio web. Por lo tanto, invertir en la optimización de la velocidad no solo es una buena práctica de diseño, sino una estrategia esencial para el éxito digital.