Fast Website = Broken CSS Website

So the issue is with CSS optimization; if it is off the site works, as soon as it’s on the site breaks? Does it work when “aggregate CSS” is off? Or when “also aggregate inline CSS” is off?

Scenario 1:
Checked:
Optimize JavaScript Code?
Aggregate JS-files?
Exclude scripts from Autoptimize:wp-includes/js/dist/,wp-includes/js/tinymce/,js/jquery/jquery.js, js/jquery/jquery.min.js
Optimize CSS Code?
Aggregate CSS-files?
Also aggregate inline CSS?
Eliminate render-blocking CSS? (Using Critcal CSS)
Exclude CSS from Autoptimize:wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css
Optimize HTML Code?
Keep HTML comments?
CDN Base URL: [ listed]
Save aggregated script/css as static files?
Minify excluded CSS and JS files?
Image lazy-loading will delay the loading of non-visible images to allow the browser to optimally load all resources for the “above the fold”-page first.

These are my results; Very poor but site works
https://paste.pics/41b8c674da16a5c622824f8ed7dfa49b

Scenario 2:
Checked:
Optimize JavaScript Code?
Aggregate JS-files?
Exclude scripts from Autoptimize:wp-includes/js/dist/,wp-includes/js/tinymce/,js/jquery/jquery.js, js/jquery/jquery.min.js
Optimize CSS Code?
Aggregate CSS-files?
Also aggregate inline CSS?
Eliminate render-blocking CSS? (Using Critcal CSS)
Exclude CSS from Autoptimize:wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css
Optimize HTML Code?
Keep HTML comments?
CDN Base URL: [ listed]
Image lazy-loading will delay the loading of non-visible images to allow the browser to optimally load all resources for the “above the fold”-page first.

These are my results; Better but not good but site’s CSS is all broken
https://paste.pics/95151cffce91b673ddb9245949a48c94

sorry, but not sure I see the difference between the two scenario’s, can you just list what changed?

I unchecked in the second senario:

Save aggregated script/css as static files?
Minify excluded CSS and JS files?

Thank you!

disabling “serve as static” is not recommended really (only if your webserver is not configured correctly). “minify excluded” is best left on, but sometimes it _has_ to be disabled.

based on the screenshots, your main issue however is “server response time”, which indicates you do not have page caching at the moment, consider installing e.g. WP Super Cache or KeyCDN Cache Enabler?

I have a CDN enabled on my site already. Does this mean I need to add another plugin? Although the server repsonse time is slow, I still get so many errors that the plugin is not addressing. It does not seem that this is working as everything ELSE should pass the Google Speed Test even if the CDN is running slow. So much is still wrong with the overall settings. It is even worse for my mobile site.

Mobile https://paste.pics/85c30838c9cb0b754d011fbe68d4a08b
Desktop https://paste.pics/cf1d87e33e63669857d012a322039608

I have it set up as Scenario 1 Above.

I have it coded in EXTRA to preload a font resources yet it is still showing as an issue on the report

https://paste.pics/fadfd0368d634d68ae49a3110de09c56

Why is that?

A CDN is not the same as page caching, you indeed need to install a separate page caching plugin, it will make a big difference to your site’s performance!