Setka Editor on WordPress Page load speed optimization settings

Page load speed optimization settings

There are several ways to include Setka Editor post styles on the page depending on the particular CMS features (for example, on the site markup and how pages are loaded).

Setka Editor WordPress plugin has three settings inside that allow managing it.  

plugin-settings.png

(Default) Only load styles needed for a specific Setka Editor post.

All Setka Editor styles will be loaded on the page as separate (standalone) files. This provides a balance between user experience and speed.

The example set of files:

File

URL

Description

Common

https://ceditor.setka.io/common_css/common_css_version.css

Setka component styles that are independent of particular style and grid system

Style

https://ceditor.setka.io/clients/company-id/css/style-id.css

File describing the particular design system (style), that was used for current post decoration

Layout

https://ceditor.setka.io/clients/company-ID/layout_option_builds/company-id/layout-id.css

File describing the particular grid system, that was used for current post decoration

 

Inline critical post styles into a page and load the rest of the styles asynchronously

This will reduce the delay to display post content, but might result in post content redraws after the full page load. 

This way to include the styles fit the best when someone would like to achieve the best First Contentful Paint score.

In the post <head> there will be inlined critical post styles:

<style id="setka-editor-critical-resources-css">

/**

 * Content of:
* Critical Common CSS
* Critical Theme CSS
* Layout CSS

 */

</style>

Compared to the previous default styles the size of CSS that is inlined is less than is being contained in separate (standalone) styles.

The example set of critical files:

File

URL

Description

Critical Common

https://ceditor.setka.io/common_css/common_css_critical_version.css

Setka component styles that are independent of particular style and grid system. Contain decoration for the basic components that with a high probability will be used to design the first screen of the post. 

Critical Style

https://ceditor.setka.io/clients/company-id/css/style-id_critical.css

File describing the particular design system (style), that was used for current post decoration. Contain decoration for the basic components that with a high probability will be used to design the first screen of the post.

Layout

https://ceditor.setka.io/clients/company-id/layout_option_builds/company-id/layout-id.css

File describing the particular grid system used for current post decoration. Layout styles can’t be divided to the critical and deferred styles as far as the post layout is one of the main things that determine the post appearance. So layout styles are inlined.

 

Inlined styles apply to Setka content as soon as it is loaded on screen.

Moreover there is a list of deferred styles that load asynchronously thus don’t block the page render. Deferred styles are the rest for the styles that are necessary for the content decoration and that were nor included into the set of critical styles.

The example set of deferred files:

File

URL

Description

Deferred Common

https://ceditor.setka.io/common_css/common_css_deferred_version.css

Setka component styles that are independent of particular style and grid system. Contain decoration for the basic components that with a high probability will be NOT used to design the first screen of the post.

Deferred Style

https://ceditor.setka.io/clients/company-id/css/style-id_deferred.css

File describing the particular design system (style), that was used for current post decoration. Contain decoration for the basic components that with a high probability will NOT be used to design the first screen of the post.

 

(Legacy) Load a combined CSS file with all your Setka Editor styles.

This will increase the assets' size and might affect load speeds. Use only if you plan on displaying on a single page several Setka Editor posts in different styles that are loaded by JS. In this case you need to have all the post styles in one CSS to render multiple posts correctly.

The example file: 

File

URL

Description

Combined Styles and Layouts

https://ceditor.setka.io/clients/company-ID/css/company-id_version.min.css

Rules for all the styles and grids of a company, created in Style Manager