Cómo diseñar una interfaz diseñada para la velocidad
¿Su sitio web es lento? Se honesto. ¿Podría ser más rápido? Los usuarios demandan sitios web que se cargan rápidamente y continúan entregando contenido sin demora. Si su sitio web se retrasa lo más mínimo posible para satisfacer esta demanda, los usuarios podrían abandonar su sitio (y es posible que nunca regresen).
Hoy, vamos a ver formas de asegurarnos de que la interfaz de su sitio web esté diseñada para la velocidad, para que nunca tenga que preocuparse por los tiempos de carga de la página nuevamente.
Explore los elementos de Envato
Prueba tu sitio web
Antes de detenerse en "no hay forma de que mi sitio web sea lento", pruébelo. Google tiene una gran herramienta que cualquiera puede usar para probar cualquier sitio web ingresando la URL.
Obtiene un informe ingenioso que le dice qué tan rápido se está moviendo su sitio y dónde podría mejorarse. Es una buena idea ejecutar la prueba periódicamente para asegurarse de que todo funcione sin problemas. (Además, desglosa el rendimiento en dispositivos móviles y de escritorio y ofrece sugerencias de mejora).
El informe hace tres recomendaciones (debe solucionar, considerar corregir y aprobar) para los siguientes elementos:
- Almacenamiento en caché del navegador
- Optimización de imagen
- Respuesta del servidor
- Scripts y CSS sobre el pliegue
- Compresión
- Redireccionamientos
- Minificación de CSS, HTML y JavaScript
- Priorización del contenido visible.
Volcar complementos innecesarios
¿Estás aferrado a complementos o complementos que simplemente no usas? Es hora de deshacerse de ellos.
Incluso los elementos que no están en uso están alejando la velocidad de su sitio. (Esto es especialmente cierto si está trabajando en un sistema como WordPress).
Ingrese al modo de limpieza y elimine los complementos no utilizados. Debería considerar pensar en los complementos en uso también y asegurarse de que realmente los esté utilizando o de que contribuyan a la experiencia general del usuario, si no encuentra una mejor opción.
Además de la cantidad de complementos, la calidad también es una preocupación. No agregue ningún complemento antiguo a su sitio web. Trate de encontrar elementos que brinden un valor real y que sean altamente calificados. Los elementos antiguos y desactualizados también pueden arrastrar su sitio hacia abajo.
Comparta solo según sea necesario
Mientras estamos pensando en complementos, ¿cuántos botones para compartir en redes sociales tiene en su sitio web? Ahora conteste honestamente: ¿cuántos necesita realmente?
Demasiados de estos botones pueden ser confusos para los usuarios (cuántos de todos modos compartirán en múltiples plataformas de todos modos) y reducir las velocidades y el tiempo de carga. (Esto es particularmente cierto en el caso de los que intentan averiguar cuántos me gusta o comparte una publicación que ya tiene consultas en ambas direcciones).
Elija una o dos redes donde esté activo y donde los usuarios se conecten con su sitio web regularmente e incluya esos botones. Deshazte del resto. Solo se interponen en el camino.
Tenga cuidado con la sobrecarga de imágenes
Video, ilustraciones, fotos y animaciones ... ¡Dios mío! Todos estos excelentes elementos visuales pueden aumentar los tiempos de carga. Elegir sabiamente.
Antes de agregar cualquier elemento visual al diseño de su sitio web, compare su valor con otros elementos. ¿Proporciona algo para los usuarios? Si es así, proceda. Si no, ¿por qué estás usando ese elemento de diseño?
Debe optimizar todas las imágenes adecuadamente para la web. Como regla general, las imágenes deben ser tan grandes como sea necesario. No se exceda y cargue fotos de tamaño completo. Se necesita un poco de trabajo en el front-end, pero te alegrará de haberlo hecho más tarde (especialmente si tu sitio web continúa creciendo).
Aproveche también otros trucos. Pruebe las fuentes de iconos en lugar de los iconos basados en imágenes. Convierta elementos a SVG (formato vectorial a escala) si una fuente de icono no funciona. Use la mayor cantidad de "magia" HTML y CSS que pueda y no empañe el sitio con elementos que se están cargando como fotos, como botones, flechas y otras herramientas de interfaz de usuario.
Quítese la carga con herramientas de reducción
Los archivos pequeños son la clave de la velocidad máxima. El balance está en la idea de que las pantallas de alta resolución le permiten compartir y exhibir contenido de alta calidad. Ahí es donde entran las herramientas de contracción.
Si no tiene confianza en su capacidad para dimensionar y reducir, o simplemente no está obteniendo el resultado deseado, pruebe una de estas opciones para reducir los archivos a los tamaños más pequeños utilizables.
- WP Smush reduce las imágenes para los usuarios de WordPress
- Kraken comprime imágenes para todos los usuarios
- TinyPNG reduce aún más el tamaño del formato común
- Gzip empaqueta archivos para una compresión óptima
- Minify Your CSS reduce el tamaño general del código e incluye una API
- SpriteMe convierte las imágenes de fondo en un sprite CSS para guardar solicitudes HTTP
- CSS Compressor reduce el tamaño general del código
Solo cachéalo
Habilite el almacenamiento en caché en su sitio web.
Si no está haciendo esto, sus usuarios están pagando el precio. Todavía hay algunas personas por ahí que podrían argumentar lo contrario, pero el valor para los usuarios supera esos argumentos. Su sitio web debe ser rápido.
Un caché crea un archivo temporal a partir de páginas para que el navegador "recuerde" el sitio cuando un usuario regrese. Reduce el uso de ancho de banda, la carga del servidor y el tiempo de retraso (real o percibido). Los usuarios se lo agradecerán, especialmente cuando se trata de acceder a sitios web más masivos.
Limpiarlo regularmente
Al igual que tiene que limpiar su hogar de forma regular, debe limpiar y mantener la base de datos, enlaces y archivos de su sitio web.
Estos son los elementos de la lista de verificación de limpieza de su sitio web:
- Optimiza tu base de datos. Con el tiempo, su base de datos puede atascarse con revisiones, fotos fuera de uso y datos guardados. No tienes que quedarte con todo. Purgue elementos que ya no forman parte de su plan de sitio web.
- No vincular imágenes. Extraer imágenes del sitio web (y el servidor) de otra persona al suyo es solo una mala idea. Y es lento. Lo mismo ocurre con casi cualquier otra solicitud de archivo externo. Úselos solo cuando sea necesario.
- Arreglar enlaces. Los enlaces rotos pueden no ralentizar su sitio, pero ralentiza la conexión que los usuarios hacen desde su sitio a otros lugares, lo que puede ser igualmente malo. Acostúmbrese a verificar y corregir enlaces rotos.
- Mantén todo actualizado. Si está ejecutando en una plataforma como WordPress, tome las actualizaciones. Si está utilizando un tema o elementos en caja de cualquier tipo, lo mismo es cierto. Las actualizaciones pueden contener parches que contribuyen a acelerar y a proteger su sitio web de posibles amenazas. (Y nada es más lento que un sitio que ha sido pirateado o infectado con malware).
Conclusión
Ahora revise la lista anterior y regrese a la herramienta de Google Pagespeed Insights. Ejecútalo de nuevo. ¿Notas alguna diferencia?
Nada hará que un usuario esté más feliz y tenga más probabilidades de volver a su sitio web que una experiencia excelente y rápida. Durante todas las fases del diseño visual, recuerde pensar también en el diseño de la interfaz para que su sitio web esté diseñado para la velocidad.
