Cómo diseñar una interfaz que está construida 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 en el cumplimiento de esta demanda, los usuarios podrían abandonar su sitio (y es posible que nunca regresen).

Hoy, vamos a buscar formas de asegurarnos de que la interfaz de su sitio web esté diseñada para la velocidad, para que nunca más tenga que preocuparse por los tiempos de carga de la página.

Prueba tu sitio web

Antes de que te detengas en? No hay manera de que mi sitio web sea lento? probarlo 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 realizar la prueba periódicamente para asegurarse de que todo funciona correctamente. (Además, descompone el rendimiento en dispositivos móviles y de escritorio y ofrece sugerencias para mejorar).

El informe hace tres recomendaciones: debe corregir, considerar corregir y aprobar, para los siguientes elementos:

  • Almacenamiento en caché del navegador
  • Optimización de la imagen
  • Respuesta del servidor
  • Scripts y CSS por encima del pliegue
  • Compresión
  • Redirecciones
  • Minificación de CSS, HTML y JavaScript
  • Priorización de contenidos visibles.

Volcar complementos innecesarios

¿Está aferrado a complementos o complementos que simplemente no usa? Es hora de dejarlos.

Incluso los elementos que no están en uso están alejando la velocidad de su sitio. (Esto es especialmente cierto si está trabajando con un sistema como WordPress).

Entra en modo de limpieza y elimina los complementos no utilizados. También debe considerar pensar en los complementos en uso y asegurarse de que realmente los esté utilizando o de que contribuyan a la experiencia general del usuario, si no encuentra una opción mejor.

Además de la cantidad de complementos, la calidad también es una preocupación. No se limite a agregar cualquier plugin antiguo a su sitio web. Trate de encontrar elementos que proporcionen valor real y que sean altamente calificados. Los elementos antiguos y desactualizados también pueden arrastrar su sitio hacia abajo.

Compartir solo cuando sea necesario

Mientras pensamos en los complementos, ¿cuántos botones de redes sociales tienes en tu sitio web? Ahora responde honestamente: ¿Cuántos realmente necesitas?

Demasiados de estos botones pueden ser confusos para los usuarios, cuántos de ellos van a compartir en múltiples plataformas de todos modos, y pueden sobrecargar las velocidades y el tiempo de carga. (Esto es particularmente cierto en el caso de aquellos que están tratando de averiguar cuántos "me gusta" o que comparte una publicación que ya tiene con consultas que se ejecutan 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. Sólo se están interponiendo en el camino.

Tenga cuidado con la sobrecarga de imágenes

¿Video, ilustraciones, fotos y animaciones? ¡Oh mi! Todos estos grandes elementos visuales pueden sumarse a los tiempos de carga. Elegir sabiamente.

Antes de agregar elementos visuales 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?

Debes optimizar todas las imágenes adecuadamente para la web. Como regla general, las imágenes deben ser tan grandes como sea necesario. No exageres y sube fotos a tamaño completo. Requiere un poco de trabajo en la parte delantera, pero te alegrarás de haberlo hecho más tarde (especialmente si tu sitio web continúa creciendo).

Aprovecha otros trucos también. Pruebe fuentes de iconos en lugar de iconos basados ​​en imágenes. Convertir elementos a SVG (formato vectorial escalado) si una fuente de icono no funciona. ¿Usar tanto HTML y CSS? ¿Magia? como puede y no debe atascar el sitio con elementos que se cargan como fotos, como botones, flechas y otras herramientas de interfaz de usuario.

Tomar una carga con herramientas de reducción

Los archivos pequeños son la clave para la velocidad máxima. El equilibrio está en la idea de que las pantallas de alta resolución le permiten compartir y mostrar contenido de la mejor calidad. Ahí es donde entran las herramientas de reducción.

Si no se siente confiado en su capacidad de tamaño y reducción, o simplemente no obtiene el resultado deseado, pruebe una de estas opciones para obtener los archivos hasta los tamaños más pequeños que se puedan usar.

  • WP Smush reduce imágenes para 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 paquetes de archivos para una compresión óptima.
  • Reducir su CSS reduce el tamaño total del código e incluye una API
  • SpriteMe convierte imágenes de fondo en un sprite CSS para guardar solicitudes HTTP
  • CSS Compressor reduce el tamaño total del código

Solo caché

Habilitar el almacenamiento en caché en su sitio web.

Si no estás haciendo esto, tus 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 de páginas para que el navegador lo recuerde. El sitio cuando un usuario vuelve. Reduce el uso de ancho de banda, la carga del servidor y el tiempo de demora (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 con regularidad, necesita limpiar y mantener la base de datos, enlaces y archivos de su sitio web.

Estos son los artículos en la lista de verificación de limpieza de su sitio web:

  • Optimizar su base de datos. Con el tiempo, su base de datos puede saturarse con revisiones, fotos fuera de uso y datos guardados. No tienes que quedártelo todo. Purgue los elementos que ya no forman parte del plan de su sitio web.
  • No hotlink imágenes. Llevar 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. Úsalos solo cuando sea necesario.
  • Corregir enlaces. Los enlaces rotos no pueden ralentizar su sitio, pero ralentiza la conexión que hacen los usuarios desde su sitio a otros lugares, lo que puede ser igualmente malo.Adquiera el hábito de verificar y corregir los enlaces rotos.
  • Mantener 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 la velocidad, así como a mantener su sitio web a salvo de amenazas potenciales. (Y nada es más lento que un sitio que ha sido hackeado o infectado con malware).

Conclusión

Ahora trabaje a través de la lista anterior y vuelva a la herramienta de información de Google Pagespeed Insights. Ejecutalo de nuevo. ¿Notan alguna diferencia?

Nada hará que un usuario sea más feliz y más probable que regrese 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é construido para la velocidad.