TL;DR
NitroPack’s Custom CSS feature allows you to customize the appearance of any element. You can add your own CSS styles and override the default styles of your website theme.
NitroPack defers non-critical JavaScript by default to speed up rendering and improve metrics like Largest Contentful Paint (LCP) and First Contentful Paint (FCP). But sometimes, delaying scripts can also delay the appearance or positioning of visual elements.
Luckily, Custom CSS is the feature that gives you control over early rendering behavior without compromising performance.
Read on to learn how to leverage it for a faster WordPress site.
NitroPack’s Custom CSS Feature Explained
Custom CSS lets you define styles that are injected directly into the <head> of your website, before NitroPack-optimized JavaScript is executed.
This early injection gives your CSS a chance to:
- Style critical, above-the-fold elements
- Prevent unwanted flashes or content jumping
- Control layout appearance during the “pre-JS” phase of loading
This feature is particularly useful when NitroPack’s JS optimizations temporarily affect the visibility or behavior of certain elements—like buttons, banners, sliders, or sticky headers.
Important
Custom CSS is not meant to replace your theme’s stylesheet. It’s a tool for applying minimal, page-safe styles that help maintain visual consistency before interactivity loads.
Test NitroPack yourself
When to Use Custom CSS
1. Ensure visibility of key elements
For instance, your hero image or headline doesn’t appear until JS executes. Use a CSS rule to force visibility earlier:
.hero-section {
opacity: 1 !important;
}2. Prevent layout shifts caused by delayed JS
For instance, a sticky header jumps into place after scrolling begins. Use a rule to set its position in advance:
.sticky-header {
position: fixed;
top: 0;
width: 100%;
}3. Adjust spacing before full styles load
For instance, page elements collapse due to missing margins/padding. Add temporary spacing for stability:
.section-wrapper {
padding-top: 60px;
}4. Prevent navigation arrows or dots from flashing out of position
For instance, the slider’s navigation UI (arrows or dots) appears in the wrong place for a split second, often due to missing positioning or visibility styles that JS adds later. You can prevent flickering or misplacement by styling navigation before JS can do it:
.slider-nav {
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
z-index: 10;
visibility: visible !important;
opacity: 1;
}How to Add Custom CSS Rules in NitroPack
- Log into the NitroPack app
- Go to Cache Settings >> HTML & CSS
- Enable Custom CSS
- Type your CSS rules in the text box (e.g.,
.overlay { display: none; }) - Click Save and do a full cache purge to apply the change to all pages
If you want to preview the result before going live, use Test Mode to review changes without affecting live traffic.
FAQs
Will Custom CSS break my layout?
Only if misused. Stick to minimal, scoped CSS and test changes before publishing.
Can I use media queries?
Yes. Media queries are fully supported and useful for tailoring styles to mobile/desktop layouts.
Is this feature compatible with page builders like Elementor?
Yes. You can target specific classes or IDs added by your page builder to control early styling.
What’s the difference between this and inline CSS in my theme?
Inline or theme-level CSS may load after JavaScript or be subject to reordering. Custom CSS in NitroPack is injected early, before NitroPack optimization logic runs.
