How to Optimize Your Website Cloudflare Settings for Page Speed, Performance, & Security

Submitted by jordan on Thu, 08/29/2024 - 10:00

Optimize your Site with Cloudflare in 60 minutes

Just Kidding: The configuration changes don’t take long, but validation may easily take a bit longer. 

Optimizing your site with Cloudflare can have a significant impact on your business in several ways:

  1. Improved User Experience: Faster loading times lead to a better user experience, which can increase user engagement, reduce bounce rates, and improve conversion rates. In today’s competitive online environment, users expect fast and seamless interactions, and even slight delays can lead to lost customers.
  2. Enhanced SEO Performance: Page speed is a crucial factor in search engine rankings. Google and other search engines prioritize faster-loading sites, meaning that optimizing your site with Cloudflare can lead to higher visibility and more organic traffic.
  3. Increased Security: Cloudflare offers robust security features that protect your site from various threats, including DDoS attacks, SQL injections, and other malicious activities. Enhanced security can safeguard your business’s reputation and ensure the safety of user data.
  4. Scalability and Reliability: Cloudflare’s global CDN ensures that your site can handle large volumes of traffic without performance degradation. This is especially important during peak times or viral events when traffic can spike unexpectedly.
  5. Cost Savings: By offloading traffic to Cloudflare’s edge servers, you can reduce bandwidth costs and server load. This not only lowers operational costs but also extends the lifespan of your infrastructure.
  6. Actionable Insights: Cloudflare provides comprehensive analytics and insights into your site’s performance and security. These insights can help you make data-driven decisions to further optimize your site and improve your business strategies.
    1. For more extensive insights, we recommend setting up an application performance monitoring tool such as New Relic or DataDog or OpenTelemetry.

Pros and Cons of Cloudflare Optimization

Pros:

  1. Improved Performance: Cloudflare's CDN (Content Delivery Network) accelerates content delivery by caching static content at edge servers globally, reducing latency and improving load times.
  2. Security Enhancements: Provides additional security features such as DDoS protection, Web Application Firewall (WAF), and SSL/TLS encryption.
  3. Scalability: Can handle traffic spikes and provide consistent performance during high traffic periods.
  4. Cost Efficiency: Reduces server load and bandwidth costs by caching content and serving it from the nearest edge server.
  5. Comprehensive Analytics: Offers detailed insights into website traffic, security threats, and performance metrics.

Cons:

  1. Complex Configuration: Setting up and optimizing Cloudflare can be complex, especially for beginners.
  2. Dependency on Cloudflare: Heavy reliance on Cloudflare can be a risk if there are service outages or issues.
  3. Potential for Caching Issues: Incorrect caching settings can lead to outdated content being served to users.
  4. Cost for Premium Features: Some advanced features, such as Image Resizing and WAF, require a paid plan.

But all-in-all, it isn’t really that hard to configure—it just takes time to test the system for inadvertent caching and mitigating edge cases where you don’t want to optimize too much for performance. 

Here’s how we do it.

Recommendations for Cloudflare Settings

​​

For Highly-Cacheable Content:

  1. Caching Level: Cache Everything
    1. Explanation: This setting caches all content, including HTML, which is beneficial for highly-cacheable sites.
    2. Pro: Maximizes caching efficiency and minimizes server load.
    3. Con: Dynamic content might be served stale if not correctly configured.
  2. Edge Cache TTL: Longer Duration (e.g., 1 month)
    1. Explanation: Sets the duration for which content is cached at the edge servers.
    2. Pro: Reduces the frequency of requests to the origin server.
    3. Con: Updates to content might take longer to propagate.
  3. Always Online: Enabled
    1. Explanation: Serves a cached version of the site if the origin server is down.
    2. Pro: Provides high availability and uptime.
    3. Con: Users might see outdated content during server downtime.
  4. Auto Minify: Enabled (HTML, CSS, JS)
    1. Explanation: Automatically minifies code to reduce file sizes.
    2. Pro: Improves page load times by reducing the amount of data transferred.
    3. Con: Potential for code-breaking if minification is not handled correctly.
  5. Polish: Enabled (with WebP conversion)
    1. Explanation: Optimizes images by compressing them and converting them to WebP format.
    2. Pro: Significantly reduces image file sizes, improving load times.
    3. Con: Does not support all image formats (e.g., some PNGs).

For Partially Cacheable Content:

  1. Caching Level: Standard
    1. Explanation: Caches static assets but excludes HTML by default.
    2. Pro: Balances between performance and ensuring dynamic content is always fresh.
    3. Con: Less efficient than caching everything but safer for dynamic content.
  2. Edge Cache TTL: Shorter Duration (e.g., 1 hour)
    1. Explanation: Ensures that frequently changing content is updated more regularly.
    2. Pro: Keeps content more up-to-date while still benefiting from edge caching.
    3. Con: Increases the number of requests to the origin server.
  3. Page Rules: Specific Rules for Dynamic Pages
    1. Explanation: Custom rules to bypass cache or set different caching durations for dynamic pages.
    2. Pro: Fine-tunes caching strategy for different types of content.
    3. Con: Requires detailed configuration and ongoing management.
  4. Rocket Loader: Enabled
    1. Explanation: Improves loading times by asynchronously loading JavaScript.
    2. Pro: Enhances performance without compromising functionality.
    3. Con: Might cause compatibility issues with some JavaScript libraries.
  5. Polish: Enabled (without aggressive settings)
    1. Explanation: Optimizes images without over-compression.
    2. Pro: Improves performance without significant quality loss.
    3. Con: Less reduction in file size compared to aggressive settings.

Additional Recommendations:

  1. Synchronous JS File Loading: Prioritize critical JavaScript to load synchronously to improve perceived load times.
  2. Font Loading Optimization: Implement strategies like font-display: swap to prevent invisible text during font loading.
  3. Lazy Loading Offscreen Images: Defer the loading of images that are not immediately visible to the user.
  4. Server-Side Rendering (SSR): Improve performance and SEO by rendering pages on the server.
  5. Deferring Third-Party JS: Delay the loading of non-essential third-party scripts to after the initial page load.

Steps to Test Cloudflare Optimization Settings Using Page Rules

  1. Identify a Section of the Site to Test:
    1. Choose a specific section or page URL path of your site to test the new settings. This could be a directory (e.g., example.com/blog/*) or a specific page (e.g., example.com/about-us).
  2. Create a Page Rule in Cloudflare:
    1. Go to the Cloudflare dashboard and navigate to the "Page Rules" section.
    2. Click on "Create Page Rule."
    3. Enter the URL pattern for the section of the site you want to test. Use wildcard matching if needed (e.g., example.com/blog/*).
  3. Configure the Settings for the Page Rule:
    1. For Highly-Cacheable Content:
      1. Set Caching Level to "Cache Everything."
      2. Set Edge Cache TTL to "1 month."
      3. Enable Always Online.
      4. Enable Auto Minify for HTML, CSS, and JS.
      5. Enable Polish with WebP conversion.
    2. For Partially Cacheable Content:
      1. Set Caching Level to "Standard."
      2. Set Edge Cache TTL to "1 hour."
      3. Configure custom Page Rules to manage dynamic content.
      4. Enable Rocket Loader.
      5. Enable Polish without aggressive settings.
  4. Monitor and Analyze Performance:
    1. Use tools like Google PageSpeed Insights and Lighthouse to measure performance improvements.
    2. Check Cloudflare analytics for insights on cache hit rates, bandwidth savings, and security threats.
  5. Iterate and Adjust:
    1. Based on the performance data, adjust the settings as needed to achieve the desired results.
    2. Test additional settings or features to further optimize performance.
  6. Expand Optimization Site-wide:
    1. Once satisfied with the results on the test section, gradually apply the optimized settings to other sections of the site.
    2. Continue monitoring and adjusting as necessary to maintain optimal performance.

Avoid Optimizations on Third-Party Hosted Platforms

Avoid applying these Cloudflare optimizations on third-party hosted platforms (e.g., Shopify, WordPress.com, etc.) unless you are certain of their compatibility. Third-party platforms often have their own optimization and caching mechanisms that could conflict with Cloudflare settings, leading to unintended consequences and lengthy troubleshooting. 

Getting Started with Cloudflare

Have some general questions? Let us know in the comments below!

If you’d like some help getting started with Cloudflare please drop us a line and we’d be more than happy to review Cloudflare’s caching strategies and optimizations with you on your website. 

 

References:

  1. Secure and Fast GitHub Pages with Cloudflare - https://blog.cloudflare.com/secure-and-fast-github-pages-with-cloudflare/ 
  2. Cloudflare Caching Explained - https://developers.cloudflare.com/cache/ 
  3. How to Optimize Your Site with Cloudflare - https://www.cloudflare.com/learning/performance/optimization/ 
  4. Image Optimization with Cloudflare Polish - https://developers.cloudflare.com/images/polish/
  5. Using Page Rules to Control Cloudflare Settings - https://support.cloudflare.com/hc/en-us/articles/218411427 

Related Services

Web Development
Web MSP