My client's web app loads a long list of content, and it's crucial that the amount of time it takes to load is the quickest possible. As of right now if the amount of content is under 25 "lines" we'll call them, then there's no problem. After that however there is a lag in response time due to the front and back end.

My question is what can I design visually that will either cut load time, or at least give that impression?

For instance, my initial solution was to add a drop down filter and only load the absolutely necessary info, and let the user toggle the rest off and on if desired.

I realize I'm not giving a very good description of what the user is experiencing, but I've signed a NDA, so I can't go into detail about the content that's being loaded.

Any ideas would help though!


The best way to reduce perceived load time is simply to serve some content as soon as possible, and then fetch more and more. Because the issue isn't load times, it is wait times. People want to get on with their task; they want to start reading. So give them the first page of their book, while GRRM is working on the ending.

Load in chunks. This can either be two-step (load 25, load rest), lazy-load (load the current screen +1 buffer, load rest when scrolling), or recursive (load 25, is there more? load another 25, etc. Similar to two-step). Alternatively, you could first load all 'cheap' data; names, numbers, etc, and after that do a second trip for all the images.

At any rate, when you use a sort of smart-loading, you must clarify to the user how many the end-total will be, if the user is to see everything. (e.g. all students in a class. But not all posts on a blog at once.)


It's very hard to visualize what you're describing, but I can take a few stabs.

Can you set up the items to Lazy Load? https://en.wikipedia.org/wiki/Lazy_loading Then things won't be called until the user scrolls down to them, which might speed up your page.

Can you minimize the amount of scripts or fonts being pulled in? https://css-tricks.com/preventing-the-performance-hit-from-custom-fonts/ Even something like extra fonts hanging around in your code can slow down your page.

If you want more detail, perhaps you could mock up a blank page so we can see what we're dealing with.

  • I think the Lazy Load pattern might be something we could use since it's kind of similar to my filter idea. I'll have to talk to dev and the BA to make sure that'll meet requirements, but I feel like that should work. Thanks! – Jason Lott Feb 2 '16 at 22:59

Your Answer

