My Wordpress website Layout Has been Broken

Hi,

I am a new user of Cloudflare. I am using the pro package. My website layout has been broken after adding Cloudflare. I am sure it has a solution. Please somebody help me.

Here is my website link: https://www.petdogplanet.com/

If I use CTRL + F5 then I can see the real design of the site. But still, I am worried because my visitor would not do this, they will leave the site right away.

And if you hit F5 in Browser the site looks nice (thats by me for the startpage)?

First, you load massive unsecure content over the secure connection.

Then, it tries to load e.g. GET
https://www.petdogplanet.com/wp-content/cache/min/1/4141a7063d9402ba609da7cf38123fd5.css

with a 404.
Did you use some cache in your Website and try to use Cloudflare? If yes, that could be bad!

Regards,
Laszlo

Ah, did not see, you use wordpress.

Same problem by me until yesterday.
Did you enabled APO?

If yes, remove all Page Rules, there could be some issues with that.

Regards,
Laszlo

Thanks for your reply. I have been using WP Rocket plugin for a month and everything was going well. But yesterday, I got Cloudflare and the problem occurred. I had removed the plugin for a while but the problem did not solve. Please help me.

The plugin you need is called “Cloudflare” current version is 3.8.4.

Currently there are no page rule, please check it: https://prnt.sc/uzcl4n
I have deleted the rule but still there is a problem.

OK, next step.
The css-file which will get a 404-error.
Did you have any Caching / Optimize plugins in WP enabled? If yes, could you disable them and purge the CF-cache?
Did you install the Cloudflare-plugin and connect this thing with your CF-account (e.g. token)?

If you look in Clouflare Web --> Your account --> Speed --> Optimization:

Looks like the screenshot above?

I have installed the Cloudflare” current version is 3.8.4.

Yeah, I have turned it on now.

Ah, cool.
OK, and now?
You must purge the CF-Cache now.
And then, reload some things.

I have deactivate the only caching plugin wp rocket.

All ok,
for me the site looks nice now.

But first: You have a problem with your (in german DSGVO) The cookie-law-banner.
Everytime i visit the startpage the banner opens and every time i cklick on accept all.

Forget ist, now it works

Ok, CF Cache purge done.

Nice.
In some cases it could be, that single pages looks “destroyed”. Then you would hit Ctrl+F5 to get the page from you origin wp page.
For the rest, look at your content.
There ist unsecure content in your secured site. Not good .

I have checked the website on incognito mode in google chrome and microsoft edge browser, still same problem showing.

Hit ctrl+f5

I’ve tested your page with webpagetest from a location nearby me. Looks nice. 0.087s ttfb is not so bad.

If you see in the Webpagetest result, you could get a better result when compressing images.
Try to turn on Polish and then Lossy and WebP (if browser supported).
The quality is always enough (especially on a site with med or small images like yours).

I am not worried about the speed, because my site has good speed. But the site is not showing the original design. It is showing an older version which is also not in the proper way. Look at this screenshot; https://prnt.sc/uzdbsw