Fast Blocks

Your storefront builds blocks nobody sees.

CS-Cart already lets you hide a block on phones, tablets or desktops with the visibility checkboxes in the layout editor. Until now that was a display rule only: the block still ran its queries, still rendered, still travelled to the browser, and CSS hid it on arrival. A phone downloaded the desktop page and threw part of it away.

[TH] Fast Blocks makes those checkboxes mean what they say.

What the add-on does

1. Blocks per device. A block switched off for the current device is not built at all: no queries, no HTML, no cache entry. Nothing new to set up, the add-on reads the checkboxes you already use.
2. Lazy blocks. Mark the heavy blocks below the first screen and they leave the first response entirely. Their place is held by a skeleton, and each block is requested when the visitor gets close to it.

Measured on a demo storefront

Eleven blocks below the first screen were marked as lazy and three more were hidden on phones. On a second demo, the visibility checkboxes alone took the phone response from 371 KB to 275 KB with no other changes.

The skeleton follows the block

A single grey box is not a placeholder, it is a second layout shift waiting to happen. The skeleton here repeats the shape of what is loading: cards for a product row, a strip for brand logos, a wide band for a banner, lines for text. It also reads the block's own column count, so a row of six skeleton cards is replaced by a row of six real ones. You can reserve a height per block to keep the page from jumping, and the animation switches itself off for visitors who asked for less motion.

What it does not touch

Main content, product filters, breadcrumbs, the cart and checkout are never deferred: they carry the state of the page you are on. The add-on excludes them for you, so a wrong click cannot break a category listing or a checkout step.

Also worth knowing

• The device becomes part of the block cache key, so the first visitor never warms the cache for everybody else. Without that, serving different HTML to different devices would do more harm than good.
• No template edits, no theme changes, nothing to compile. Install, tick what you want, done.
• Settings are per feature and per block: how many screens ahead to start loading, which blocks are lazy, the reserved height and the skeleton shape.
• The admin interface is translated into 30 languages.