pageloadtime | wpsiteplan
Have you ever opened a page in an app and waited for what seemed like an eternity for the content to appear? If so, you are not alone. Many users experience frustration and boredom when they encounter slow-loading pages, and some may even abandon the app or try to reload the page multiple times. This can have a negative impact on the app’s performance, user retention, and revenue.
That’s why optimising page load time is crucial for creating a satisfying and engaging user experience. According to industry standards, the ideal page load time is less than 2 seconds. However, this can vary depending on the needs and features of the page.
Page performance is the key used to refer the time taken from the user action to load the contents in a page. For eg,
- In a search page, page load time is the time between pressing the enter key in the search bar and seeing the search results.
- In a product details page, page load time is the time between clicking on a product tile from the search results page and viewing the product details.
By minimising this duration, you can improve your page loading time and ultimately provide a superior user experience.
How can page load time be measured?
To illustrate, let’s take the example of viewing a product’s details page on an app. Suppose you are on a page that lists some products. When you tap on one of them, it begins to track how long it takes for that product’s details page to load and become interactive. The process can be described as below:
- Page Initialisation: This phase involves the creation of a new page instance. Eg: Once the user clicks on the search result, the particular product detail page controller and supporting classes will be initialised.
- Data Task: After the controller loads, a loader is displayed during the network call until a response is received. This phase includes the time required to create the request payload -> make the network call -> parse the response. Eg: To get the product data from backend, for that particular item id’s request payload will be created next and leading to a network call. During this time a loader will be displayed to engage the user. Then the network call will be completed and response data is return to application. Next step is to parse the data into required product data model.
- Page Rendering: Once the data is obtained and stored in models, the UI is constructed using different UI components. Eg: Here, using the product response model, UI will be constructed to show the product images, details, price, offers, similar items etc…
- Finish: This marks the completion of the page load process. Once the rendering is finished , we can mark the page load has ended and the time till here can be marked as page load time for the corresponding page.
By tracking the duration of each phase, the page load time can be effectively measured.
To measure the time, you can incorporate appropriate time logs within the app both locally by putting logs for the time taken by each phase and in real-time by logging the time of each phase with the help of an analytics tool. It is important to note that optimising the time from the front-end may not be able to address the network call phase, as this is influenced by server latency and needs to be optimised on the server-side. The focus here is to implement clean and optimised code in the other phases to improve overall page load time.
Considerations for improving page performance:
- Optimise data structures: Choose the data structures that best suit your needs and avoid unnecessary copying or referencing of data. For example, use value types instead of reference types when possible, and leverage copy-on-write semantics to reduce memory usage and improve performance.
- Reduce code and time complexity: Analyse your algorithms and code complexity to ensure they are optimised for efficient execution and completion of tasks.
- Maintain clean code: Write clear and concise code that follows the best practices and conventions of your programming language and framework. Eliminate any redundant or irrelevant code, such as unused variables, logs, or imports. Use conditional code to handle different scenarios and edge cases. Initialise only the classes that are necessary for your app functionality and avoid creating unused objects.
- Implement lazy loading: Implementing lazy loading can enhance app performance by deferring the creation of objects or the execution of tasks until they are required. This approach reduces the initial workload, leading to improved overall performance.
- Utilise final and private keywords: By using the final and private keywords appropriately, you can reduce the overhead of dynamic dispatch and enhance performance. (Source)
- Implement concurrency and multi threading: Utilise background threads for executing heavy tasks such as download tasks, using multi threading for parallel API calls, enabling better utilisation of system resources and improving overall performance.
Conclusion
When it comes to making an app work better, every app is unique in how it’s built and how it behaves. I hope the information I’ve shared here can help you improve your app in some way. In the competitive world of mobile apps, it’s really important to make sure your app performs well so that users have a great experience and you stay ahead of the competition. Don’t forget to keep an eye on how your app is performing and make changes as needed to make sure it keeps working well.
Mastering Page Load Time: Essential Strategies for iOS App Optimisation was originally published in Walmart Global Tech Blog on Medium, where people are continuing the conversation by highlighting and responding to this story.