Improving perceived performance of your webpages

Performance is the key factor in improving user experience. Faster the user sees information, the better for the site to have a high customer retention. Webpage performance can be categorized in to three parts: 1. Loading performance 2. Execution/Rendering Performance and 3. Perceived performance.

Perceived performance is the speed that user feels while interacting with the webpages/application. Controlling/Improving this kind of performance is all about prioritization. This can be subjective at times, and there is no defined ways to achieve it. The techniques described below are some of the proven ways one can try in their own applications

Techniques to apply

1. Fix the page loading and rendering performance

This is first level fix that one needs to do to start. Any page that takes more than 3 seconds to appear on user screen completely out of scope for this discussion

2. Lazy load all below the fold images

3. Implement critical CSS

4. Fix the animations

5. Make use of loading indicators

6. Avoid heavy operations/manipulations on scrolling/swipe events

7. Add indications to all clickable items

8. Activate above the fold javascript interactivity along with components

9. Ajaxify components that are below the fold

10. Implement HTTP2 push(preload assets) mechanism

11. Lazy load any popup that appears on the load

12. Fix layouts to avoid flickering while loading/scrolling