Title: Strange & Erratic CSS Behaviour Last modified: September 19, 2023 --- # Strange & Erratic CSS Behaviour * [willjames](https://wordpress.org/support/users/willjames/) * (@willjames) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/) * Hi, I have been experiencing issues with the setup I have and CSS. I use CCSS with AO and Rapidload. * For debugging I have turned off rapidload temporarily. I use W2TC and Cloudflare API. * The setup works well and I have (had) good speed metrics etc. However Many pages appear to load correctly, then the headings flash to a different size/colour, then back again. I have tried to debug and clearing all the caches etc and no joy. I have a manual CCSS rule set up for this homepage (is front page). * It seems to load CCSS css then another set and then a third set (which is why I turned off Rapidload to debug as I thought this may have confused it)? * You always seem to be able to spot the schoolboy error straight away with these things…? * Thanks in advance * The page I need help with: _[[log in](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Fstrange-erratic-css-behaviour%2F%3Foutput_format%3Dmd&locale=en_US) to see the link]_ Viewing 15 replies - 1 through 15 (of 22 total) 1 [2](https://wordpress.org/support/topic/strange-erratic-css-behaviour/page/2/?output_format=md) [→](https://wordpress.org/support/topic/strange-erratic-css-behaviour/page/2/?output_format=md) * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17062506) * I had a quick look (about to leave on a short holiday) but I don’t see this happening? When you encounter that behavior, are you logged in by any chance? Can you try as an anonymous user in a “private” browser window? * frank * Thread Starter [willjames](https://wordpress.org/support/users/willjames/) * (@willjames) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17062637) * I always use inprivate and never logged in. It is most pages and first load. If you hard refresh browser it happens again, however…? * Thread Starter [willjames](https://wordpress.org/support/users/willjames/) * (@willjames) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17063175) * It appears to be downloading two different AO files for the CSS on the page with conflicting info on them? I don’t recall seeing this before? Google Pagespeed is picking up the CLS of 0.222 as a result * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17063324) * OK, it looks like `stm-skin-custom-css` is causing the issue here (at least on mobile, where it seems to result in a too big a font for the “Used Trucks for Sale (5284)” title), which is then corrected by `stm-wpcfto-styles-css`? * Thread Starter [willjames](https://wordpress.org/support/users/willjames/) * (@willjames) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17071107) * The problem disappears when I clear the AO cache however? - This reply was modified 2 years, 7 months ago by [willjames](https://wordpress.org/support/users/willjames/). * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17071533) * well, clearing AO’s cache also clears (most) page cache(s) and will also clear all of Rapidload’s cache, so hard to say what makes this work now. maybe just wait and see if this happens again? 🙂 * Thread Starter [willjames](https://wordpress.org/support/users/willjames/) * (@willjames) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17082915) * Hi, This is still causing issues – the file [https://www.truckpages.co.uk/wp-content/cache/rapidload/min-css/skin-custom-eeab046a1a6f.min.css](https://www.truckpages.co.uk/wp-content/cache/rapidload/min-css/skin-custom-eeab046a1a6f.min.css) is being processed by AO to give [https://www.truckpages.co.uk/wp-content/cache/autoptimize/css/autoptimize_single_9cdbdc893780e3def645be4d73474c0a.css?ver=174](https://www.truckpages.co.uk/wp-content/cache/autoptimize/css/autoptimize_single_9cdbdc893780e3def645be4d73474c0a.css?ver=174) The first file passes the css validator but there is an error in the h4 and h5 in the AO file that is causing some issues? * Thanks * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17082998) * hmmm; AO does not re-minify css-files that end in `.min.css` as those are considered minified already, so AO will not touch [https://www.truckpages.co.uk/wp-content/cache/rapidload/min-css/skin-custom-eeab046a1a6f.min.css](https://www.truckpages.co.uk/wp-content/cache/rapidload/min-css/skin-custom-eeab046a1a6f.min.css) * but from what I see in the developer tools the AO-file you mention does not get loaded immediatly, but gets the “unused CSS” treatment ending up as * [https://www.truckpages.co.uk/wp-content/cache/rapidload/min-css/uucss-acd57addd86e8064e996c25c88d2bc71-d2f241722270.min.css](https://www.truckpages.co.uk/wp-content/cache/rapidload/min-css/uucss-acd57addd86e8064e996c25c88d2bc71-d2f241722270.min.css) * which later (by rapidload JS) is replaced by * [https://www.truckpages.co.uk/wp-content/cache/autoptimize/css/autoptimize_single_9cdbdc893780e3def645be4d73474c0a.css?ver=174](https://www.truckpages.co.uk/wp-content/cache/autoptimize/css/autoptimize_single_9cdbdc893780e3def645be4d73474c0a.css?ver=174) * as configured in this inline Rapidload JS block; * > [View post on imgur.com](https://imgur.com/exf85xM) * So what is likely happening; * the page loads, no CSS that sets those fonts is loaded yet * rapidload loads the uucss version * rapidload then replaces the uucss version with the original AO CSS file * What you’ll have to do is ensure that one file is not lazyloaded like that by Rapidload OR add some custom CSS (in the Customizer) to force the fonts in the right size? * hope this helps 🙂 frank * Thread Starter [willjames](https://wordpress.org/support/users/willjames/) * (@willjames) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17085513) * I have turned off rapidload & Critical css and everything works well. (apart from css is render blocking) * I turned on critical css and immediately the issue reappeared (large flash of font and change of color with cache busting ?random text in the URL. * Oddly I have a similar site with the same settings and this does not happen: [https://www.plantpages.co.uk/](https://www.plantpages.co.uk/) this uses AO, CCSS & Rapidload and we are not seeing the issues. * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17085527) * you’ll have to add the relevant CSS selectors for the H1/H2 fonts under Settings- > Autoptimize -> Critical CSS -> “Add CSS to all rules”, likely (something like) this; * ``` h1,.h1,h1.heading-font{font-size:24px;} h2,.h2,h2.heading-font{font-size:22px;} ``` * Thread Starter [willjames](https://wordpress.org/support/users/willjames/) * (@willjames) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17086243) * I have done this – added to the homepage only. I have also put a fix in the css file that had an error in the font. So now at [https://www.truckpages.co.uk/](https://www.truckpages.co.uk/) using a ?intheurl and a hard refresh still shows a larger h1 font on initial load, as though something loads before the CCSS – I have looked at the CCSS and there is no large font in the css in it? * It seems to load three AO css files. With no CCSS running it works fine? * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17086359) * you need to add the CSS to Settings -> Autoptimize -> Critical CSS -> “add CSS to all rules”, then click “submit” and then click “save changes” 🙂 * Thread Starter [willjames](https://wordpress.org/support/users/willjames/) * (@willjames) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17087788) * Hi, thanks for coming back. I had already added that to all rules. It is as though the CCSS is being ignored on initial load and something else is taking precedence( I am struggling to see what it can be even with the site throttled in dev tools). It is as though CCSS cannot do its job correctly? * Plugin Author [Optimizing Matters](https://wordpress.org/support/users/optimizingmatters/) * (@optimizingmatters) * [2 years, 7 months ago](https://wordpress.org/support/topic/strange-erratic-css-behaviour/#post-17087837) * when checking the HTML source, so you see the critical CSS (`