Help Center
  • Welcome
  • Setka Editor
    • Getting started
    • Drag-and-Drop & Multiselect
    • Text editing
    • Grids and Layout
    • Images
      • Image Editor
    • Background images
    • Icons
    • Animations
    • Lists
    • Tables
    • Dividers
    • Footnotes
    • Hotspots
    • Enhance Symbols
    • Post templates
    • Buttons
    • Comments and collaboration
    • Embeds
    • Hyphenation
    • Responsive layout for mobile screens
    • Custom CSS
    • Custom JS plugins
  • Setka Content Design System Manager
    • Creating and editing styles
    • Text formats and fonts
    • Styles display for mobile mevices
    • Text and background colors
    • Dividers
    • Icons
    • Components – reusable design elements
      • Creating Components with HTML and CSS
        • CSS in components
        • Component examples
    • Configuring layout grids
    • Editing default elements with Custom CSS
    • Adding team members
  • Account Settings
    • Account settings basics
    • Access rights
    • Billing and subscription
  • Preserve your Setka Editor content after the service shutdown
  • Integrations
    • Setka and WordPress
      • Installing Setka Editor WordPress plugin
      • Launching Setka Editor on the post creation page
      • Setka Editor and WordPress compatibility
      • Setka Editor compatibility with the most popular WordPress plugins
      • Inserting graphs, charts, or diagrams into a post
      • Setka Editor and Google AMP
      • Inserting adverts into a post
      • srcset — the attribute for image size optimization
      • Page load speed optimization settings
        • Autoptimize plugin configuration
      • WordPress troubleshooting: known Issues and how to fix them
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Drupal
      • Setka for Drupal — compatibility, and features
      • Installing Setka modules for Drupal
      • Setka content on AMP pages in Drupal
    • Setka and Magento
      • Installing Magento 2 extension
        • Setka Editor configuration page
      • Preserve your Setka Editor content after the service shutdown
    • Setka and HubSpot
      • Setka Editor and HubSpot Blogs
      • Setka Editor and HubSpot Landing Pages
      • Semi-gated content with a HubSpot form
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Bitrix
      • Preserve your Setka Editor content after the service shutdown
    • Setka and Ghost
      • Copying and pasting posts from Setka to Ghost
    • Setka and SharePoint Online
      • Installing Setka Editor application into SharePoint Online
    • Setka and Zapier
      • Setka and Webflow
        • Exporting new posts
        • Updating exported posts
      • Setka and Shopify
    • Setka and Integromat
    • Content Cloud
  • API
    • Setka Content Cloud API
    • Webhooks
    • API for Custom CMS Integration
      • Introduction to custom integration
      • Integration with Content Design System Manager (CDSM)
        • Initial sync — receiving Setka Editor files to connect them to your CMS
        • Storing and processing Setka Editor files
        • Connecting Setka Editor files to the pages of your site
        • Receiving style updates from the Style Manager and new editor versions
      • Setka Post Editor initialization (JavaScript)
      • Integration with Style Manager (API v1, previous version)
      • Preserve your Setka Editor content after the service shutdown
    • Custom Components API
  • VIDEO TUTORIALS
    • Setka Editor Video Tutorials
  • Components Library
    • Components Library
    • Guide: Ideas for Using Setka Editor’s Components to Improve Content Design
  • Content Experience Design Best Practices
    • Guide To Designing a Great Content Experience
Powered by GitBook
On this page
  • (Default) Only load styles are needed for a specific Setka Editor post.
  • Inline critical Styles into a page and load the rest of the styles asynchronously
  • (Legacy) Load a combined CSS file with all your Setka Editor styles.

Was this helpful?

  1. Integrations
  2. Setka and WordPress

Page load speed optimization settings

Previoussrcset — the attribute for image size optimizationNextAutoptimize plugin configuration

Last updated 4 years ago

Was this helpful?

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

Three Setka Editor WordPress plugin settings can help with managing Styles for your page.

(Default) Only load styles are 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 a particular style and layout grid

Style

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

Layout

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

Inline critical 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 that fit the best when someone would like to achieve the best score.

In the post there will be inlined critical Styles:

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 a particular style and Layout Grid. Contains 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

Layout

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

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 of the styles that are necessary for the content decoration and that were not included in 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 a particular style and Layout Grid. 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

(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 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

A file describing the particular design system (), that was used for the current post decoration

A file describing the particular , that was used for current post decoration

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

A file describing the particular used for current post decoration. Layout styles can’t be divided into 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.

css/style-id_deferred.css

File describing the particular design system (), 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.

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

First Contentful Paint
style
Layout Grid
style
Layout Grid
https://ceditor.setka.io/clients/company-id/
style
Content Design System Manager (CDSM)