Fast Blocks Documentation

What the add-on does

Two independent features, each with its own switch in Add-ons → [TH] Fast Blocks → Settings.

1. Blocks per device

CS-Cart lets you hide a block on phones, tablets or desktops with the visibility checkboxes in Design → Layouts. Without this add-on that is a display rule: the block is still built and sent, and CSS hides it in the browser. With the add-on the block is not built at all for that device.

Nothing new to configure. Turn the setting on and the checkboxes you already use start saving traffic.

Two consequences to expect:

• A block hidden on phones is absent from the page source on a phone. That is normal, not a bug.
• The block cache is kept separately for phone, tablet and desktop, so the first visitor does not warm the cache for everybody.

2. Lazy blocks

Open Design → Layouts, click a block, tick Load lazily. The block leaves the first response and is requested when the visitor scrolls close to it. Set Reserved height so the page does not jump when the block arrives.

How far ahead loading starts is set once for the whole store, in screens. The default is 2: the block starts loading when it is two screens away.

Which blocks to mark

The second column is enforced by the add-on: those block types get no checkbox, so a wrong click cannot break a listing or a checkout step.

The skeleton

While a block loads, its place is held by a skeleton that repeats the shape of what is coming: cards for products, a strip for logos, a band for a banner, lines for text. The shape is chosen automatically from the block type and its template; if the guess does not fit your block, pick the shape yourself in the block settings.

The skeleton can be switched off entirely in the add-on settings. If you do that, fill in the reserved height for every lazy block: without the skeleton nothing else holds the space.

Caching in front of the store

The add-on decides what to build from the User-Agent, so any cache that sits in front of PHP has to know that the answer depends on it. The add-on sends Vary: User-Agent while device rendering is on, and that is enough for a correctly configured cache. Two cases need attention:

• Nginx microcaching or FastCGI cache. Add $http_user_agent to the cache key, or at least a device flag derived from it. A cache keyed on the URL alone will store the desktop page and serve it to phones.
• Varnish and Cloudflare. Both ignore Vary: User-Agent for HTML by default. In Varnish, normalise the User-Agent into a device class in vcl_recv and add it to the hash. In Cloudflare, use Cache Rules with a custom cache key, or turn caching off for HTML.

How to check in one minute: request the same page twice with a fresh query string, once as a desktop browser and once as a phone, and compare the sizes. If they are identical while a block is hidden on phones, the cache is serving one version to both.

Search engines

Google indexes mobile-first. A block hidden on phones is absent from the page Google sees, so hiding text content on phones takes it out of the index. Hide decorative blocks, not the ones you want found.

Lazy blocks are safe in this respect: they are requested and rendered while the page is being evaluated, so a crawler that runs JavaScript sees them.

Troubleshooting

Store speed

This add-on removes what the storefront does not need to send. The other half of the speed lives on the server: cache, compression, HTTP/2, the image format. Everything we applied on our own demo server, with the numbers it gave, is on a separate page:

Server recommendations

Two of the settings there live in the admin panel and take a minute, and they are the ones with the biggest effect on image weight:

• Settings → Thumbnails → Thumbnail format: WEBP
• uploading images in the size the theme actually uses

Changelog

1.00 (5 August 2026)
First release