7 consejos para acelerar su sitio web hoy
Todos aman una pequeña y genial animación de carga, ¿verdad? Pero si esa división dura más de un segundo o dos, solo llama la atención sobre el hecho de que el sitio web se está cargando lentamente. Y eso es un asesino de sitios 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 visualmente agradable sino también 100% funcional. Si su sitio se está arrastrando un poco, puede dejar de preocuparse en este momento 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 geniales y se cargan a la velocidad del rayo).
Explore los elementos de Envato
1. Ten cuidado con las animaciones
La animación en el diseño de sitios web es una de las tendencias "it" 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 comience a trabajar con este tipo de efecto y continúe con animaciones más grandes después de tener una buena idea de cómo funcionan y funcionan con el marco general de su sitio web.
La clave para las animaciones no es cargar un montón de archivos de video en su sitio web. Cuanto más pequeña es la animación, más fácil es crear algo con una huella pequeña. Entonces, ¿por dónde empiezas?
Haga algo simple y divertido, como crear un estado flotante animado. Hacer que un botón cambie de color o se expanda es un efecto ingenioso que lo ayudará a dominar el CSS y a tener una buena idea de la animación básica antes de pasar a elementos más grandes. También puede considerar las animaciones de carga AJAX o paralaje. Lo bueno de cualquiera de estas opciones es que le da tiempo para cargar elementos sin que el usuario lo note. Como 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 HD y retina disponibles para los usuarios, es posible que tengas la tentación de cargar todas tus imágenes a tamaño completo a alta resolución cuando construyas tu 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.
Conoce tus tipos de archivo. Los formatos de archivo más comunes para imágenes en la web son JPG, PNG, GIF y SVG.
- JPG: más adecuado para fotos, los archivos JPG pueden variar en tamaño de pequeño a enorme. Al guardar archivos JPG para el uso del sitio web, asegúrese de guardar un archivo optimizado. (En Adobe Photoshop, puede optimizar imágenes para la web utilizando la configuración de exportación en Archivo> Exportar> Exportar como).
- PNG: utilice este formato de archivo para imágenes que incluyan texto, de modo que las letras se vean bien. Este 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 usar para cualquier cosa, desde iconos hasta logotipos.
3. Use el código donde sea posible
Es posible que tenga la tentación de crear un montón de iconos e imágenes ingeniosas para su sitio web y cargar cada uno como un elemento individual. Esto puede causar algunos problemas. En su lugar, use código para llamar a estos elementos cuando sea posible.
Use CSS para cargar imágenes de fondo también. Esto "obligará" a su sitio a cargar todo lo demás por delante del 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 CSS y JavaScript que puedes usar para crear grandes elementos con efectos divertidos y livianos. (CSS Design Awards tiene una colección especialmente agradable de 30 botones y elementos de formulario para probar).
4. Mantenga videos cortos
Otro elemento de diseño web moderno es el uso de videos de pantalla completa en su página de inicio. Esta puede ser otra trampa de tiempo de carga. Te encontrarás atrapado entre la calidad del video, el contenido del video y la velocidad, y tendrás que hacer un sacrificio en alguna parte.
Los mejores videos son súper cortos, solo un par de segundos, y se repiten para que la acción no se detenga. No necesita incluir sonido u otros efectos tampoco.
Puede probar algunos otros trucos para reducir el tamaño de su 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 ordenado, pero no requerirá tanto ancho de banda.
- Considere un video que tiene un tamaño inferior a la pantalla completa.
- Olvídese de la reproducción automática, que puede "engañar" a los usuarios para que piensen que su sitio se carga más rápido de lo que es.
- No te quedes con videos largos. Si desea mostrar varios videoclips, considere un elemento de "control deslizante" de video o cambie manualmente los videos en un horario para que los usuarios vean algo nuevo cada vez que visiten el sitio. (No importa cuán bueno sea su clip, pocos usuarios verán más de unos 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 gestió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 "desactivar" los elementos no utilizados, eche un vistazo de cerca al código y cree para asegurarse de que eso no es lo que está bloqueando su sitio.
6. Mira tus complementos
¿Tiene un montón de complementos o aplicaciones de terceros vinculadas a su sitio? ¿Los estás utilizando activamente a todos? 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 volver a configurar esos complementos. (Un área problemática común es a menudo los complementos para compartir en redes sociales).
7. Comprimir, comprimir, comprimir
No solo se deben comprimir los componentes individuales de su sitio web, sino que también puede comprimir el sitio en su conjunto para ayudarlo a mantenerlo en funcionamiento rápidamente. Entre los elementos que se pueden comprimir se encuentran los archivos CSS, JavaScript, las imágenes y el video (al cambiar el tamaño) y el sitio mientras usa una herramienta como GZIP.
Los archivos minimizados son la mejor ruta cuando se trata de complementos y la creación de archivos más pequeños. También desea verificar 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: el lugar donde coloca este código también cuenta. Enlace CSS a la parte superior de la página y JavaScript a la parte inferior para aumentar también la velocidad de su sitio).
Conclusión
¿Su sitio se está cargando lo suficientemente rápido? Si no, es hora de ajustarlo para cumplir con los tiempos de carga óptimos. (Si tiene que pensar en esta pregunta, entonces 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 se cargue la página, independientemente del dispositivo, es más probable que los usuarios abandonen el sitio por completo. Tómese unos minutos hoy o esta semana y revise esta lista para asegurarse de que su sitio esté funcionando a un nivel óptimo.
Fuente de la imagen: Mohammed Al-Sultan .
