Siete consejos para acelerar la velocidad de tu página web

A todos nos gusta un poco de animación mientras una página web carga, ¿no? Pero si eso dura más que uno o dos segundos, entonces llamarás la atención por el hecho de que tu página web es lenta. Eso mata a las páginas web.

Los usuarios esperan que las páginas web carguen de forma rápida y eficiente. Es tu deber asegurar que tu diseño web no solo sea agradable, sino también 100 % funcional. Si tu página web se demora un poco, aquí tenemos siete consejos para acelerar su velocidad con pequeños trucos en el diseño.

1. Usa animaciones

La animación en el diseño web es una de las tendencias de moda este 2015. No te quede atrás al crear archivos masivos que no carguen. Empieza con toques animados pequeños mientras empiezas a trabajar con este tipo de efecto y pasa a animaciones más grandes.

La clave de la animaciones es no cargar muchos archivos de video a tu página web. Mientras más pequeña la animación, mejor. ¿Por dónde empezar?

Haz algo sencillo y divertido como crear un botón en alto relieve. Tener un botón que cambie de color o se expanda es un buen efecto que ayudará a que dominar el CSS y conseguirá una buena sensación para una animación básica antes de pasar a elementos más grandes. Tal vez debas considerar AJAX o animaciones de carga parallax. Lo bueno de estas opciones que cada que te dan tiempo para cargar elementos sin que el usuario lo note. Ya que los elementos cargan mientras el usuario se desplaza hacia abajo, ganas preciosos segundos para alistar todo.

2. Optimiza las imágenes

Con el número de pantallas y retinas HD disponibles, tal vez estés tentado de cargar tus imágenes a tamaño completo y con alta resolución cuando crees tu página web. No caigas en esa trampa. Es probable que la mayoría de estas imágenes sean muy grandes para que tu página web las maneje.

Conoce los tipos de archivos. Los formatos de archivo más comunes para imágenes en la web son JPG, PNG, GIF y SVG.

JPG: Funcionan mejor en fotos. Los archivos JPG pueden cambiar tamaño, de diminutos a enormes. Al guardar archivos JPG para usos en páginas web, asegúrate de optimizarlos.
PNG: Usa este formato de archivo para imágenes que incluyan textos, de modo que las letras se vean bien. Por lo general, este tipo de archivos son pequeños.
GIF: Este es el formato de archivo preferido para elementos animados, como los populares memes. Pero ten cuidado, este tipo de formato puede llegar a pesar mucho si no tienes cuidado.
SVG: Si necesitas una imagen tipo vector para la web, esta es la mejor opción. Pueden ser usado para cualquier cosa, desde íconos hasta diseños de logos.

3. Codifica donde sea posible

Tal vez te veas tentado a crear un montón de íconos e imágenes para tu página web y cargues cada una como un elemento individual. Esto puede causar algunos problemas. En lugar de eso, usa códigos.

Usa CSS para cargar también las imágenes de fondo. Esto va a «forzar» tu página web a cargar todo antes de la imagen de fondo, de modo que los usuarios puedan ver otros elementos o textos de inmediato.

4. Mantén los videos cortos

Otra tendencia de diseño web es el uso de video en pantalla completa en tu página de inicio. Esta puede ser otra trampa de tiempo porque te encontrarás atrapado entre la calidad, cantidad y velocidad del video y tendrás que hacer un sacrificio en algún lugar.

Puedes tratar algunos trucos para bajar el tamaño de tu archivos lo más posible.

Considera una capa de color o borrosidad en lugar de un video de baja resolución. Se verán bien y no necesitarán mucha banda ancha.
Considera un video que ocupe menos de la pantalla completa.
Descarta la autoreproducción de videos, algo que puede hacer pensar a los usuarios que tu página web están cargando más rápido de lo normal.
No optes por videos largos. Si deseas mostrar varios videos, considera un slider de videos o un cambio manual, de modo que los usuarios puedan ver los videos que gusten cada vez que visiten tu página web. (No importa cuán bueno tu video es, muy pocos usuarios lo verán por más de unos segundos, así que no sacrifiques el tiempo de carga por videos más largos).

5. Piensa en la plantilla

Si estás usando WordPress u otro sistema de gestión de contenidos con una plantilla, recuerda que no todas las plantillas están hechas de la misma forma. Aunque es probable que tengas más suerte con una opción de paga —algunos te dejarán deshabilitar elementos que no uses— mira de cerca su construcción y codificación para asegurarte que eso no sea lo que están ralentizando tu página web.

6. Mira tu plugins

¿Tienes muchos plugins o aplicaciones externas atadas a tu página web? ¿Las usas todas de forma activa? Asegúrate de deshabilitar aquellas que no uses para acelerar la velocidad de tu página web.

Los usuarios de WordPress puede tomar ventaja de Plugin Performance Profiler para ver qué plugins están activos y cómo están funcionando. Esto te puede ayudar a identificar problemas o reconfigurar aquellos plugins. (Un problema común son, con frecuencia, los plugins para compartir contenido en redes sociales).

7. Comprime, comprime y comprime

No solo los elementos individuales de tu página web deben ser comprimidos, sino también se debe comprimir la página como un todo para que cargue de forma más rápida. Entre los elementos que pueden ser comprimidos se encuentran los archivos CSS y JavaScript, las imágenes y videos (cambiar de tamaño) y la página web usando una herramienta como GZIP.

Los archivos minificados son la mejor opción cuando se trata de plugins y la creación de archivos más pequeños. También debes revisar el diseño de los códigos dentro de los archivos. Para una velocidad máxima, todo el JavaScript debe estar en un archivo y el CSS debe estar en otro.

Nota: También cuenta la ubicación de tus códigos. Enlaza tu CSS en la parte superior de la página y el JavaScript en la parte inferior para acelerar tu página web.

Conclusión

¿Tu página web carga lo suficientemente rápido? De no ser así, es hora de modificarla para que tenga el menor tiempo de carga.

Las páginas web deben ser rápidas para que los usuarios puedan interactuar de forma inmediata. Mientras más tiempo se demore una página en cargar, sin importar el dispositivo, es más probable que los usuarios la abandonen. Si tu página web está pasando por esta crisis, en Staff Creativa podemos ayudare. ¡Contáctanos!

Traducido y adaptado de Design Shack. Si encuentras un artículo interesante en idioma inglés sobre Diseño Web, Redes Sociales, Imagen Corporativa o Programación, háznoslo saber en los comentarios y nuestro equipo considerará su traducción y publicación.