If you’re looking to maximize your website’s performance, combining Cloudflare and NitroPack is a powerful strategy. Cloudflare provides world-class CDN and security features, while NitroPack optimizes your site for lightning-fast load speeds. When used together, they can significantly boost your Core Web Vitals and overall user experience.
🧩 Why Integrate Cloudflare with NitroPack?
Before diving into the setup, here’s why combining the two services is a smart move:
- Cloudflare protects your site from malicious traffic and delivers content faster via its global CDN.
- NitroPack handles performance optimization, including image compression, lazy loading, and advanced caching.
The result? A supercharged website that’s secure and ultra-fast.
✅ Prerequisites
Make sure you have:
- A NitroPack account (Free or Premium)
- A Cloudflare account with your domain added
- Access to your website’s DNS settings and Cloudflare dashboard
🔧 Step-by-Step Integration Guide
Step 1: Add Your Website to Cloudflare
- Go to Cloudflare and sign up or log in.
- Add your domain and follow the steps to update your nameservers.
- Wait for DNS propagation (this may take a few hours).
Step 2: Connect Your Website to NitroPack
- Visit NitroPack.io and sign in.
- Add your website and follow the plugin installation instructions:
- For WordPress, install and activate the NitroPack plugin.
- Enter your site’s NitroPack API key.
- Let NitroPack scan and optimize your website.
Step 3: Configure Cloudflare Settings for Compatibility
NitroPack and Cloudflare can sometimes conflict, especially with caching. To prevent issues, do the following in your Cloudflare dashboard:
- Disable Rocket Loader:
Navigate to Speed > Optimization and turn Rocket Loader OFF. - Turn Off Auto Minification:
Under Speed > Optimization, uncheck JS, CSS, and HTML minification. (NitroPack will handle this.) - Create Page Rules for NitroPack:
Go to Rules > Page Rules and create the following rule:
URL: *yourdomain.com/*
Settings:- Cache Level: Bypass
- Disable Performance
Note: Some users prefer to let Cloudflare handle CDN and NitroPack handle all optimization. If that’s your case, bypass Cloudflare’s performance settings on pages NitroPack optimizes.
Step 4: Enable Cloudflare Integration in NitroPack (Optional)
For Pro users, NitroPack supports Cloudflare API integration:
- In your NitroPack dashboard, go to Integrations > Cloudflare.
- Enter your Cloudflare email, API key, and Zone ID.
- Save and test the connection.
This allows NitroPack to automatically purge Cloudflare’s cache when your content changes.
⚙️ Recommended Cloudflare Settings with NitroPack
| Setting | Recommendation |
|---|---|
| Cache Level | Standard (or Bypass via Page Rule) |
| Rocket Loader | Disabled |
| Minification | Disabled |
| Brotli Compression | Enabled |
| Firewall | Medium or higher |
🧪 Test the Results
After integration:
- Use tools like GTmetrix, PageSpeed Insights, or WebPageTest.
- Check for any cache or layout issues.
- Fine-tune Cloudflare or NitroPack settings if needed.
Have you tried integrating these two on your site? Share your experience in the comments below or let us know if you run into any issues—we’re happy to help!