I'm designing a blog home page that lists posts in reverse chronological order. The current page transfers about 18 KB compressed and is only 54 KB uncompressed, so bandwidth is not a concern yet. Images are lazy-loaded, and every post has its own permalink.
How should I decide when the list has become too long? Should I focus on total scroll height, browser performance and DOM size, or the possibility that users feel overwhelmed by a very long page?
If pagination makes sense, is traditional numbered pagination better than a Load More button or infinite scrolling for a blog archive? I'm especially interested in current usability, accessibility, history, and discoverability considerations.
4 Answers
A Load More button can provide a smoother experience without committing to pure infinite scroll. If you use it, keep the loaded posts in the DOM, update the URL as more content appears, and preserve scroll position when someone opens a post and goes back. Real page URLs underneath the button give you the convenience of progressive loading without losing history or archive navigation.
A first page of around 10–30 posts is a reasonable starting point, depending on how much content each entry contains. Two or three screens of lightweight summaries can be comfortable; image-heavy cards should use fewer items. Your current payload is small, so measure layout, scrolling, and memory usage on actual phones before optimizing for bandwidth.
The practical limit is usually DOM and rendering performance rather than transfer size. A few thousand elements can make scrolling sluggish on mid-range phones even when the payload is small. For a simple title-and-date list, 50–100 items may be reasonable, while thumbnails and longer excerpts can make 20–40 items feel heavy. Judge the page by row height and mobile performance instead of choosing an arbitrary item count.
For a blog, traditional pagination with stable URLs is usually the safest choice. Readers may use the footer, browser history, or a page they bookmarked, and infinite scrolling makes all of those awkward. Numbered pages also provide durable archive URLs that are easier for people and search engines to revisit.
The footer issue is easy to overlook. Endless scrolling works against any content that has useful links or navigation at the bottom.
That makes sense—100 lightweight rows may be fine, but 30 richer cards could already be too much on a phone.