🧩 Critical CSS

Boost your store’s speed by prioritizing only the CSS needed for above-the-fold content.

What is Critical CSS?

Critical CSS helps your page load faster by identifying and loading only the essential CSS needed to render the visible part of the page (above the fold). Other CSS is loaded later, ensuring quicker initial rendering and a smoother user experience.

Why use Critical CSS?

• Prioritizes key visual elements for faster first paint
• Significantly improves First Contentful Paint (FCP)
• Reduces render-blocking styles
• Helps pass Core Web Vitals and improves SEO performance

⚙️ How to Set Up Critical CSS

Step 1: Enable the feature

1. Go to Avada SEO Suite > Speed Up > Custom > Settings
2. Find Critical CSS and toggle it ON

Step 2: Apply changes

1. Return to Speed Up Now
2. Select your theme and click to optimize

Step 3: Verify it's working

A. In theme code

• Go to Online Store > Themes > Actions > Edit Code
• After running optimization, check your .liquid files
• You’ll see a preload code snippet automatically added

B. On your storefront

• Visit your store frontend
• Check your FCP score using Google Lighthouse or PageSpeed Insights
• If the feature is active, FCP should be significantly improved

---

📌 Merchant Notes

• Always run Speed Up Now after enabling the feature to apply changes to your chosen theme
• Make sure that your theme is published
• Look for preload tags injected into .liquid files — these help load critical CSS faster