Descubre 7 formas efectivas de acelerar instantáneamente tu sitio web, incluyendo la reducción de solicitudes HTTP, optimización de imágenes, habilitación de caché, compresión de archivos y actualización de tu hosting.
Primero, necesitas saber exactamente qué tan rápido o lento es tu sitio web. Ya hemos establecido que el rango ideal es de 2-3 segundos. Desafortunadamente, para los internautas de todo el mundo, la mayoría de los sitios web no se acercan a ese objetivo. De hecho, Google analizó cientos de miles de páginas de aterrizaje en 126 países y descubrió que el 70% de las páginas tardaban hasta siete segundos en cargar.
Ouch.
Eso es patético. La mala noticia es que literalmente hay millones de marketers online dejando dinero sobre la mesa. Mucho dinero. Si supieran cuánto, probablemente llorarían. La buena noticia es que no debería ser tan difícil sacar tu sitio web del letargo y llevarlo al grupo de sitios que pueden alcanzar esa marca de tres segundos o menos.
¿Cómo saber qué tan rápido carga realmente tu sitio web? Visita el probador de Pingdom – es gratis – y escribe tu URL. Unos segundos (o más) después tendrás todos los detalles. Entonces es momento de arremangarte y ponerte a trabajar.
Ese pequeño texto en tu sitio web apenas requiere esfuerzo para descargarse en el navegador de un visitante. Lo que crea cuellos de botella y lentitud son todos los demás elementos que intervienen, como scripts, imágenes, videos y hojas de estilo. Por cada uno de estos elementos que aparece en una página web, se envía una solicitud separada al servidor para descargarlo. Los diseñadores web a menudo cometen el error de simplemente poner demasiadas “cosas” en una página. Sin darse cuenta, consumen una cantidad increíble de ancho de banda y, al final, terminan en el 70% de los sitios web que tardan más de cuatro segundos en cargar.
Si estás pensando: “necesito reducir las solicitudes HTTP”, ¡tienes razón! Es así de simple. Menos solicitudes al servidor HTTP significa, todo lo demás igual, un sitio web que carga más rápido. Esto también significa que debes pensar, realmente pensar, en los elementos de tu sitio web y si necesitan estar ahí. Cada uno implica una solicitud al servidor.
¿Tienes curiosidad por saber cuántas solicitudes hace actualmente tu sitio web? Profundiza en esos resultados de Pingdom y encontrarás la respuesta. ¿Cuántas son demasiadas? No hay una respuesta definitiva. Lo mejor es analizar tu sitio y decidir si un elemento es crítico o no. Si no lo es, elimínalo.
En los primeros días de la era de Internet, las imágenes eran escasas y el texto dominaba. A medida que la tecnología online ha avanzado, especialmente en lo que respecta a la velocidad de conexión, los propietarios de sitios web han desarrollado la tendencia de publicar muchas imágenes. Si se hace bien, no es una mala estrategia. Nada atrae tanto la atención de un visitante para “quedarse un rato” como una imagen atractiva (las palmeras y los cachorros funcionan bien).
El inconveniente es que las fotos tomadas con cámaras de smartphones y bancos de imágenes suelen pesar varios megabytes y devoran el ancho de banda como el monstruo de las galletas en un atracón de fin de semana. Cuando incluyes unas cuantas en docenas o incluso cientos de publicaciones, tu sitio web se vuelve dolorosamente lento.
Esto tiene una solución sencilla. Usa un editor gráfico como Photoshop o Pixlr (una alternativa gratuita online), si no quieres gastar cientos de dólares en software. Para trabajar con imágenes grandes, normalmente las guardarás en formato .jpeg (también .jpg) y tratarás de reducir la resolución a 100 kilobytes o menos. Obviamente, se han escrito libros sobre la resolución de imágenes, pero por ahora enfoquémonos en que reducir el tamaño del archivo debería acelerar tu sitio web.
Si el servidor lo indica, la mayoría de los navegadores pueden “guardar en caché” o almacenar archivos en memoria temporal hasta que se necesiten de nuevo. Funciona así:
Básicamente, el navegador muestra rápidamente los elementos estáticos sin necesidad de descargar nada del servidor. Los elementos dinámicos (que cambian) requieren una solicitud al servidor para que el navegador pueda obtener la versión más reciente, lo que tarda un poco más.
Lo mejor – y lo que hace felices a los visitantes – es que tienen algo que ver mientras se descargan los elementos dinámicos. Tener imágenes o algún tipo de contenido en pantalla es mejor que un gran espacio en blanco con un reloj de arena girando, y aumenta las probabilidades de que tu visitante recurrente se quede el tiempo suficiente para que carguen los elementos dinámicos. Si la frase “caché del navegador” te da ganas de abandonar Internet para siempre, llama al soporte técnico de tu hosting y pídeles que lo configuren por ti.
Puedes encontrar estimaciones muy variadas en Internet, pero la conclusión es que, para un sitio web sin comprimir, deberías poder reducir el tamaño total de los archivos entre un 50% y 90% gracias a Gzip. Los archivos más pequeños necesitan menos ancho de banda y cargan más rápido. Gzip es un formato de código abierto que comprime todos los archivos de tu sitio en un paquete ordenado.
Cuando un navegador solicita el sitio, recibe un archivo llamado algo así como index.html.gz en lugar del clásico index.html. Una vez que este paquete optimizado llega, el navegador lo descomprime rápidamente y lo muestra al visitante.
Un buen ejemplo de cuánto puedes ahorrar es la página de inicio de Yahoo, que pesa unos 101 kb sin comprimir, pero solo 10 kb comprimida. Sí, Gzip podría hacer lo mismo por tu sitio web.
No puedes obligar al navegador a aceptar la versión comprimida, pero al menos puedes configurar el servidor para que ofrezca ambas opciones. Esto es sencillo para alguien que trabaja habitualmente con servidores. Si ese no eres tú, otra llamada al soporte técnico de tu hosting puede ser lo ideal.
El proceso de optimización no es solo para imágenes. También aplica para el CSS (hojas de estilo en cascada). Echa un vistazo a un CSS y verás mucho código, pero probablemente también mucho espacio en blanco. Las hojas de estilo son importantes – no lo dudes – pero no tienen que ser bonitas a la vista humana.
Mira el ejemplo de CSS a continuación. Se ve ordenado, ¿verdad? Todo perfectamente alineado para decirle al navegador cómo mostrar la web. Pero observa todo el espacio en blanco. Cada espacio en blanco hace que el archivo sea más grande. Si se repite cientos o miles de veces, tendrás un archivo más grande de lo necesario. La buena noticia es que no tienes que buscar un bisturí digital y eliminarlo tú mismo.
Existen excelentes herramientas online como el gratuito CSS Minifier, que toma un CSS estándar como este…
p.uppercase {
text-transform: uppercase;
}
p.lowercase {
text-transform: lowercase;
}
p.capitalize {
text-transform: capitalize;
}
…y lo convierte en esto.
p.uppercase{text-transform:uppercase}p.lowercase{text-transform:lowercase}p.capitalize{text-transform:capitalize}
Básicamente, lo comprime todo para que no se desperdicie ningún espacio. Cuando buscas una descarga rápida de tu sitio, cada pequeño detalle ayuda.
De vez en cuando, Internet aprende algo del mundo editorial impreso y la frase “por debajo del pliegue” es un ejemplo. Si alguna vez has visto un montón de periódicos en la tienda, habrás notado que están doblados para que puedas ver la mitad superior con las noticias más importantes a primera vista. Los temas menos importantes quedan fuera de vista, por debajo del pliegue.
Esta es una gran idea para aplicar al organizar el código HTML de tu sitio, especialmente al gestionar JavaScript (JS), que suele detener la descarga y visualización de la página para el visitante. En lugar de poner JS al principio del documento, ponlo al final de la sección body. Así todo lo demás carga primero y el visitante puede ver imágenes y contenido escrito mientras el script termina de descargarse.
De lo contrario, la pantalla se quedará en blanco hasta que el JS se cargue completamente. Las pantallas en blanco son una invitación para que un visitante impaciente se marche. Dales algo que hacer hasta que la funcionalidad adicional de JavaScript esté lista para usar. ¿Ves? Los internautas pueden aprender algo de la era de los periódicos del siglo XX.
Ya sea que tengas una tienda online o uses un sitio web para promocionar servicios, el objetivo es el mismo: tiene que cargar rápido. Los clientes potenciales que esperan a que el contenido aparezca en su navegador no esperarán mucho. Se irán. A menudo se pasa por alto que una de las decisiones más básicas – el tipo de alojamiento web – puede tener un gran impacto en la velocidad de carga del sitio.
El alojamiento compartido es barato (a veces incluso gratuito), pero rara vez es la mejor opción. A cambio de precios bajos, el proveedor pone demasiados sitios en un solo servidor y el rendimiento se resiente. Peor aún, los recursos como el ancho de banda, almacenamiento y velocidad de procesamiento se reparten en común. Si un sitio usa demasiado, los demás pueden cargar lento, congelarse o volverse inaccesibles.
Si tu sitio web es algo más que un hobby, el alojamiento compartido no es una buena opción.
Una mejor alternativa para un sitio web de empresa, por unos pocos dólares más al mes, sería un hosting dedicado o VPS (Servidor Privado Virtual), que garantizan recursos reservados para tu sitio y sin preocuparte por el comportamiento de tus “vecinos”, porque no tendrás vecinos.
Además, con el servicio de hosting VPS gestionado , a diferencia del no gestionado, obtendrás soporte adicional de tu proveedor de hosting.
Para cualquier PyME que quiera una presencia web seria, recomendamos explorar alternativas al hosting compartido.
Si todo esto te parece muy técnico, quizá deberías considerar utilizar soluciones de creación de sitios web de terceros. Estas apps te permiten crear un sitio desde cero con un sencillo sistema de arrastrar y soltar. No solo son bastante económicas, sino que el alojamiento también está completamente gestionado por ellas. Los sitios alojados allí cargan relativamente más rápido que en tu propio servidor. Así puedes centrarte en lo que haces bien: crear contenido y aumentar el tráfico de tu web.
Para comprender el panorama general, la planificación cuidadosa debe ser la primera acción al crear un sitio web. Es decir, debes elegir cuidadosamente qué elementos incluir. ¿Cada uno es realmente necesario? Busca temas ligeros (de poco tamaño) y plugins bien codificados y verificados . En otras palabras, diseña pensando en la velocidad desde el principio. Así evitarás tener que hacer ajustes después al darte cuenta de que es lento y devora el ancho de banda.
Una cosa es segura: a medida que los usuarios se vuelven más sofisticados y exigentes con los sitios que visitan –especialmente en cuanto a streaming de audio, video e interactividad– el tamaño de los archivos solo aumentará. Esto significa que los propietarios de negocios deben estar siempre atentos para evitar que la velocidad disminuya con el tiempo. Lo mejor es realizar pruebas periódicas y buscar siempre cómo optimizar tu sitio para que siempre funcione como la máquina bien afinada que deseas que sea.
La velocidad del sitio web impacta directamente en la experiencia del usuario y en las tasas de conversión. Los sitios web lentos pueden generar pérdida de ingresos, ya que los visitantes pueden irse antes de que cargue el sitio.
Los métodos clave incluyen reducir las solicitudes HTTP, optimizar imágenes, habilitar el caché del navegador, comprimir archivos con Gzip, optimizar el CSS, mejorar la ubicación de JavaScript y elegir un mejor alojamiento web.
Puedes usar herramientas gratuitas como Pingdom para probar el tiempo de carga de tu sitio web y descubrir áreas de mejora.
El alojamiento compartido suele ser lento debido a recursos limitados. Para sitios web de negocios, se recomienda un alojamiento dedicado o VPS para un mejor rendimiento y fiabilidad.
Gary Stevens es un desarrollador front end. Es un apasionado de la tecnología blockchain y voluntario en la fundación Ethereum, además de ser un contribuyente activo en Github.
Implementa estas estrategias comprobadas para reducir los tiempos de carga y mejorar la experiencia de usuario en tu sitio web.
Las marcas están utilizando sorteos para aumentar el tráfico, seguidores en redes sociales y listas de correo electrónico. Esta guía te enseñará cómo organizar ...
Descubre por qué tus usuarios no convierten y aprende soluciones prácticas con PropellerAds. Este video revelador expone las principales razones de las bajas co...
Una página de aterrizaje es creada por el comerciante y puede ser cualquier página web en el sitio del comerciante. Aprende más sobre las páginas de aterrizaje ...
Únete a nuestra comunidad de clientes satisfechos y brinda excelente soporte al cliente con Post Affiliate Pro.
