After setting up caching and image optimization, the next step is reducing how much CSS, JS, and HTML the browser has to download and process on each page load. LiteSpeed Cache handles this through minification, file combining, critical CSS generation, and asset loading controls.

This doc walks through all four areas in one place.

Warunki wstępne #

• LiteSpeed Cache plugin installed and active
• ElementsKit installed and active
• QUIC.cloud connected to your site (see: How to Configure QUIC.cloud for ElementsKit Sites)
• Admin access to your WordPress dashboard

Part 1: Configure CSS Settings #

Iść do LiteSpeed Cache > Page Optimization > CSS Settings.

• Ustawić CSS Minify to ON. This removes whitespace, comments, and redundant characters from CSS files, reducing their size without changing how they work.
• Ustawić CSS Combine to ON. This merges multiple CSS files into a single file, reducing the number of HTTP requests the browser makes on each page load.
• Ustawić Generate UCSS to ON. UCSS stands for Unique Critical CSS. QUIC.cloud generates a critical CSS file for each page on your site that contains only the styles needed for above-fold content. Everything else loads after. This is one of the biggest performance improvements in the entire stack and requires QUIC.cloud to be connected.

• Ustawić UCSS Inline to ON. This inlines the critical CSS directly into the HTML of each page, So above-fold content renders immediately without waiting for an external CSS file to load. This directly improves your LCP time.
• Ustawić CSS Combine External and Inline to ON. This includes external and inline CSS in the combined file while keeping the correct priority order.
• Ustawić Load CSS Asynchronously to ON. This loads non-critical CSS without blocking page rendering. Note that when UCSS Inline is active, it takes priority over this setting for critical styles. Both can be on at the same time.
• Ustawić CCSS Per URL to ON. This generates critical CSS per page URL rather than per post type. This is more accurate for ElementsKit sites since every page can have a completely different layout.
• Ustawić Inline CSS Async Lib to ON. This includes the small JavaScript library that handles async CSS loading, preventing it from becoming a render-blocking request itself.
• Ustawić Font Display Optimization Do Swap. This adds font-display: swap to all font face rules so text renders immediately in a fallback font while web fonts load in the background.

Part 2: Configure JS Settings #

Iść do LiteSpeed Cache > Page Optimization > JS Settings.

• Ustawić JS Minify to ON. This removes whitespace and comments from JS files, reducing their size.
• Ustawić JS Combine to ON. This merges multiple JS files into one, reducing HTTP requests.
• Warning: JS Combine is the most common cause of broken layouts on ElementsKit sites. Always test this on a staging site before enabling it on your live site. If you see JS errors after enabling it, open your browser console (F12), identify the problematic script, and add it to the JS Excludes field in the Tuning tab.
• Ustawić JS Combine External and Inline to ON. This includes external and inline JS in the combined file while maintaining the correct execution order.
• Ustawić Load JS Deferred Do Deferred. This tells the browser to download JS files in the background and execute them after the HTML has finished parsing. This eliminates render-blocking JS and has a direct impact on your LCP and page speed scores.

Warning: Never set Load JS Deferred to Delayed. Delayed mode holds all JavaScript until the user interacts with the page. This breaks Elementor animations, ElementsKit interactive widgets, and WooCommerce cart functionality. Always use Deferred, not Delayed.

Part 3: Configure HTML Settings #

Iść do LiteSpeed Cache > Page Optimization > HTML Settings.

• Ustawić HTML Minify to ON. This removes unnecessary whitespace from your HTML output, reducing page size. In the DNS Prefetch field, add the following:

This tells the browser to resolve DNS for Google Fonts servers early, reducing font loading latency.

• Ustawić DNS Prefetch Control to ON. This automatically enables DNS prefetching for all URLs in the document.

w DNS Preconnect field, add:

Preconnect goes one step further than prefetch. It establishes a full TCP connection to Google Fonts servers early so fonts are delivered faster when they are actually requested.

• Ustawić Remove Query Strings to ON. This removes version query strings from static resource URLs, which improves caching at the CDN and proxy level.
• Ustawić Load Google Fonts Asynchronously to ON. This loads Google Fonts without blocking rendering. It also adds a preconnect hint automatically.
• Ustawić Remove WordPress Emoji to ON. WordPress loads a small emoji script on every page by default, even if you never use emoji on your site. Removing it eliminates one unnecessary HTTP request per page load.
• Ustawić Remove Noscript Tags to ON. This removes noscript tags from your HTML output, reducing overall page weight.

Part 4: Configure Tuning Settings #

Iść do LiteSpeed Cache > Page Optimization > Tuning.

w JS Excludes field, add:

jQuery must never be minified or combined with other scripts. Many plugins depend on jQuery being available globally as a standalone file. Combining it breaks those dependencies.

w JS Deferred/Delayed Excludes field, add:

These scripts need to execute immediately on page load. Deferring Google Tag Manager or analytics scripts causes tracking to miss page view events entirely.

Ustawić Optimize for Guests Only to ON. This applies CSS and JS optimization only to logged-out visitors. This prevents optimization from interfering with the Elementor editor experience for logged-in users and avoids generating separate optimized files per user role.

Iść do LiteSpeed Cache > Page Optimization > Tuning > CSS patka.

w Separate CCSS Cache Post Types field, add strona. This gives each individual page its own critical CSS file rather than sharing one across all pages of the same post type. Since ElementsKit pages can have completely different layouts, this produces more accurate critical CSS for each one.

What’s Next #

With CSS, JS, and HTML optimization in place, your ElementsKit site now has the full three-layer optimization stack running. If anything breaks after enabling these settings, see How to Fix Common LiteSpeed Cache Issues on ElementsKit Sites for step-by-step troubleshooting.