Configure SMUSH Image Compression with Cloudflare

Configuring Smush (a popular WordPress image optimization plugin) to work harmoniously with Cloudflare for your website, WWW.YOURWEBSITE.COM, is an excellent way to improve your page load speeds.

Since Smush handles the actual compression of the images and Cloudflare handles the delivery (CDN) and caching, they work great together as long as their settings don’t overlap or conflict.

Here is the step-by-step flow to configure them together optimally.

Phase 1: Configure Smush in WordPress

First, we want to ensure your images are compressed at the source (your server) before Cloudflare caches them.

1. Log in to your WordPress Dashboard for WWW.YOURWEBSITE.COM

2. Navigate to Smush in the left-hand menu.

3. Bulk Smush: Go to the Bulk Smush tab and click Bulk Smush Now. This will compress all existing images on your site. (If you have the free version, you may need to click this in batches of 50).

4. Automatic Compression: Scroll down in the dashboard and ensure Automatic Compression is turned on. This ensures any new images you upload are compressed instantly.

5. Image Resizing: Enable “Resize Original Images” and set the max width and height (usually 2048px or 2560px is safe for modern screens). This prevents massive, unscaled photos from slowing down your site.

6. Lazy Load: Go to the Lazy Load tab and activate it. This stops images from loading until the user scrolls down to them. (Note: We will need to make sure Cloudflare doesn’t conflict with this in Phase 2).

7. Disable Smush CDN (If using Cloudflare): If you are a WPMU DEV Pro member, Smush offers its own CDN. Because you are using Cloudflare, turn OFF the Smush CDN to prevent the two networks from clashing.

Phase 2: Configure Cloudflare Settings

Now, log in to your Cloudflare Dashboard and select your domain (aakarshankala.com).

1. Prevent Lazy Load Conflicts Cloudflare has features that can break Smush’s Lazy Loading script.

• Go to Speed > Optimization > Content Optimization.

• Find Rocket Loader. Turn this OFF. (Rocket Loader delays JavaScript, which often breaks WordPress lazy loading plugins, causing images to disappear).

• Optional (Cloudflare Pro only): If you have a paid Cloudflare plan, turn OFF Mirage and Polish, as you are already using Smush for image optimization. If you are on the Free plan, you won’t see these anyway.

2. Optimize Caching Rules We want to force Cloudflare to cache your newly “Smushed” images aggressively.

• Go to Caching > Configuration.

• Set Caching Level to Standard.

• Set Browser Cache TTL to 1 year (this tells visitors’ browsers to store the images locally so they don’t have to re-download them on return visits).

3. Create a Custom Page Rule for Images (Highly Recommended) By default, Cloudflare caches images, but we can instruct it to cache your WordPress uploads folder even more aggressively.

• Go to Rules > Page Rules.

• Click Create Page Rule.

• URL: Enter *aakarshankala.com/wp-content/uploads/*

• Setting 1: Select Cache Level and set it to Cache Everything.

• Setting 2: Select Edge Cache TTL and set it to a month (or longer).

• Click Save and Deploy.

Phase 3: Purge Caches to Apply Changes

Because you have changed how images are handled, you need to clear all old, unoptimized data.

1. Clear WordPress Caches: If you use a caching plugin on WordPress (like LiteSpeed, WP Rocket, or W3 Total Cache), clear the cache there first.

2. Clear Cloudflare Cache: In your Cloudflare Dashboard, go to Caching > Configuration and click Purge Everything.

3. Keep Under Attack mode disabled under Secuirty configuration 

How to test if it’s working:

1. Open an incognito window and visit aakarshankala.com.

2. Right-click on any image and select Inspect.

3. Look at the network tab or the image URL. The URL should still be your domain (showing Cloudflare is serving it smoothly), and as you scroll down the page, you should see images loading slightly after you scroll (confirming Smush Lazy Load is functioning perfectly).