Todo el mundo ama una pequeña animación de carga, ¿verdad? Pero si esa división dura más de uno o dos segundos, solo llama la atención sobre el hecho de que el sitio web se carga lentamente. Y eso es un asesino de sitio web.
Los usuarios esperan que los sitios web se carguen de manera rápida y eficiente. Es su trabajo asegurarse de que el diseño no solo sea agradable a la vista, sino también funcional al 100%. Si su sitio se está arrastrando un poco, puede dejar de preocuparse ahora mismo porque tenemos siete consejos para ayudarlo a acelerar su sitio web con pequeños ajustes en el diseño. (Asegúrese de visitar cada uno de los sitios web mostrados en la publicación; se ven muy bien y se cargan muy rápido).
1. Cuídate con las animaciones
Animación en diseño de sitios web es uno de los? It? tendencias de 2015. No se quede atrás creando archivos masivos que simplemente no se cargan. Comience con toques animados más pequeños a medida que comienza a trabajar con este tipo de efecto y continúe con animaciones más grandes después de tener una idea general de cómo funcionan y cómo funcionan con el marco general de su sitio web.
La clave para las animaciones es no cargar un montón de archivos de video en tu sitio web. Cuanto más pequeña sea la animación, más fácil será crear algo con una huella pequeña. Entonces, ¿por dónde empiezas?
Haz algo simple y divertido, como crear un estado de animación animado. Cambiar el color o expandir un botón es un efecto ingenioso que lo ayudará a dominar el CSS y a tener una idea general de la animación básica antes de pasar a elementos más grandes. También puede considerar las animaciones de carga de AJAX o de paralaje. Lo bueno de cualquiera de estas opciones es que le da tiempo para cargar elementos sin que el usuario se dé cuenta. Debido a que los elementos se cargan a medida que los usuarios se desplazan, ganas unos segundos preciosos para tener todo listo.
2. Optimizar imágenes
Con la cantidad de pantallas de alta definición y retina disponibles para los usuarios, puede tener la tentación de cargar todas sus imágenes en tamaño completo en alta resolución cuando construya su sitio web. No caigas en esta trampa. Es probable que la mayoría de estas imágenes sean demasiado grandes para que su sitio las maneje de manera eficiente.
Conozca sus tipos de archivo. Los formatos de archivo más comunes para imágenes en la web son JPG, PNG, GIF y SVG.
- JPG: Ideales para fotos, los archivos JPG pueden variar en tamaño desde pequeños a enormes. Al guardar archivos JPG para el uso del sitio web, asegúrese de guardar un archivo optimizado. (En Adobe Photoshop, puede optimizar las imágenes para la web usando la configuración de exportación en Archivo> Exportar> Exportar como).
- PNG: Utilice este formato de archivo para imágenes que incluyen texto, de modo que las letras se representen bien. Esto suele ser un archivo bastante pequeño.
- GIF: El formato de archivo preferido para elementos animados más pequeños, como la siempre popular imagen animada de estilo meme. Pero cuidado, este formato de archivo puede ser pesado si no tienes cuidado.
- SVG: Si necesita una imagen vectorial para la web, esta es la mejor opción. Se puede utilizar para cualquier cosa, desde iconos hasta logotipos.
3. Usa el código donde sea posible
Puede tener la tentación de crear un montón de ingeniosos iconos e imágenes para su sitio web y cargarlos como un elemento individual. Esto puede causar algunos problemas. En su lugar, use el código para llamar a estos elementos cuando sea posible.
Usa CSS para cargar imágenes de fondo también. ¿Esta fuerza? su sitio para cargar todo lo demás antes que el fondo, para que los usuarios puedan comenzar a ver otros elementos y texto en el sitio de inmediato. W3Schools tiene un excelente y sencillo tutorial sobre cómo hacer esto.
Hay muchas herramientas, desde íconos de Font Awesome hasta muchas otras bibliotecas de CSS y JavaScript que puedes usar para crear grandes elementos con efectos divertidos y livianos. (Los CSS Design Awards tienen una colección especialmente agradable de 30 botones y elementos de formulario para probar).
4. Mantenga los videos cortos
Otro elemento de diseño web de moda es el uso de videos de pantalla completa en su página de inicio. Esto puede ser otra trampa de tiempo de carga. Usted se encontrará atrapado entre la calidad del video, el contenido del video y la velocidad, y tendrá que hacer un sacrificio en algún lugar.
Los mejores videos son súper cortos (solo un par de segundos) y en bucle para que la acción no se detenga. No es necesario que incluyas sonido u otros efectos.
Puedes probar algunos otros trucos para reducir el tamaño de tu archivo tanto como sea posible.
- Piense en una superposición de color o desenfoque sobre un video de menor resolución. Todavía puede verse limpio, pero no requerirá tanto ancho de banda.
- Considere un video que sea menor que el tamaño de la pantalla completa.
- Deshazte de la reproducción automática, ¿cuál puede ser? ¿Truco? Los usuarios creen que su sitio se carga más rápido de lo que es.
- No te quedes atascado con videos largos. Si desea mostrar varios clips de video, considere un deslizador de video? Elemento o cambio manual de videos en un horario para que los usuarios vean algo nuevo cada vez que visitan el sitio. (No importa qué tan bueno sea su clip, pocos usuarios verán más de unos pocos segundos, así que no sacrifique el tiempo de carga por clips más largos).
5. Piensa en el tema
Si está utilizando WordPress u otro sistema de administración de contenido con un tema, recuerde que no todos los temas se crean de la misma manera. Si bien es probable que tenga más suerte con una opción premium, algunas de las cuales le permiten "apagarse". Elementos no utilizados: mire el código de cerca y compile para asegurarse de que eso no es lo que está atascando su sitio.
6. Cuida tus plugins
¿Tiene un montón de complementos o aplicaciones de terceros vinculados a su sitio? ¿Estás utilizando activamente todos ellos? Asegúrese de desactivar los complementos no utilizados para optimizar la eficiencia.
Los usuarios de WordPress pueden aprovechar el Plugin Performance Profiler para ver qué complementos están activos y cómo funcionan. Esto puede ayudarlo a solucionar e identificar problemas y eliminar o reconfigurar esos complementos. (Un área de problema común es a menudo complementos de intercambio social.)
7. Comprimir, Comprimir, Comprimir
Los componentes individuales de su sitio web no solo deben estar comprimidos, sino que también puede comprimir el sitio en su totalidad para ayudar a mantenerlo en funcionamiento rápidamente. Entre los elementos que se pueden comprimir están los archivos CSS y JavaScript, las imágenes y el video (al cambiar el tamaño) y el sitio mientras se usa una herramienta como GZIP.
Los archivos minificados son la mejor ruta cuando se trata de complementos y la creación de archivos más pequeños. También desea comprobar cómo está diseñado el código dentro del sitio. Para una velocidad máxima, todo el JavaScript debe estar contenido en un archivo y todo el CSS debe estar contenido en otro archivo. (Otra nota: donde coloque este código también cuenta. Vincule CSS a la parte superior de la página y JavaScript a la parte inferior para aumentar la velocidad de su sitio).
Conclusión
¿Se está cargando su sitio lo suficientemente rápido? Si no, es hora de modificarlo para cumplir con los tiempos de carga óptimos. (Si tiene que pensar en esta pregunta, su sitio probablemente no sea lo suficientemente rápido).
Los sitios web deben ser rápidos para que los usuarios puedan interactuar de inmediato. Cuanto más tarde la página en cargarse, independientemente del dispositivo, es más probable que los usuarios abandonen el sitio por completo. Así que tómese unos minutos hoy o esta semana y revise esta lista para asegurarse de que su sitio tenga un rendimiento óptimo.
Fuente de la imagen: Mohammed Al-Sultan.