Blocksify performance stays lean by loading active block CSS, pooling page styles, and avoiding layout JavaScript. These choices apply as you create your first page, use Section layouts, or manage Global Settings.
At a glance
| Per-block loading | CSS is included only for Blocksify block types that appear on the page. |
| Single page stylesheet | Blocksify pools its page CSS into one stylesheet instead of many separate files. |
| Default output | A stable CSS file in uploads, versioned for cache busting. |
| Fallback | Automatic inline CSS when writing a file is not the best path. |
| Layout scripts | No jQuery and no front-end JavaScript for layout blocks. |
Only active block CSS loads
Blocksify treats each block type as its own asset. A page only needs CSS for the Blocksify block types actually used on that page.
- A page with a Section and Button does not need CSS for every other Blocksify block.
- Base CSS is included once for each active block type.
- Nested blocks are included when they appear in the page content.
Note: The editor can load a broader set of styles because you may insert any block while editing. The front end uses the page-specific CSS pool.
One stylesheet ships per page
When a page uses Blocksify blocks, Blocksify combines the needed styles into one page stylesheet. That stylesheet includes active block base CSS and the custom CSS generated from values you changed.
| Output path | What happens |
| Default file mode | Blocksify writes a stable CSS file in uploads and versions it by file time. |
| Inline fallback | Blocksify prints the CSS in the page head when writing a file is not the best path. |
| Cache behavior | The stable file path works well with cached HTML because the URL can keep pointing to the same file. |
Choose External file (recommended) or Inline in head under CSS output mode at Blocksify → Dashboard → Settings → Performance.
Only changed values emit custom CSS
Blocksify does not print placeholder CSS for settings you never touched. Custom CSS appears only when a block value needs it.
| Block state | CSS result |
| Default values | No extra CSS for those values. |
| Custom spacing | Only the needed spacing CSS is printed. |
| Custom color, border, or shadow | Only the selected design values are printed. |
| Text using the normal site style | No repeated color or typography CSS just to restate the default. |
Layout blocks avoid front-end scripts
Layout blocks do their work with HTML and CSS. Blocksify does not depend on jQuery, and layout blocks do not require front-end JavaScript just to arrange content.
- Columns, Containers, spacing, backgrounds, and visibility work without layout JavaScript.
- Page-cache plugins can store the rendered page.
- The Blocksify stylesheet can be reused until the page or site settings require a rebuild.
Tip: Keep defaults where they already match the design. Blocksify prints less custom CSS when fewer values are changed.
Keep a page lean while editing
- Open the page in the editor.
- Remove Blocksify blocks or pattern sections that are no longer used.
- Keep default values where they already match the design.
- Update the page, then clear your page cache if your site uses one.