Mantén seguimiento de los widgets. Haz tu mejor esfuerzo por minimizar la cantidad de widgets en tu proyecto. Usa los mismos widgets para diferentes diseños (Tablet y Mobile) y elimina los no utilizados en lugar de ocultarlos. Ten en cuenta que el contenido de los widgets está sincronizado entre diseños, por lo que cualquier revisión de ellos se registra en cada versión de tu proyecto. Los atributos como el tamaño, el color, los estilos de fuente o las animaciones se pueden cambiar de forma independiente para cada diseño.
Distribuye el contenido en varias páginas. El factor clave que más influye en el rendimiento es el número de widgets por página (en oposición al número total de widgets en todo el proyecto). Esta acción generalmente acelerará la velocidad a la que se carga y procesa cada página.
También puedes organizar widgets en grupos. Esto acelerará el flujo de trabajo y ayudará a mantener los widgets bajo control. Para crear un grupo, selecciona los widgets que desees y presiona Cmd+G/ Ctrl+G. Puedes cambiar el nombre de los grupos a tu gusto haciendo clic en el nombre del grupo. Dentro de la barra de tareas, los widgets también se pueden arrastrar y mover a un grupo.
Comprime las imágenes. Readymag aplica técnicas inteligentes de optimización a todas las imágenes automáticamente. Sin embargo, si tus archivos son extremadamente grandes, es mejor reducir su tamaño antes de cargarlos en tu proyecto: por ejemplo, una herramienta como TinyPNG permite comprimir las imágenes sin pérdida de calidad. Es posible utilizar archivos GIF, pero se recomienda encarecidamente usarlos solo en casos de extrema necesidad: son más grandes que casi cualquier otro formato de imagen. Los desarrolladores de Google recomiendan convertir GIF a videos .mp4 para favorecer el rendimiento. En Readymag, es mejor utilizar animación en lugar de GIF siempre que sea posible.
Simplifica el diseño móvil. Lidiar con problemas de conexión a internet mientras se navega con un teléfono inteligente es extremadamente común. Para evitar este tipo de problemas, considera simplificar aún más la versión móvil. Readymag ofrece una gran herramienta para comenzar: la función de diseño automático (Mobile Auto-layout) para dispositivos móviles.
Si tu proyecto necesita de muchos widgets, intenta usar un precargador: una imagen o animación personalizada, que ocupa la pantalla hasta que el proyecto se haya cargado por completo. Para crear un precargador, sugerimos usar animación de opacidad con retraso (Opacity effect+Delay). Agrega un precargador como capa frontal y luego anima su opacidad a cero, estableciendo el retraso lo suficiente como para permitir que el sitio web se cargue.
Para verificar el rendimiento de tu proyecto, te recomendamos utilizar Lighthouse, un sistema de auditoría integrado en Google Chrome. Obtén las instrucciones detalladas de Google aquí.