Slow rendering is another performance issue that powerfully influences the user experience. Users expect interactive and smooth user interfaces, and that's where a development team needs to increasingly focus their efforts. It's not enough to make loading and the first rendering fast; the application also needs to perform well. Response time should be instantaneous, animations should be smooth, and scrolling should be stick-to-finger-fast. To create an application with an excellent experience, a developer needs to understand how to write code that runs as efficiently as possible.
Slow rendering
Device refresh rate
Users interact and see the results of how an application reacts and updates the image on the display of the device, which is why it's an essential part that provides an excellent user experience. Manufacturers continue to improve display hardware, so it's important to understand some display characteristics.
The refresh rate of a display is how many times per second the image on the screen can be refreshed. It's measured in hertz (Hz), so if the refresh rate of a display is 60 Hz, then the displayed picture cannot be updated more than 60 times per second.
The refresh rate that leads to a good experience depends on the purpose. Movies in movie theaters run at just 24 Hz, while the old TV standards were 50 Hz and 60 Hz. A typical monitor for a personal computer has a 60 Hz refresh rate, but the latest gaming displays can reach 240 Hz.
Since the device refresh rate is a hardware characteristic and a software developer can't influence it, the frame rate is of more interest. The following (from https://developer.apple.com/library/content/documentation/DeviceInformation/Reference/iOSDeviceCompatibility/Displays/Displays.html) shows the refresh rates and recommended frame rates for popular devices:
| Device | Refresh rate | Recommended frame rates |
|---|---|---|
|
iPhone X |
60 Hz |
60, 30, 20 |
|
iPhone 8 Plus |
60 Hz |
60, 30, 20 |
|
iPhone 8 |
60 Hz |
60, 30, 20 |
|
iPhone 7 Plus |
60 Hz |
60, 30, 20 |
|
iPhone 7 |
60 Hz |
60, 30, 20 |
|
iPhone 6s Plus |
60 Hz |
60, 30, 20 |
|
iPhone 6s |
60 Hz |
60, 30, 20 |
|
iPhone SE |
60 Hz |
60, 30, 20 |
|
iPhone 6 Plus |
60 Hz |
60, 30, 20 |
|
iPhone 6 |
60 Hz |
60, 30, 20 |
|
iPad Pro 12.9-inch (2nd generation) |
120 Hz maximum |
120, 60, 40, 30, 24, 20 |
|
iPad Pro 10.5-inch |
120 Hz maximum |
120, 60, 40, 30, 24, 20 |
|
iPad Pro (12.9-inch) |
60 Hz | 60, 30, 20 |
|
iPad Pro (9.7-inch) |
60 Hz | 60, 30, 20 |
|
iPad Mini 4 |
60 Hz |
60, 30, 20 |
Frame rate
The human brain receives and processes visual information continuously. This can be used to create the illusion of motion when images follow each other fast enough. When an animation or transition runs or the user scrolls the page, the application needs to put up a new picture for each screen refresh. How many images software shows per second is the frame rate, and it's measured in frames per second (FPS):
- A rate of 10 to 12 frames per second is referred to as clearly motion, and, in this case, a user retains awareness of individual pages.
- A 24 frames per second rate with motion-blurring technology is enough to see fluid movement and is enough for the film industry.
- A 30 frame per second rate is sufficient for movies, but without special effects.
- 60 or more frames per second is what most people see as high-quality, smooth motion:
The act of generating a frame from an application and displaying it is referred to as user interface rendering. According to the table with recommended frame rates for popular devices, to be sure that a user interacts with an application smoothly, the application should render one frame each 16.6 ms to display 60 frames per second. The developer has to take into account that the system also requires some time to draw a frame, so it's not a good idea to plan to own all of that 16 ms, and it would be better to count on 10 ms. When an application fails to meet this budget, the frame rate drops and the content stutters on the screen.
It's essential to understand how to get smooth motion with a high frame rate. The human eye is extremely sensitive to motion inconsistencies. An application can display on average 60 frames per second, but it's enough to have only one frame that takes more than 16 ms to render, for the user to see something that we call hitching, lag, or jank. If the device's refresh rate is higher than the frame rate, the monitor displays repeated renderings of identical frames. This diagram illustrates a simplified view of jank:
