Nada es más frustrante que un sitio web lento
Un sitio web lento es malo no sólo para el usuario final, sino también para la optimización de motores de búsqueda (SEO). Lo que significa, puede hacer que tu sitio web se muestre en un menor rango en los resultados de los motores de búsqueda. Esto se traduce en menos visitas de página y menos ingresos por publicidad o conversión de clientes para ti.
A continuación encontrarás algunas acciones que puedes tomar para que tu sitio web se cargue más rápido. Ayudarán además a que obtengas una mejor clasificación en Google.
CÓMO COMPROBAR LA VELOCIDAD DE TU SITIO WEB
Para saber si tu sitio web es lento o no, utiliza alguna de las muchas herramientas gratuitas diseñadas para informar de ello. Éstas son nuestras preferidas:
Google PageSpeed Insights: herramienta propia de Google. Ofrece recomendaciones para móviles y de escritorio.
GTmetrix: Una de las herramientas más populares por ahí. GTmetrix analiza el rendimiento de tu sitio, comprobando las puntuaciones de PageSpeed. También da sugerencias sobre cómo mejorar el tiempo de carga.
Por debajo de 1 segundo = perfecto
1-3 segundos = sobre el promedio
3-7 segundos = promedio
7+ segundos = muy pobre
Ahora vamos a examinar algunas de las tácticas de velocidad que cada webmaster debe tomar en serio.
Comprimir tu sitio web con Gzip
Gzip es un método simple para comprimir los archivos de tu sitio web para ahorrar ancho de banda y acelerar los tiempos de carga de la página. Gzip trabaja comprimiendo tus archivos en un archivo zip, que es más rápido para cargar en el navegador del usuario. El navegador del usuario entonces descomprime el archivo y muestra el contenido. Este método de transmitir contenido desde el servidor al navegador es mucho más eficiente y ahorra mucho tiempo.
Puedes habilitar Gzip simplemente agregando el siguiente código en tu archivo .htaccess:
# Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml
Corregir todos los enlaces rotos (broken links)
Los enlaces rotos no sólo son un drenaje de ancho de banda, sino que también son una de las maneras más seguras de conseguir que un usuario abandone tu sitio. Uno de nuestros clientes recientemente tuvo varios cientos de errores 404 mostrados en las herramientas para webmasters de Google. Después de arreglar todo esto, el promedio de páginas visitadas por usuario aumentó de 1,4 a 1,85 páginas / visita y hubo una notable disminución en la tasa de rebote.
Para identificar tus enlaces rotos, puedes utilizar, entre muchas otras, la siguiente herramienta (gratis):
https://www.deadlinkchecker.com/
Tamaño de las imágenes antes de cargarlas
Si utilizas un sistema de gestión de contenido (CMS) como WordPress o Joomla, probablemente hayas notado que puedes cargar imágenes a tamaño completo y luego ajustar el tamaño de la pantalla en el backend de tu sitio web.
Sin embargo, esto obliga a los navegadores web a ejecutar varios comandos, sacando las imágenes iniciales y luego volviendo a dimensionarlas al vuelo, lo que puede ralentizar tu sitio.
Para evitar que esto ocurra, utiliza un programa de edición de imágenes para ajustar las imágenes al tamaño correcto antes de agregarlas a tu sitio.
Una vez hecho esto, puedes llevar tu edición de imágenes al siguiente nivel con una herramienta de compresión. Incluso después de volver a dimensionar cada imagen, el tamaño total del archivo podría ser bastante grande y esto ralentizará la velocidad de carga de tu sitio.
Una de las mejores herramientas disponibles es una herramienta en línea llamada TinyPNG. Todo lo que tienes que hacer es hacer clic en el enlace, subir tu imagen y esta herramienta reducirá el tamaño del archivo sin reducir la resolución.
Entonces, todo lo que tienes que hacer es descargar la imagen y subirla a tu sitio. Con esta herramienta tus imágenes se verán exactamente iguales y se cargarán mucho más rápido.
CSS en la parte superior y JS en la parte inferior
Se considera como mejor práctica poner tu CSS tan cerca de la parte superior de tu página como sea posible, ya que los navegadores no renderizarán tu página antes de procesar el archivo CSS.
Javascript, por otro lado, debe estar lo más cerca posible de la parte inferior de tu página, ya que impide que los navegadores analicen después de la etiqueta antes de que se cargue y se complete.
REDUCIR LAS PETICIONES HTTP
Cada vez que se visita tu sitio web, se realiza una solicitud HTTP por cada archivo que tengas configurado en él. Si tu sitio web tiene un montón de archivos, entonces el número de solicitudes HTTP es mayor. Esto afecta gravemente el tiempo de carga de una página. Cuanto menor sea el número de archivos, menor será el tiempo necesario para realizar solicitudes y descargas.
Es natural que un tiempo de carga más largo no es sólo frustrante, sino perjudicial para las experiencias de los usuarios. Sin embargo, puede sonar un poco deprimente a los propietarios de sitios web que los buenos sitios web, incluyendo el diseño web elaborado suelen tener un montón de archivos.
¿Cómo minimizar las peticiones HTTP?
Reduce las imágenes y los diseños – Planifica y dedica tiempo en la etapa de diseño de tu sitio web para reducir el número de solicitudes, debes reducir el número de imágenes funcionales y los diseños innecesarios. Incluye sólo aquellos que son inevitables para tu sitio.
Múltiples CSS combínalos – La parte difícil de un diseño web se encuentra en la elección de los mejores temas del sitio que requieren varios archivos CSS. La combinación de varios archivos CSS en un archivo más grande ayudará gradualmente a minimizar el número de peticiones HTTP.
Reduce el número de botones sociales – Cuanto más botones sociales tengas en tu página web, más número de solicitudes HTTP habrá. Esto significa que los botones sociales pueden ralentizar tu sitio web. Utiliza sólo los botones sociales indispensables que necesitas para promocionar tu sitio de modo que puedas reducir el número de solicitudes HTTP.
Conclusión
A veces podemos sentirnos culpables de crear gráficos espectaculares y un diseño complejo en sacrificio de la velocidad de carga de la página, por lo que no debes olvidar el elemento principal: la experiencia del usuario.
Todo se trata de control. Cuanto más control experimente el usuario, más felices serán!
Cuando necesites una carga rápida, un sitio web atractivo y funcional, implementa estos consejos para impresionar incluso a los clientes más exigentes.
¿Te ha sido útil ésta información para acelerar tu sitio web?, compártela!
