Documentation

Everything you need to get started with Blocksy Theme and Companion

Performance

Blocksy implements a number of performance enhancements right inside the core, which makes it super speedy. Though, we know that some of you, developers, would like to adjust some of these settings. The Performance Pane was created just for that. It lets you adjust settings such as the method of outputting the customiser’s CSS values, disabling WordPress’ built in Emojis script and turning on the Image Lazy Loading feature.

Performance Pane inside the Customiser

Dynamic CSS Output

This option will let you control how the dynamic CSS that is generated by the customiser is loaded.

By default, with the File mode, the global dynamic CSS code will be saved inside a global.css file and will be loaded on the site’s frontend.

Alternatively, you can put all the CSS inline in the HTML (with Inline option), but this comes with the cost of re-computing it on each page refresh and that is why we strongly recommend against it.

One more very important advantage of the File strategy is the fact that it uses a regular CSS file, enqueued with standard WordPress methods. That way, it can be cached by browsers safely and it can be merged with other stylesheets by optimisation plugins (Autoptimize, W3 Total Cache, Fast Velocity Minify, etc.), if you’d prefer them to do it. That only gives a notable performance boost to the site, which definitely can’t be achieved with inline CSS.

Disable Emojis Script

WordPress comes with a built-in Emoji renderer, for maintaining compatibility with older browsers, which do not support this function out of the box. Disabling it will ensure few more files are loaded, speeding up your website and cutting down on requests.

Image Lazy Load

Blocksy offers Lazy Loading capabilities for images generated by the theme. This includes post & product images, logos and more.

The option controls how images are loaded on your website. By default this option is enabled. This means all the images that are below the viewport, are not loaded if they’re not in view. This cuts down on the initial payload of the website significantly and we recommend keeping this option enabled.

Images Loading Animation Type

  1. Fade – images will appear with a nice fade in animation as you scroll.
  2. Circles – displays a nice custom animation while the images are loaded.
  3. None – no visual effect will be applied, images will pop up instantly as you scroll.
Not the solution you are looking for?

Please check other articles or open a support ticket.