Breaking News
Menu

Server-rendered Kanban board outperforms PLANKA in slow-network comparison

Server-rendered Kanban board outperforms PLANKA in slow-network comparison
100%

A performance test comparing a custom server-rendered Kanban board against the popular single-page application PLANKA Community 2.2.1 shows significant speed advantages for server-driven HTML on slow connections. The custom board, built with one Go binary, a SQLite file and Datastar in the browser, was measured against PLANKA's React, Node.js and PostgreSQL stack. In this PLANKA Kanban comparison, both applications hosted identical boards, and the test measured the experience of a user on a slowed phone behind a 150 ms round-trip network delay.

Advertisement

The two apps compared

Both applications support core Kanban features: logging in, managing lists, dragging and dropping cards, keyboard navigation, Markdown descriptions, labels, due dates, comments and live collaboration. PLANKA includes additional features that the custom board lacks, such as card members, search, filters, attachments, task lists, custom fields, notifications, webhooks, a REST API and two-factor authentication. The testing focused only on the shared capabilities, though PLANKA's bundle size and memory usage account for its entire feature set.

How the server-rendered board stays in sync

Every action on the custom board is a POST request that modifies the database and returns an empty 204 response. A single goroutine manages the only write connection, committing queued commands in one transaction. The board renders at most every 50 ms, and the server sends the updated HTML down an open stream of server-sent events to each connected page. Datastar then morphs the new HTML into the document.

To handle pending states, a dropped card remains where the server last placed it, appearing dimmed with a spinner until the new frame arrives. The board also displays a dashed copy of the card in the new location to indicate the user's action. If the server rejects the move, the card stays in its original position, and the page displays a message explaining why, such as “Anna moved ‘Fix login’ to ‘Done’ meanwhile.”

Measurement setup

Both applications, the database and the browser ran on a single Intel i5-13500 machine. The test board contained 8 lists, 200 cards and 268 comments. A TCP proxy introduced a 150 ms round trip and limited bandwidth to 1.6 Mbit/s down and 750 kbit/s up. Chrome throttled the measured user's CPU by four times to simulate a slow phone, while a second user viewed the board on a normal CPU. Each application underwent three runs of 20 mouse-dragged moves.

Loading the board and Lighthouse scores

During a cold load on the slowed phone, the custom board transferred 58 kB of data and displayed the board on screen in 0.6 seconds. PLANKA transferred 2.6 MB and took 15.4 seconds to show its board. PLANKA downloads its entire application before requesting the board data, whereas the custom server sends the board as HTML in the initial response.

In Lighthouse testing simulating a slow mobile network, the custom board achieved a performance score of 98, with a first contentful paint of 1.4 seconds and 160 ms of total blocking time. PLANKA scored 33 on mobile, with a first contentful paint of 14.0 seconds and 990 ms of total blocking time. On desktop, the custom board scored 100, while PLANKA scored 69.

Moving a card and adding comments

When dragging a card one list to the right, the custom board showed the card in its new list after 252 ms, with server confirmation arriving at 253 ms. PLANKA displayed the card in the new list after 481 ms, at the end of its drop animation, and received server confirmation after 712 ms. A second user saw the move after 199 ms on the custom board, compared to 656 ms on PLANKA.

PLANKA proved faster at adding comments. It displayed a new comment immediately and received server confirmation after 229 ms. The custom board required an HTTP request and showed the comment with the next frame after 302 ms.

Responsiveness and memory in the browser

After the session, the custom board recorded an Interaction to Next Paint (INP) of 64 ms, a JavaScript heap of 4.4 MB and 1,843 DOM elements. PLANKA recorded an INP of 256 ms, a JavaScript heap of 45.0 MB and 3,295 DOM elements. Opening a card took 258 ms on the custom board and 318 ms on PLANKA.

Handling many users and database writes

A load test simulated 200 people moving four cards per second each, generating 790 moves per second. The custom server used 4.9 CPU cores and 1.2 GB of memory, with the 95th percentile for an answered request at 12 ms. Most of the CPU time went to compressing the HTML frames with Brotli for each of the 200 streams.

Without HTTP or streams, the custom board's writer handles about 13,800 moves a second when 200 people move at once. SQLite runs with synchronous=FULL, meaning every commit waits 3 to 5 ms for the disk on the Linux test machine.

Server footprint

At rest, the custom board runs as a single 13.5 MB binary using 28 MB of memory, with the SQLite file taking 143 kB. PLANKA runs 18 processes across two containers totalling 673 MB, uses 200 MB of memory, and its PostgreSQL database occupies 10.3 MB.

Optimising for mobile

To make the 200-card board fast on a phone, the custom board implements three main optimisations. Frames carry only the lists that changed, while unchanged lists are sent as empty placeholders that Datastar skips using data-ignore-morph. The frames patch the lists inside the board component rather than the component element itself, reducing frame time from 100 ms to 55 ms. Additionally, off-screen lists use content-visibility: auto to prevent the browser from painting them.

Limitations and testing constraints

The test ran both applications on the same machine as the browser, meaning neither experienced real data centre latency. The comparison focused only on shared features, and PLANKA's additional capabilities contribute to its size. The test used PLANKA Community 2.2.1, while the paid PLANKA Pro 2.5.0 includes untested optimisations for large boards. All moves were measured using a mouse, and the load test only evaluated the custom board.

How to test the board

The custom board is available to test at kanban.zweiundeins.gmbh, with the boards resetting every night. The source code, benchmark scripts and raw data are available on GitHub, where developers can start the board locally using the go tool task dev command.

When to choose a single-page app or server-rendered HTML

For teams needing immediate access to attachments, task lists, custom fields and notifications, PLANKA provides those features out of the box. However, the results demonstrate that interactive software with drag-and-drop functionality, live collaboration and conflict resolution can be built effectively with server-rendered HTML. This approach delivers honest pending states, loads in under a second on a slow phone, stays responsive and runs as a single binary with one data file.

Did you like this article?
Advertisement

More to read

Popular Searches