This article needs additional citations for verification. (December 2009) (Learn how and when to remove this template message)
The amount of time an application takes to start up, or a file to download, is not made faster by showing a startup screen (see Splash screen) or a file progress dialog box. However, it satisfies some human needs: it appears faster to the user as well as providing a visual cue to let them know the system is handling their request.
In most cases, increasing real performance increases perceived performance, but when real performance cannot be increased due to physical limitations, techniques can be used to increase perceived performance at the cost of marginally decreasing real performance. For example, drawing and refreshing a progress bar while loading a file satisfies the user who is watching, but steals time from the process that is actually loading the file, but usually this is only a very small amount of time. All such techniques must exploit the inability of the user to accurately judge real performance, or they would be considered detrimental to performance.
Techniques for improving perceived performance may include more than just decreasing the delay between the user's request and visual feedback. Sometimes an increase in delay can be perceived as a performance improvement, such as when a variable controlled by the user is set to a running average of the users input. This can give the impression of smoother motion, but the controlled variable always reaches the desired value a bit late. Since it smooths out hi-frequency jitter, when the user is attempting to hold the value constant, they may feel like they are succeeding more readily. This kind of compromise would be appropriate for control of a sniper rifle in a video game. Another example may be doing trivial computation ahead of time rather than after a user triggers an action, such as pre-sorting a large list of data before a user wants to see it.
For Web Performance optimization, perceived performance plays an important role. It tricks the user into thinking a site loads faster than it actually is. To achieve that, render-blocking resources will be loaded last in order to let the browser render the other elements first: like text content, images. In this way, even though the browser loads the same elements, by loading the non-blocking resources first, the user starts to see some content immediately. This trick improves the perceived performance, improving the overall user experience.
Here are the main perceived performance steps for better user experiences:
Minimize initial page load
Load only the resources you need in order to display the first content seen by the user. After these resources are loaded, the rest of the resources can be loaded.
Interactive elements should be available
Elements that are interactive, that the user can click on or interact with, should be able to perform those actions as soon as possible. Even with the rest of the page being still loaded, if the user can interact faster with the page, the user will perceive the site as being fast.
Avoid rendering elements that can cause flicker on screen
Elements like fonts or content that takes longer to load should be avoided as much as possible. When loading fonts, try to adjust their size and appearance closer to the default browser styles. In this way, when the font will be loaded, the switch won't look weird and be obvious. For images, charts, or embedded content, make sure you have a placeholder that has the same with and height. In this way when the content comes, the screen won't flicker and the height of the page won't change.
In order to improve the perceived performance of a web page, there are numerous tools that can be helpful:
Google Chrome: DevTools provides ways to measure the performance of a site giving you insights on how to improve.
Webpagetest - SpeedIndex represents the average time it takes for the visible part of a site to be displayed.