Introduction
In a world where every second counts, website speed is no longer a luxury—it’s a necessity. Slow-loading pages frustrate users, hurt search rankings, and ultimately impact your bottom line. But what if you could serve your WordPress site directly from a global network of lightning-fast servers, bypassing your origin server entirely?
Enter Full HTML Caching with BunnyCDN. This powerful setup transforms your WordPress site into a speed demon, delivering content to visitors at breakneck speeds, no matter where they are in the world. Here’s how it works:
- The first visitor to a page requests it from your origin server.
- BunnyCDN caches the entire HTML response, including all static assets like images, CSS, and JavaScript.
- Subsequent visitors receive the cached version of the page directly from BunnyCDN’s edge servers, bypassing your origin server completely.
- This significantly reduces server load, network latency, and overall page load times.
Imagine a world where your WordPress site loads in a blink of an eye, even for visitors halfway across the globe. That’s the power of Full HTML Caching with BunnyCDN. Ready to unlock this speed boost for your WordPress site? Let’s dive into the setup process and bid farewell to sluggish loading times for good.
Gearing Up for Lightning-Fast Performance:
Ready to assemble your performance-boosting toolkit? Let’s gather the essentials that will propel your WordPress site to lightning-fast speeds:
- A BunnyCDN Account: Your gateway to a global network of high-performance servers. Create one for free in a moment right here: [link to BunnyCDN signup page]
- Access to Your Domain Registrar: We’ll need to make a few quick DNS changes to point your website’s traffic to BunnyCDN’s edge servers. Have your domain registrar credentials handy.
- Your WordPress Site: The star of the show, ready for its speed transformation!
With these essentials in place, you’re perfectly equipped to unleash the full potential of Full HTML Caching and experience the exhilarating speed that awaits.
Setting Up BunnyCDN DNS: Directing Traffic to the Fast Lane
1. Access Your BunnyCDN Dashboard:
- Begin by logging into your BunnyCDN account to access the control center for your CDN adventure.
2. Create a DNS Zone for Your Domain:
- Navigate to the Dashboard and click on DNS.
- Click the Add DNS Zone button to create a dedicated space for managing your domain’s DNS records.
- Enter your domain name (e.g., example.com) and click Add DNS Zone. This establishes a new zone, ready for you to add the necessary records.
Managed WordPress Hosting
The Fastest and Most Reliable WordPress Hosting BunnyCDN Full Caching, Litespeed, LSCache. Expert Speed Optimization
3. Obtain Your BunnyDNS Servers:
- Once the DNS zone is created, you’ll be presented with the BunnyDNS servers specifically assigned to your domain. These servers act as the traffic signals, directing visitors to BunnyCDN’s edge servers for lightning-fast delivery. Keep these servers handy, as you’ll need them for the next step!
4. Prepare for Record Addition:
- Now you have a DNS zone dedicated to your domain, but it’s currently empty. The next step involves adding the essential records to guide traffic effectively. Get ready to dive into record creation in the upcoming section!
Crafting Your Pull Zone: Setting the Stage for Content Delivery
1. Access the CDN Hub:
- Within your BunnyCDN dashboard, navigate to the CDN section. This is your command center for creating and managing pull zones.
2. Initiate Pull Zone Creation:
- Click on the Add Pull Zone button to kickstart the process of establishing a designated space for your website’s content.
3. Naming Your Pull Zone:
- In the Pull Zone Name field, choose a descriptive name that reflects your website or content, such as “amazing-blog-content” or “lightning-fast-store.” BunnyCDN will automatically append “.b-cdn.net” to the name, creating a unique identifier for your zone.
4. Defining the Origin:
- Set the Origin Type to Origin URL, indicating that BunnyCDN will fetch your content directly from your WordPress site’s URL.
5. Selecting the Right Tier:
- Choose Standard Tier for optimal performance in most cases. This tier balances speed, affordability, and global reach, making it ideal for a wide range of websites. If you anticipate exceptionally high traffic volumes or primarily serve large files like videos, consider the High Volume Tier, but keep in mind its focus on fewer global locations.
6. Targeting Your Audience:
- Under Pricing Zone, select the regions where you expect the majority of your visitors to reside. Opt for All if you cater to a global audience.
7. Confirming Your Pull Zone:
- Click Add Pull Zone to bring your content delivery zone to life! You’ll receive a confirmation page with additional instructions, which you can safely skip for now, as we’ll guide you through the subsequent steps.
8. Establishing Custom Hostnames:
- Within your newly created pull zone, create two custom hostnames:
- One for your root domain (e.g., example.com)
- One for the www version (e.g., www.example.com)
- This ensures seamless delivery of your content regardless of how visitors access your website.
9. Leaving SSL for Later:
- For now, keep SSL deactivated. We’ll dive into SSL configuration in a later section to ensure secure content delivery.
10. Admiring Your Linked Hostnames:
- Take a moment to appreciate the three linked hostnames you’ve created, each poised to play a crucial role in accelerating your website’s performance!
Mapping the Route to Speed: Creating DNS Records
Here’s a revised version of the section, incorporating suggestions for clarity, engagement, and consistency:
Mapping the Route to Speed: Creating DNS Records
1. Return to Your DNS Zone:
- Head back to the DNS zone you created for your domain within your BunnyCDN dashboard. It’s time to establish clear directions for incoming traffic!
2. Establishing CNAME Records:
- CNAME records act as friendly guides, pointing visitors to the right destination. Here’s how to create them:
- For the root domain (e.g., example.com):
- Hostname: Leave this field empty to direct traffic to the root domain.
- Type: Select CNAME to create the necessary connection.
- Target: Enter the name of your pull zone, ending in “.b-cdn.net” (e.g., amazing-blog-content.b-cdn.net).
- Keep other values at their default settings and click Add Record.
- For the www version (e.g., www.example.com: https://www.example.com):
- Hostname: Set this to www to specifically direct traffic to the www subdomain.
- Type: Again, select CNAME.
- Target: Use the same pull zone name as before.
- Click Add Record to complete the mapping.
- For the root domain (e.g., example.com):
3. Accommodating Additional Records:
- If your domain requires other DNS records like MX for email or TXT for verification, now is a perfect time to add them. Ensure they’re configured according to your specific needs.
4. Celebrating Your Navigation System:
- Congratulations! You’ve successfully mapped out the routes for your website’s traffic, ensuring a smooth journey to the speedy world of BunnyCDN.
Adding SSL Certificates
Now, we can activate the SSL certificates or upload your own if you have one. To do this, we go back to CDN and choose your pull zone; it should look like this:
Optimizing for Speed: Fine-Tuning Caching Settings
Optimizing for Speed: Fine-Tuning Caching Settings
1. Enter the Caching Hub:
- Within your BunnyCDN dashboard, navigate to the CDN section and locate your pull zone. Within the pull zone, click on Caching and then General to access the control panel for caching settings.
2. Customizing Caching Options:
- Smart Cache: Toggle this setting Off for now, as we’ll manually configure caching for optimal performance.
- Cache Expiration Time: Set this to 1 Hour to ensure content is refreshed regularly, balancing speed with up-to-date information.
- Browser Cache Expiration Time: Mirror the same setting of 1 Hour to encourage browsers to store content locally for faster access.
- Query String Sort: Enable this option by setting it to On to account for different query strings in URLs, optimizing cache utilization.
- Cache Error Response: Keep this Off to avoid caching error messages, preventing potential issues with repeat visitors.
3. Varying Caching for Precision:
- Under Vary Cache, carefully adjust these settings:
- URL Query String: Turn this On to create separate cached versions of pages with different query strings, ensuring accurate content delivery.
- Browser WebP Support: Activate this option by setting it to On to deliver WebP images to compatible browsers, optimizing image size for faster loading.
- All other options: Ensure they remain Off to avoid unnecessary cache variations that could impact performance.
4. Handling Cookies and Videos:
- Strip Response Cookies: Leave this Off to preserve cookies, which are often essential for website functionality.
- Optimize for Video Delivery: Keep this Off unless your website primarily focuses on video content, as it’s tailored for specific video optimization needs.
5. Handling Offline Scenarios:
- Under Stale Cache, activate these options:
- While Origin Offline: Set this to On to ensure visitors can still access cached content even if your origin server is temporarily unavailable.
- While Updating: Enable this by setting it to On to serve cached content during website updates, minimizing downtime for users.
Mastering the Edge: Precision Caching with Edge Rules
1. Leaving Other Tabs Untouched:
- For now, you can leave other tabs within the Caching section as they are, as we’ll focus exclusively on edge rules for fine-tuning cache behavior.
2. Accessing Edge Rules:
- Within the Caching section of your pull zone, navigate to the Edge Rules tab. This is where you’ll craft precise instructions to control what content gets cached and how.
3. Creating Essential Edge Rules:
- Prepare to create 7 crucial edge rules to ensure a balance between speed and security, preventing sensitive information like login details from being cached.
Rule #1: Establishing Canonical Authority (Set Canonical Header)
1. Initiate Rule Creation:
- Click on “Create a New Rule” beneath the “Edge Rules” tab to begin defining a new rule for clarity and SEO optimization.
2. Rule Details:
- Description: Enter a descriptive name for easy identification, such as “Canonical Header.”
- Action: Select “Set Response Header” to instruct BunnyCDN to add a specific header to responses.
3. Header Specification:
- Header Name: Type “link” to precisely target the link header for modification.
- Header Value: Provide the following value, replacing “ermarketing.agency” with your actual domain:
<https://yourdomain.com{{path}}>; rel="canonical"
- This crucial value ensures search engines recognize your original content, even when accessed through the CDN, preventing potential duplicate content issues.
4. Condition Matching:
- Choose “Match any” to apply this rule universally, ensuring consistent canonical header inclusion across all pages.
5. Path Inclusion:
- In the “Required” field, type an asterisk (*) to encompass all pages within your website.
[Insert image of the Edge Rule configuration with highlighted fields]
6. Saving and Verification:
- Click “Save” to establish this rule.
- Double-check its presence and accuracy within the Edge Rules list for peace of mind.
By implementing this rule, you’ll maintain clear canonical authority, ensuring search engines prioritize your original content and avoid potential SEO pitfalls.
Rule #2: Streamlining URL Structure (Set www Redirect)
1. Rule Creation:
- Click on “Create a New Rule” to initiate the process of establishing a consistent URL structure.
2. Rule Description:
- Enter a descriptive name, such as “www Redirect” or “Non-www Redirect” depending on your preference.
3. Action Selection:
- Choose “Redirect to URL” to guide visitors to a specific destination.
4. Redirect URL:
- Provide the target URL, replacing the placeholder with your own domain:
- To redirect www to non-www:
https://yourdomain.com/{{path}} - To redirect non-www to www:
https://www.yourdomain.com/{{path}}
- To redirect www to non-www:
5. Condition Matching:
- Select “Match any” to apply this rule universally.
6. IF Condition:
- Enter the specific URL pattern to trigger the redirect:
- To redirect www to non-www:
https://www.yourdomain.com/* - To redirect non-www to www:
https://yourdomain.com/*
- To redirect www to non-www:
Rule #3: Protecting Sensitive Areas (Disable Caching)
1. Rule Creation:
- Click on “Create a New Rule” to initiate the process of safeguarding specific parts of your website.
2. Rule Description:
- Enter a descriptive name, such as “Disable Caching for Sensitive URLs.”
3. Action Selection:
- Choose “Override Cache Time” to prevent caching for designated URLs.
4. Cache Time Restriction:
- Set “Cache Time In Seconds” to 0 to effectively disable caching.
5. Condition Matching:
- Select “Match any” to apply this rule universally.
6. Multiple IF Conditions:
- Employ the “+ Add Property” button to create multiple IF conditions for different URLs:
- Add
https://yourdomain.com/wp-admin/*to prevent caching of the WordPress admin area. - Add
https://yourdomain.com/wp-login.phpto exclude the login page from caching. - Remind users to include “www” in the URLs if they’ve chosen to redirect to www in Rule #2.
- Add
7. Saving and Verification:
- Click “Save” to establish the rule.
- Double-check its presence and accuracy within the Edge Rules list.
By implementing this rule, you’ll ensure sensitive areas like the admin panel and login page remain uncached, preserving security and functionality.
Rule #4: Prolonging the Life of Static Assets (CSS & JS Server Cache)
1. Rule Creation:
- Click on “Create a New Rule” to begin extending the cache duration for static files, enhancing performance.
2. Rule Description:
- Enter a descriptive name, such as “Extended Cache for CSS & JS.”
3. Action Selection:
- Choose “Override Cache Time” to customize the caching behavior for specific file types.
4. Extended Cache Time:
- Set “Cache Time In Seconds” to 86400, which equals 24 hours, ensuring a full day of caching for designated files.
5. Condition Matching:
- Select “Match Any” to apply this rule universally.
6. File Extension Targeting:
- Under “Conditions,” choose “File Extension” to focus on specific file types.
- Employ the “IF Match Any” option to create multiple conditions:
- Add “css” to target Cascading Style Sheets (CSS).
- Add “js” to encompass JavaScript files.
- Remind users to add other static file extensions they wish to cache longer, such as “ttf” for fonts or “json” for data files.
7. Saving and Verification:
- Click “Save” to establish the rule.
- Double-check its presence and accuracy within the Edge Rules list.
With this rule in place, you’ll maximize performance by keeping frequently used static files cached for an extended period, minimizing server requests and enhancing user experience.
Rule #5 Images Server Cache: Now, let's cache images, videos and fonts even longer:
1. Rule Creation:
- Click on “Create a New Rule” to initiate the process of extending cache duration for visuals and media, boosting performance.
2. Rule Description:
- Enter a descriptive name, such as “Extended Cache for Images, Videos, and Fonts.”
3. Action Selection:
- Choose “Override Cache Time” to customize caching behavior for specific file types.
4. Prolonged Cache Time:
- Set “Cache Time In Seconds” to 2592000, which equals 30 days, ensuring a month-long cache for designated files.
5. Condition Matching:
- Select “Match Any” to apply this rule universally.
6. File Extension Targeting:
- Under “Conditions,” choose “File Extension” to focus on specific file types.
- Employ the “IF Match Any” option to create multiple conditions:
- Add “png” and “jpg” to target common image formats.
- Add “woff2” and “svg” for font files.
- Include “lott*” to encompass Lottie animation files.
- Add “webp” for optimized image format.
- Include “mp4” for video files.
- Remind users to add other static file extensions they wish to cache for 30 days.
7. Saving and Verification:
- Click “Save” to establish the rule.
- Double-check its presence and accuracy within the Edge Rules list.
Balancing Caching Strategies:
– Explanation:
- This rule strategically caches images, videos, and fonts longer than CSS and JS files for two key reasons:
- Dynamic Nature of CSS and JS: These files often undergo frequent changes due to optimizations and updates, especially on dynamic sites using tools like LiteSpeed Cache. A shorter cache duration ensures visitors always access the latest versions.
- Stability of Visual Assets: Images, videos, and fonts typically remain unchanged for extended periods, making them ideal for longer caching. This minimizes server requests, significantly enhancing performance and user experience.
By implementing this rule, you’ll maximize cache efficiency for visual elements, reducing server load and delivering a smoother, faster experience for your visitors.
Rule #6: Instructing Browsers to Hold On (CSS & JS Browser Cache)
1. Rule Creation:
- Click on “Create a New Rule” to initiate the process of guiding browsers to cache CSS and JS files for an extended period, minimizing server requests.
2. Rule Description:
- Enter a descriptive name, such as “Extended Browser Cache for CSS & JS.”
3. Action Selection:
- Choose “Override Cache Time” to directly influence browser caching behavior.
4. Extended Cache Time:
- Set “Cache Time In Seconds” to 2592000, which equals 30 days, ensuring browsers store these files locally for a month.
- Remind users to adjust this value based on their specific website needs and update frequency.
5. Condition Matching:
- Select “Match Any” to apply this rule universally.
6. File Extension Targeting:
- Under “Conditions,” choose “File Extension” to focus on specific file types.
- Employ the “IF Match Any” option to create multiple conditions:
- Add “css” to target Cascading Style Sheets (CSS).
- Add “js” to encompass JavaScript files.
7. Saving and Verification:
- Click “Save” to establish the rule.
- Double-check its presence and accuracy within the Edge Rules list.
With this rule in place, you’ll instruct browsers to store CSS and JS files locally for a significant duration, reducing the need to fetch them from the server for returning visitors, leading to faster page loads and a more responsive experience.
Rule #7: Ensuring Visual Endurance (Override Browser Cache for Static Files)
1. Rule Creation:
- Click on “Create a New Rule” to begin extending browser cache duration for visual elements and fonts.
2. Rule Description:
- Enter a descriptive name, such as “Extended Browser Cache for Images & Fonts.”
3. Action Selection:
- Choose “Override Cache Time” to directly influence browser caching behavior.
4. Prolonged Cache Time:
- Set “Cache Time In Seconds” to 31536000, which equals a full year, maximizing browser-side caching for designated files.
- Remind users to adjust this value based on their website’s update frequency and content changes.
5. Condition Matching:
- Select “Match Any” to apply this rule universally.
6. File Extension Targeting:
- Under “Conditions,” choose “File Extension” to focus on specific file types.
- Employ the “IF Match Any” option to create multiple conditions, up to the limit of 5:
- Add “webp” for optimized image format.
- Include “png” for common image type.
- Add “woff2” for font files.
- Include “lott*” to encompass Lottie animation files.
- Add “svg” for Scalable Vector Graphics.
7. Addressing Rule Limits:
- If you need to specify more than 5 file extensions, create additional Edge Rules with the same settings, varying only the file extensions.
8. Saving and Verification:
- Click “Save” to establish the rule.
- Double-check its presence and accuracy within the Edge Rules list.
With this rule in place, you’ll maximize browser caching for images and fonts, significantly reducing server load and delivering a faster, smoother experience for returning visitors, even after extended periods of absence.
Verification and Reap the Rewards of Speed
Confirming CDN Delivery:
- Utilize Ping: Verify that your WordPress site is now served from BunnyCDN’s global network by pinging your website’s URL. If successful, the response will originate from BunnyCDN’s IP addresses, rather than your server’s.
- Leverage Testing Tools: For more in-depth analysis, employ performance testing tools provided by your hosting provider or reputable third-party options like GTmetrix, WebPageTest, or PageSpeed Insights. These offer comprehensive metrics on load times, resource usage, and optimization opportunities.
Monitoring Load Time Improvements:
- Anticipate Warm-Up: Understand that BunnyCDN’s cache requires a brief warm-up period to populate with your site’s content. During this time, you might not observe immediate speed gains. However, once the cache is fully primed, you’ll witness the remarkable performance boost.
- Celebrate Blazing Speed: After the warm-up period, expect to witness significantly faster loading times across your WordPress site. Your visitors will enjoy a seamless and responsive experience, benefiting from reduced server load, swifter content delivery, and optimized network performance.
Troubleshooting Tips:
- Double-Check Configuration: If you don’t observe expected speed improvements, meticulously review your BunnyCDN setup and edge rules to ensure accuracy.
- Seek Assistance: If challenges persist, don’t hesitate to reach out to BunnyCDN’s dedicated support team for expert guidance and troubleshooting.
Additional Considerations:
- Continuous Monitoring: Regularly monitor your site’s performance using the aforementioned tools to maintain optimal speed and identify any potential issues promptly.
Optimization Exploration:
- Unlock Unparalleled Speed: While BunnyCDN delivers a significant performance boost, you can further amplify your WordPress site’s speed by exploring additional optimization techniques. These strategies, combined with BunnyCDN’s powerful caching, will propel your website to unprecedented levels of speed and efficiency.
- Perfecting Visual Content:
- Optimize images for web delivery by reducing file sizes without compromising quality. Consider utilizing image compression tools or plugins to achieve this effectively.
- Employ modern image formats like WebP, which offer superior compression and smaller file sizes compared to traditional formats like JPEG and PNG.
- Streamlining Code:
- Minify CSS and JavaScript files by removing unnecessary characters like spaces and comments, reducing file sizes and accelerating browser loading times.
- Combine multiple CSS and JavaScript files into fewer ones to reduce HTTP requests, further streamlining page load speeds.
- Leverage code optimization plugins for WordPress to automate these processes and ensure optimal code efficiency.
- Additional Performance Enhancements:
- Explore lazy loading for images and videos to defer loading of non-critical content until it’s needed, improving initial page load times.
- Consider using a performance-oriented WordPress theme designed for speed and optimization.
- Regularly update WordPress, plugins, and themes to benefit from performance improvements and bug fixes.
Remember, optimization is an ongoing journey. By continuously refining your website’s code, images, and overall structure, you’ll create an exceptionally fast and engaging experience for your visitors, ultimately boosting engagement, conversions, and overall user satisfaction.
Congratulations on harnessing the power of BunnyCDN to supercharge your WordPress site! Enjoy the fruits of your labor as your visitors revel in lightning-fast load times and a seamless user experience.
Blazing Speed and Unwavering Reliability
Experience a WordPress site that flies with Remarkable Cloud's Managed WordPress Hosting. Unleash lightning-fast load times, rock-solid stability, and effortless management, all powered by Full BunnyCDN Caching, LiteSpeed, LSCache, and our expert team. Get ready to redefine your WordPress experience—start now!
