Using WP Rocket with AWS CloudFront CDN

Integrating WP Rocket with AWS CloudFront CDN helps to optimize and deliver your website content efficiently. Here’s a step-by-step guide to configure this setup:

Step 1: Set Up AWS CloudFront

1. Create a CloudFront Distribution:
   • Go to the AWS Management Console.
   • Navigate to the CloudFront service.
   • Click “Create Distribution.”
   • Choose “Web” for the delivery method.
   • Under the “Origin Settings,” specify your S3 bucket or the origin server URL (typically your website’s domain).
2. Configure the Distribution Settings:
   • Origin Settings:
     • Origin Domain Name: Your website’s domain or S3 bucket.
     • Origin Path: Leave empty (or specify if you have a sub-directory).
   • Default Cache Behavior Settings:
     • Viewer Protocol Policy: Redirect HTTP to HTTPS.
     • Allowed HTTP Methods: GET, HEAD, OPTIONS (or include POST, PUT, PATCH, DELETE if needed).
   • Distribution Settings:
     • Price Class: Choose based on your target audience (e.g., Use All Edge Locations).
     • Alternate Domain Names (CNAMEs): Add your domain (e.g., cdn.yourdomain.com).
     • SSL Certificate: Choose “Custom SSL Certificate” if you have one, or use the default CloudFront certificate.
3. Create the Distribution:
   • Click “Create Distribution” and wait for the status to change to “Deployed.”
4. Set Up CNAME with Your DNS Provider:
   • Create a CNAME record in your DNS settings to point your subdomain (e.g., cdn.yourdomain.com) to the CloudFront domain (e.g., d1234abcdefg.cloudfront.net).

Step 2: Configure WP Rocket for CloudFront

1. Install and Activate WP Rocket:
   • Go to your WordPress admin dashboard.
   • Navigate to “Plugins” > “Add New.”
   • Search for “WP Rocket,” install, and activate it.
2. Configure WP Rocket Settings:
   • Go to “Settings” > “WP Rocket.”
   • Navigate to the “CDN” tab.
   • Enable the “CDN” option.
   • In the “CDN CNAME(s)” field, add your CloudFront URL (e.g., cdn.yourdomain.com).
   • Check the boxes for the file types you want to serve via CDN (e.g., images, CSS, JavaScript).
   • Click “Save Changes.”

Step 3: Additional WP Rocket Settings

• Cache Settings:
  • Go to the “Cache” tab.
  • Enable caching for mobile devices if needed.
  • Adjust the cache lifespan according to your needs.
• File Optimization:
  • Go to the “File Optimization” tab.
  • Enable options for minifying CSS, JavaScript, and HTML.
  • Combine files if needed but test thoroughly as this can sometimes break site functionality.
• Media Optimization:
  • Go to the “Media” tab.
  • Enable lazy loading for images and iframes/videos.
• Preload:
  • Go to the “Preload” tab.
  • Enable the sitemap-based cache preloading.
  • Specify your sitemap URL (e.g., https://yourdomain.com/sitemap.xml).
• Advanced Rules:
  • Go to the “Advanced Rules” tab.
  • Specify any URLs, cookies, or user agents that should not be cached.

Step 4: Test and Verify

• Clear and Preload Cache:
  • In WP Rocket, go to the “Dashboard” tab and click “Clear Cache.”
  • Click “Preload Cache” to start preloading the cache.
• Verify CDN Integration:
  • Open your website in a browser.
  • Inspect the page source or use the browser’s developer tools to check that static assets (images, CSS, JS) are being served from the CloudFront URL.

Step 5: Monitor and Adjust

• Monitor Performance:
  • Use tools like Google PageSpeed Insights, GTmetrix, or Pingdom to monitor your website’s performance.
  • Check AWS CloudFront metrics for cache hit ratios and data transfer statistics.
• Adjust Settings as Needed:
  • Based on performance data and any issues observed, adjust your WP Rocket and CloudFront settings accordingly.

By following these steps, you can efficiently configure WP Rocket with AWS CloudFront CDN to enhance your website’s performance and deliver content faster to your users.