Cómo Mejorar la Velocidad de Carga de una Pagina Web

4Shares
Cómo Mejorar la Velocidad de Carga de una Pagina Web

Cuando sale el nuevo iPhone, muchos se apresuran a ser los primeros en comprarlo.

Cuando hay noticias de última hora, las personas están pegadas a sus pantallas de televisión esperando actualizaciones mientras los reporteros se esfuerzan por ser los primeros en entregarlas. No es de extrañar que las personas esperen este mismo tipo de velocidad cuando navegan por tu web.

Quieren que su experiencia de usuario no tenga obstáculos para poder recibir sin esfuerzo la información que estaban buscando.

Hoy en día, los usuarios no tienen paciencia con los sitios web con velocidades de carga bajas o un rendimiento inadecuado.

Aproximadamente la mitad de los usuarios web esperan que un sitio se cargue en dos segundos o menos. Si no se carga en tres segundos, esos usuarios tienden a abandonar el sitio.

Una estadística aún más alarmante es que el 64% de los compradores no están satisfechos con la experiencia de una tienda en línea y el tiempo de carga los lleva a comprar en otra parte.

Esto significa que no solo estás perdiendo a tus visitantes actuales y disminuyendo las tasas de conversión, sino que corres el riesgo de que tu sitio pierda tráfico web de aquellos clientes que pueden haber comprado algún producto y recomendado a otras personas tu sitio web.

En este día, los segundos marcan la diferencia. Ya no puedes permitir que tu sitio web se atasque con imágenes y archivos no optimizados. Tus usuarios esperan que tus páginas se carguen rápidamente.

4 Formas de Mejorar la Velocidad de tu Sitio Web

Con eso en mente, echemos un vistazo a 4 formas de optimizar tu sitio web para obtener el mejor rendimiento posible.

1. Minimiza las solicitudes HTTP

Las solicitudes HTTP (Protocolo de transferencia de hipertexto) se cuentan siempre que un navegador recupera un archivo, una página o una imagen de un servidor web.

Según Yahoo, estas solicitudes tienden a ocupar alrededor del 80% del tiempo de carga de una página web. El navegador también limita las solicitudes entre 4 y 8 conexiones simultáneas por dominio, lo que significa que cargar más de 30 activos a la vez no es una opción.

Esto significa que cuantas más solicitudes HTTP necesites cargar, más tiempo tardará la página en ir y recuperarlas todas, lo que aumentará el tiempo de carga de tu página web.

Cómo disminuir las Solicitudes HTTP

Si bien parece limitar los diseños de tus páginas manteniéndolos simples, hay varias tácticas que puedes usar para disminuir las solicitudes HTTP y aliviar tu navegador.

1. Combinación de archivos CSS / JS: En lugar de forzar al navegador a recuperar múltiples archivos CSS o JavaScript para cargar, intenta combinar tus archivos CSS en un archivo más grande (lo mismo para JS).

Si bien esto puede ser un desafío si tus hojas de estilo y scripts varían de una página a otra, lograr fusionarlos finalmente ayudará a tus tiempos de carga a largo plazo.

2. Usa consultas para cargar solo lo que se necesita: Si descubres que solo necesitas cargar ciertas imágenes en el escritorio o necesitas ejecutar un script específico solo en el dispositivo móvil, usar declaraciones condicionales para cargarlas puede ser una excelente manera de aumentar la velocidad.

De esta manera, no estás obligando al navegador a cargar una variedad de scripts o imágenes que no serán útiles para ciertos dispositivos o ventanas gráficas.

3. Reduce la cantidad de imágenes que usas: Si encuentras que algunas de tus páginas tienen muchas imágenes, intenta eliminar algunas, especialmente si el tamaño de los archivos es grande.

ESPERA...!!!

Aprende paso a paso a crear tu Pagina Web con WordPress que te permitirá AUMENTAR tus ventas en tiempo récord. Ingresa a continuación. > Click aquí <

Esto no solo puede ayudar a reducir las solicitudes HTTP de imágenes, sino que también puede mejorar tu UX al eliminar las imágenes que distraen y que no se corresponden con tu contenido escrito.

4. Sprites CSS: Cuando corresponde, la combinación de imágenes que usas con bastante frecuencia en tu sitio web en una hoja de Sprites y el acceso a las imágenes usando la imagen de fondo CSS y la posición de fondo evita que tu navegador intente constantemente recuperar varias imágenes cada vez que se cargan ciertas páginas en tu sitio.

De esta manera, el navegador solo recupera la que puede usar varias veces en la página colocando correctamente la imagen correcta en la vista para cada área de la página.

Cómo mejorar la velocidad de mi sitio web

2. Utiliza CDN y Elimina Scripts o Archivos no Utilizados

Lo más probable es que muchos de tus usuarios no estén cerca de tu servidor web.

Reducir esta distancia mediante la distribución de tu contenido a través de una variedad de servidores dispersos geográficamente no es una opción viable y será un poco complicado de implementar.

Aquí es donde entra en juego una red de entrega de contenido (CDN). Una CDN es una colección de servidores web distribuidos en múltiples ubicaciones para que el contenido se pueda entregar de manera más eficiente a los usuarios.

Los CDN se utilizan normalmente para contenido estático o archivos que deben tocarse una vez que se cargan.

Los servidores se seleccionan en función de la medida de proximidad de la red del usuario. Por ejemplo, se elige el servidor con el tiempo de respuesta más rápido y la menor cantidad de saltos de red.

Las empresas más grandes tienden a poseer su propia CDN, mientras que las empresas medianas utilizarán un proveedor de CDN como EdgeCast.

Las empresas más pequeñas pueden encontrar un CDN innecesario o fuera de su presupuesto, por lo que el uso de sitios web como CNDjs que tiene una biblioteca de archivos y marcos JS y CSS puede ayudarte a evitar el alojamiento de ciertos archivos en sus propios servidores mientras aumenta el tiempo de carga.

Si encuentras que el sitio web de tu empresa podría beneficiarse del uso de CDN, tómate este tiempo para evaluar también tu sitio para reconocer si hay scripts o archivos CSS sin usar en tu sitio.

Si bien lo más fácil (pero que consume más tiempo) es hacer que tu desarrollador revise tu sitio web y verifique cada página, existen algunas herramientas como UnCSS que pueden eliminar los estilos no utilizados de tu sitio web y disminuir el tamaño de tu archivo CSS.

Te puede interesar: Mejores cursos para ganar dinero

3. Almacenamiento en Caché del Navegador

El almacenamiento en caché del navegador permite que los activos de tu sitio web se descarguen en tu disco duro una vez en un caché o en un espacio de almacenamiento temporal. Esos archivos ahora se almacenan localmente en tu sistema, lo que permite que las cargas de páginas posteriores aumenten la velocidad.

Entre el 40 y el 60% de los visitantes diarios de tu sitio llegan con un caché vacío. Entonces, cuando los usuarios visitan, debes hacer que la primera página que vean se cargue lo suficientemente rápido para que inevitablemente continúen por el resto de tu sitio web con tiempos de carga aún más rápidos.

Los activos estáticos tienen una vida útil en caché de al menos una semana, mientras que los elementos de terceros, como widgets o anuncios, solo duran un día.

CSS, JS, imágenes y archivos multimedia deberían tener una caducidad de una semana, pero idealmente, un año, ya que las directrices de RFC violentas serán más largas.

UN MOMENTO...!!!

Aprende paso a paso a crear tu Pagina Web con WordPress que te permitirá AUMENTAR tus ventas en tiempo récord. Ingresa a continuación. > Click aquí <

4. Comprime Imágenes y Optimiza Archivos

Las imágenes actualmente ocupan el 60% del promedio de bytes cargados por página, alrededor de 1504 KB. En comparación con los activos de otras páginas, como scripts (399 KB), CSS (45 KB) y video (294 KB), las imágenes ocupan una gran cantidad de solicitudes HTTP enviadas.

Como mencioné anteriormente, elimina las imágenes de los activos que creas que no necesitas.

Esto incluye bibliotecas de iconos de las que solo usas dos, esas tres fuentes adicionales que pensaste que podrías usar pero no lo hiciste, e imágenes que tal vez podrían replicarse con CSS (como fondos de color o degradados).

Después de borrar esos activos, echa un vistazo a las imágenes que tienes en tu sitio y comprueba sus tamaños.

La mayoría de las veces, muchas personas tienden a descargar imágenes de sitios de fotografías de archivo y subirlas a su servidor y usarlas sin molestarse en optimizarlas para su web.

Si te encuentras utilizando imágenes grandes, ejecútalas a través de un software de optimización como Image Optimizer.

Mantén todas tus imágenes por debajo de 150 KB, nada por encima de 1920 px de ancho. Si es más grande, notarás que las imágenes se cargan muy tarde después de que se procesa la página, así como los tiempos de respuesta lentos al comportamiento del usuario.

Cuando se trata de qué extensiones de archivo debes usar:

  • SVG es adecuado para imágenes vectoriales en las que deseas recibir una gran cantidad de detalles. Ciertos iconos pueden utilizar bibliotecas de fuentes como FontAwesome para renderizar ciertos gráficos en lugar de guardar imágenes individuales.
  • PNG debe usarse para imágenes que necesiten un fondo transparente detrás, como una imagen circular de una persona o un logotipo.
  • JPG es mejor para fotografías o cualquier cosa donde los detalles sean menos importantes.

Si bien las imágenes seguirán ocupando la mayoría de tus solicitudes HTTP, optimizarlas y tus otros activos finalmente mantendrás su tamaño bajo y aumentarás el rendimiento general de tu sitio web.

Y bueno, llegamos al final de este post. Pero, si quieres aprender más sobre diseño web y seo, mira mis otros artículos del blog y sígueme en mi Instagram, Facebook y mi canal de YouTube, donde siempre estoy compartiendo mucho contenido de valor para ti. ¡Un fuerte abrazo!

Si te gustó este post no olvides compartir!

Eduardo Amunátegui Paz
4Shares

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *