Keep track of widgets. Do your best to minimize the number of widgets in your project. Use the same widgets for different layouts and delete unused widgets instead of hiding them. You can quickly get rid of the idle widgets by clicking on the three-dot icon next to Layers in the widgets panel and selecting Remove unused. Keep in mind that the content of widgets is synchronized between layouts so any revisions to them register in every version of your project. There are many attributes such as size, color, font styles, or animations that can be changed independently for each layout.
Spread the content across multiple pages. The key factor that influences performance is the number of widgets per page (as opposed to the overall number of widgets in the entire project). This action will generally accelerate the speed at which it loads and processes.
You can also organize widgets that belong together into groups—this will speed up the workflow and help keep widgets under control. To create a group, select the widgets you want and press Cmd+G/Ctrl+G. Rename groups as you like; just click once on the group name. Widgets can also be dragged and dropped to a group via the Layers bar.
Compress the images. Readymag applies smart lossy techniques to all images automatically. But if your files are extremely big it’s better to reduce their size before uploading them into your project: e.g., a tool like TinyPNG allows images to be compressed without any quality loss. GIF files are supported by Readymag, but it’s highly recommended to use them only in cases of extreme necessity: they’re larger than almost any other image format—Google developers even recommend converting GIFs to .mp4 videos for the sake of performance. At Readymag it’s better to utilize animation instead of GIFs whenever possible.
Simplify the mobile layout. Dealing with internet connection issues while browsing projects with a smartphone is extremely common. To prevent problems consider simplifying the mobile version further. Readymag offers a great tool to start with: the mobile auto-layout feature.
If a project is extra widget-heavy, try using a preloader: it's a custom image or animation that fills the screen until the project has uploaded completely. To create a preloader, we suggest using opacity animation with delay. Add a preloader as a front layer and then animate its opacity to zero, setting the delay long enough to allow the website to upload. Here's a step-by-step tutorial on how to create a preloader.
To check the performance of your project, we recommend using Lighthouse, an audit system embedded in Google Chrome. Get detailed instructions from Google here.