Why a long list can feel slow

A page showing hundreds of products, messages or log entries may download quickly yet still feel sluggish. Each visible item usually needs elements in the document, styles to calculate and pixels to draw. When the list changes, the browser may need to repeat some of that work. Large lists also give application code more elements to update and more event handlers or state to manage.

The number of records in a database is not the same as the number of elements a browser must handle. A search result page might contain thousands of matches but display only 20 at a time. Conversely, a page with fewer records can be demanding if every row contains images, controls and nested components. Start by asking how many items are rendered at once and what each item contains, rather than assuming the data transfer is the only bottleneck.

Pagination: a clear boundary between batches

Pagination divides results into separate pages. It limits how much content the browser renders at one time and gives visitors a clear sense of where they are in a collection. Numbered pages can work well for catalogs, search results and archives where people may want to return to a particular portion of the list. A useful implementation keeps the sort order stable and makes the current page apparent.

Pagination does add a step when someone wants to keep exploring. It also needs careful handling when results change: if an item is added or removed, a record may move between pages. For a small team, the simplest starting point is often to choose a reasonable page size, provide obvious next and previous controls, and check whether those controls remain usable with a keyboard and at narrow screen widths.

Load more and virtualization serve different goals

A load-more button fetches or reveals another batch while keeping the visitor on the same page. It can make browsing feel continuous and lets people decide when to request more. But if every earlier batch stays in the document, the page can eventually become just as large as an unbounded list. Plan what happens after several clicks, and make sure people can still find the controls or information below the list.

Virtualization takes a different approach: it renders only items near the visible portion of a scrollable list, replacing off-screen items with space that preserves the scrollbar’s approximate position. This can keep the number of rendered rows manageable even when the underlying collection is large. It is useful for dense tables or activity feeds, but it adds complexity. Variable-height rows, keyboard focus, in-page search and screen-reader navigation all need testing. Do not assume a virtualized list is automatically the better choice just because it renders fewer elements.

Choose by task, then test the full journey

Ask what visitors need to accomplish. If they compare a few results and may return to a specific set, pagination offers useful landmarks. If they browse casually through successive batches, load more may suit the task. If they must scroll through a very large, interactive collection in one view, virtualization may justify its added implementation work. These approaches can also be combined: a paginated data source can feed a virtualized table within each page.

Test more than the first screen. On a slower device, open a typical list, move through several batches, interact with a row and return to a previous position. Watch for delayed clicks, jumpy scrolling and growing memory use. Repeat with a keyboard and, where possible, assistive technology. A fast list is only useful if people can navigate it and understand what has loaded.

For broader ideas about improving digital experiences with others, browse Community Innovation · AcceleratingFuture Commons. Then bring the discussion back to your own page: choose a representative list, make one change and compare the complete browsing journey before adopting the pattern elsewhere.

Back to category ↗