This feature removes all unused CSS from the page and loads only the CSS required for the initial viewport (above-the-fold content). The rest is deferred and loaded when the browser is idle.
How it works
FlyingPress uses a cloud-based optimizer to extract used CSS
The used CSS is inlined inside the HTML in:
<style id="flying-press-css">...</style>Remaining CSS files are loaded asynchronously, only when the browser is idle
CSS is automatically regenerated if we detect layout or content changes
Benefits
Reduces total CSS size
Speeds up first paint and improves LCP
Eliminates render-blocking styles
Boosts PageSpeed and Core Web Vitals
Include specific CSS selectors
FlyingPress tries to detect all visible styles automatically. However, for elements that are:
Dynamically injected (e.g. popups, modals, sliders)
Hidden on initial load (e.g. tabs, dropdowns)
Shown only after interaction (e.g. menus on hover)
…it’s possible we may not detect them.
You can safelist such styles by entering the related CSS selectors.
✅ Only CSS selectors are supported
❌ CSS file names will not work
❌ Incorrect (won’t work):
style.css
main.min.css
theme.css
✅ Correct:
.header-sticky
.popup-overlay
.wp-block-gallery
You can also use partial matches:
header-sticky
popup-overlay
The dot (.) or hash (#) is optional but recommended for clarity and accuracy.
Example
HTML:
<div class="header-sticky">
<p class="welcome-text">Welcome back!</p>
</div>
<div class="popup-overlay" style="display: none;">
This popup appears on interaction.
</div>
CSS:
.header-sticky {
position: fixed;
top: 0;
width: 100%;
background: white;
}
.welcome-text {
font-size: 18px;
color: #333;
}
.popup-overlay {
position: fixed;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 20px;
}To ensure these styles are preserved, add the following to Include CSS Selectors:
.header-sticky
.welcome-text
.popup-overlay