CloudFlare seems to break CSS files... anyone experience this?

[drastic]

Does anyone have issues with cloudflare messing up the css rendering?

 

 

[Tech Support]

Yes, saw this in admin panel of some customer. Should switch off this feature in Cloudflare. Not sure how it is called, but maybe something with pagespeed.

[drastic]

If you remember the setting, let us know for sure!

 

[Tech Support]

I don't know, but OpenAI seems to know that:

Quote

In Cloudflare, modifications to URLs that include terms like "pagespeed" often occur due to features related to performance optimization. These features may rewrite URLs of assets like CSS, JS, and images to enhance loading speeds by applying various optimization techniques.

Here are the main Cloudflare settings that could result in URL modifications:

1. Automatic Platform Optimization (APO)

• Cloudflare’s Automatic Platform Optimization (APO) for WordPress and other platforms can alter the way URLs are cached and served, including static assets like CSS. APO aggressively optimizes pages for performance, and in some cases, this could result in URLs being rewritten.

To check or disable:

• Go to Speed > Optimization in your Cloudflare dashboard.
• Look for Automatic Platform Optimization and toggle it off if it's enabled.

2. Rocket Loader

• Rocket Loader is a feature that can optimize and defer loading of JavaScript files to improve page load times. Although it primarily targets JS files, it could also affect how CSS resources are processed if combined with other optimizations.

To check or disable:

• Go to Speed > Optimization and check if Rocket Loader is enabled.
• You can toggle it off if you suspect it’s causing URL modifications.

3. Cloudflare Workers

• If your site uses Cloudflare Workers, custom scripts may be modifying asset URLs, including adding "pagespeed" or other markers to CSS files. Workers allow for custom handling of requests and responses, including URL rewriting for optimization purposes.

To check:

• Go to Workers & Pages > Workers in the Cloudflare dashboard and check if there are any active Workers scripts that may modify URLs.

4. Polish or Image Optimization

• Cloudflare’s Polish feature optimizes images, and though it's not directly related to CSS, image optimization services sometimes append markers like "pagespeed" to URLs. If the feature is overly aggressive, it might affect URLs of other static resources like CSS.

To check or disable:

• Go to Speed > Optimization and check the Polish setting.
• You can disable Polish if it's modifying URLs in unexpected ways.

5. Caching and Page Rules

• Cloudflare’s caching system may rewrite URLs to optimize asset delivery. In addition, Page Rules could be set to enforce performance optimizations that include URL rewriting for CSS and other assets.

To check caching settings:

• Go to Caching > Configuration in the Cloudflare dashboard to check the general caching settings.

To check Page Rules:

• Go to Rules > Page Rules and check if any Page Rules are configured to perform optimizations or rewrite asset URLs.

6. Minification (Auto Minify)

• Auto Minify in Cloudflare’s optimization settings can affect how CSS, JavaScript, and HTML files are served. Though minification typically reduces file sizes, it can also result in altered URLs in some cases, particularly if combined with other optimization services.

To check or disable:

• Go to Speed > Optimization and toggle off Auto Minify for CSS to see if it resolves the issue.

Summary of Settings to Check:

1. Automatic Platform Optimization (APO)
2. Rocket Loader
3. Cloudflare Workers
4. Polish/Image Optimization
5. Caching/Page Rules
6. Auto Minify

By reviewing and adjusting these settings in Cloudflare, you should be able to identify which one is responsible for modifying URLs to include the "pagespeed" string. Disabling or modifying the relevant setting should prevent this from happening.

 

[drastic]

Turned out to be an issue with a pagespeed mod setting (or something like that) on the server.

If anyone has the same issue we had, then check at the server level too :)