Lazy Loading Performance in Ionic
Lazy loading was introduced in Ionic 3 to reduce application startup time. It started out as an experimental feature, but has since then become the default way for building Ionic applications. However, even with lazy loading enabled, application performance can be tweaked further with different configurations options.
In theory, lazy loading with module preloading enabled should be the best choice as it combines both benefits:
- shorter time till the first page is displayed, and
- no additional delays when accessing other pages for the first time (if the user isn't too quick).
|Module preloading||Low-end device||High-end device|
|Enabled||19.1 s||3.0 s|
|Disabled||4.1 s||1.1 s|
We're currently quite satisfied with the overall application performance as is. The delays when accessing pages for the first time are not too much of a problem. If they were, there's one more trick available in Ionic: priority can be set for each page, specifying how it should be treated by module preloading. Setting it to
off will exclude it from preloading altogether as if preloading was disabled.
If we ever encounter a single page (or a couple of them) which will have too long a delay on first access, we will try re-enabling module preloading and set priority to
off for all pages accept those few problematic ones. It should hopefully keep the startup time short enough while avoiding delays for the selected pages.