CSS problems

some random ideas:
* try the “look only in head” option
* try excluding inline CSS (using the API, autoptimize_css_include_inline filter, cfr. autoptimize_helper.php_example)
* you could exclude one or more large CSS-files
* make sure you do have a page caching plugin, that way you’ll at least only have the longer loading time on the first hit, after which all should fly
* the upcoming autoptimize 2.0 should on average be approx 25% faster, but you still might need some of the above suggestions as 3 minutes is veryyyyyyyyyy slow.

frank

hmmm i had done nearly all of that before… ?? with no luck.
i have themeforest theme, it has woocommerce too – but i’m not using it (but had read in other topics that could be an issue…)

i’m a rookie soooo i really don’t know nothing about autoptimize_css_include_inline filter, cfr. autoptimize_helper.php_example – some step by step words? ?? what i should do and where…?

i have w3total cache

and without this css – everything works fine – even java and html…

well, have a look at https://www.lusty.pl/wp-content/plugins/autoptimize/autoptimize_helper.php_example

in there you’ll find example code of how you can disable the aggregation of inline code:

add_filter('autoptimize_css_include_inline','my_ao_css_include_inline',10,1);
function my_ao_css_include_inline() {
        return false;
	}

you can use a plugin like code snippets to add that example code or alternatively (if you have your own child theme so your work won’t get overwritten with theme updates) to your functions.php.

hope this helps,
frank

really thank You for your time ??

ok, so i’ve installed code snippet and added there this code.:)
after enabling css – everything seemms to works fine at first sight. buy when i went into mobile … hmmm there is a big problem – it isn’t responsive.

and now google page speed test tells me that i have render blocking ao…few_numbers.css – buy when i’m trying to get critical css and paste it into AO… everything crushes again…

first of all, don’t do critical CSS just yet, that’s doing an olympic run when you have barely learned how to walk ??

regarding responsive not working; you seem to have CSS optimization active and at first sight everything looks the same as wihout AO active (just add ?ao_noptimize=1 to your URL to see your site without AO). can you describe what is wrong on mobile?

frank

i have checked at samsung galaxy 2, android – interet browser – and with ?ao_noptimize=1 everything looks ok, but without it whole menu is spreading just like at my laptop, picutres are too big, and isn’t adjusting at all to the screen…

but… at this same device – browser opera – everything looks ok… but you know few people have opera or else…

hmmm … and with CSS optimization off (and JS on) that problem does not occur?

exactly… JS on – everything works perfectly (only i had added recaptcha to exclusions:))

and with CSS on – page slows down like turtle… or even doesn’t load at all. with this code which you gave me – it works ok (speed pages – gives me a higher notes, but whole site isn’t so fast as if it is whithout CSS enabled [at my PC pages load up slower]). and this little issue occur (site looks like non-responsive, but also not perfect like at PC, text is ok, pictures are smaller, pretty messy).

regarding speed; did a test on webpagetest.org with and without AO is significant esp. with regards to “start render time” (in favor of with AO), but I can’t test with JS-only AO, so.

What I do see is that with AO CSS optimization active, your background movies (e.g. https://www.lusty.pl/wp-content/uploads/2015/05/Blooming-Magnolia.webm) load earlier, not entirely sure why though … might be better to lazy-load those (the ?

Regarding differences on mobile (and other small differences); I tested on my Galaxy Core with Chrome for Android and all looks ok for me. Could you upload some screenshots and paste the link to them here?

frank

huh… thanks to You now i know how to take screenshots at my android… ?? Here are two shoots – with AO and without.

https://lusty.pl/AO/withAO.jpg
https://lusty.pl/AO/without.jpg

This blooming-magnolia.webm always has problems with loading – it always has been loaded in weird way – i don’t know why really. it try to load, and gives an server error, and after that it loads again -and everything is fine. (i’ve noticed it at pingdom). but with or without AO it works the same.

hmmm, based on the screenshots that’s an older Android browser (so not Chrome or Chrome-based) from Android 4.x. Tests on my Android (Firefox mobile, Chrome mobile and Samsung browser which is based on an older chrome) all work fine (as does opera in your tests). so (very) hard to troubleshoot really.

what you could try it to exclude one or more CSS-file from optimization. first one to try (given the nature of the problem) would be wp-content/themes/brick/css/responsive.min.css I guess.

hope this helps,
frank

wow that’s great ! thank you – it works. it looks ok. i would leave it but – i know that not everyone have the newest chrme, android etc… so it is great help from your side to cope with it.

and… ?? i’m slightly afraid to even ask about it… how about this render blocking scripts… :))))
is there an easy way? or i should leave it?

there’s no easy way no, especially as you already had to exclude responsive.min.css …

but if you are stubborn enough you could try “inline” or “inline&defer” as described in the FAQ ??

happy to be able to mark this topic as resolved though ??

frank