Fast Website = Broken CSS Website
-
I cannot seem to get the configuration correct for my site. If I get it configured to run fast then the css and site is all over the place. If the site looks good then it is sooooo slow. What am I missing?
-
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/41b8c674da16a5c622824f8ed7dfa49bScenario 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/95151cffce91b673ddb9245949a48c94sorry, 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/cf1d87e33e63669857d012a322039608I 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!
- The topic ‘Fast Website = Broken CSS Website’ is closed to new replies.