Website completely messed up and I can't fix it

I am trying to switch to X Theme from Throne, and my website is completely messed up.
The menu is out of place and disappears when moving the cursor on it, the sidebar is below the posts despite the layout being sidebar right, content left (tried the opposite as well), fonts are messy, post metas’ are messy, everything looks aweful. I want to use Renew 2, but tried using Integrity, Renew 4, Icon, Ethos, as well as the full demos (App and Education). I changed the reading settings, made my blog page “latest posts” page, tried configuring the theme option, content, nothing works.
Here are pictures:


How can I fix this?

Edit: easier to see to pics here:

Hi There,

Thanks for writing in! This issue seems to be related to CloudFlare or your caching plugin. Head over to your CloudFlare account and the Speed tab, make sure to disable CSS & Javascript autominifcation options and then clear CloudFlare cache.

If you’re using a caching plugin, make sure to purge your server cache as well and test your site again. That should resolve your issues.

Thanks!

It worked, thank you very much!
A follow up question- when testing my sites speed I noticed that the image sizes vary considerably- sometimes my webpage is 2.4MB and the images take 1.87MB, and sometimes my site is 1MB with 0.55MB being images. It happens both on pingdom and on gtmetrix.
The page has a few articles ordered by date, meaning that the entire page is exactly the same, so it can’t be caused by different images loading.
How can I fix this and serve responsive images?

Hey @strongest,

I’m not sure what the issue is with your images. Can you provide screenshots? Also, you should optimize your images. Please see this performance guide.

Thanks.

Here are 2 pingdom reports, a good one (page size=1.3MB) and a bad one (page size=2.3MB)-
Good one:


Bad one:

A few screenshots (good one in blue, bad in red):

As you can see, the difference is in image size- everything else is pretty much the same.

Here you can see that some images are considerably bigger, even 11.5 times bigger (pc.png), there are 2 images that do not change (Squats.png and Untitled-1.png).

My images are optimized (I use WP-Smush).

Hey @strongest,

This is not an issue with X but rather, looks like a transmission difference to different locations. I checked one of your images as an example. I downloaded it and its real size is 55 kb.

It’s 55 kb when it arrived in my browser.

Please take a look at the screenshots below of your two tests. They are from different servers.

As to what exactly is causing this, I could not answer because this is not theme related. It has to do with networking.

You might want to check https://wpspeedguru.com/ for website optimization tips.

Thanks.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.