Issues I can’t get round

hey Dave:-)

If you want a rule for which no critical CSS is to be injected, you can add none in the critical CSS field. if you leave the field empty, this is considered a “to be submitted” request for automatic critical CSS creation.

That being said, the issues you describe _should_ be fixable by some (advanced) configuration. If you can re-enable the plugin I’ll have a look to see how ??

have a nice Sunday!

Hi!

Thanks for your response

I have successfully got none to work for random posts and pages, but not on the homepage. I have added rules for is_front_page none and is_home none, but the only way I have managed to get it not to update is to add path / none. Unfortunately, that has stopped the critical css being applied to any page!

I will remove the path / none rule now, so that you can see the effects. I’ll probably have to take it off again within the hour though, if I have to do that, I’ll update you when I’m back at my computer and have let the plugin run again.

Have a nice Sunday too!

Very oddly, I have removed all three of the rules I mentioned above but the critical css still isn’t being applied. New code is being generated on criticalcss.com, with the API symbol present, but when I look at the pages, they are loading as normal.

It seems as soon as I pressed enter on that comment, some magical cache was cleared somewhere and now it definitely is being applied

this is what I see on the homepage, not sure what I should be looking for though, can you tell me what is wrong?

regarding none-rules (apparently I hadn’t properly read your original post); so these do get updated for the front-page and that way do result in critical CSS after all?

I’m getting the instagram block at the bottom messed up, I tried to add a screenshot, but I wasn’t able to find how to do that. If you clear browser cache and try again does it still look normal?

Yes, the rules for front-page seem to get overridden. I have taken all of those rules out at the moment

We’re just going out, so I have to turn it off again for a bit. I’ll add another message when we get back and turn it on again.

Thanks for your help!

I’ve been able to reproduce a messed up instagram block once, but as soon as I scrolled it got repainted correctly (it seems JS based and the size of the images is set by JS and scrolling seems to re-trigger this mechanism). what might be worth investigating is excluding that JS from AO JS optimization?

I’m not sure what JS I could exclude for that block. It links up to a 3rd party website to get the images. There’s nothing I can see in the source code with .js in it, or any internal folder that seems to manage it. I’m sure this is because I’m not very good at looking for these things…

The other places things are going wrong are in sliders. There is a slider with photos in it on the homepage, just right of where it says “The Story of South East Asia Backpacker Magazine!”. This also tends to get messed up when critical css is running. Then there are the product sliders as described in my first post on this thread with the example of the bali page. These sliders are created using the theme’s own shortcode.

The image block on products themselves also gets messed up, but I have currently disabled critical css on all product pages using a wildcard on a rule (as far as I can tell, this is working OK).

I’m going to turn critical css back on now and see if I can get anywhere.
I’m

It turns out my wildcard didn’t work. Worryingly, all the rules I’d set before have disappeared. I’d set /basket/ none, for instance, but now the rule has gone from the list and has appeared again in the work queue.

I’m turning it off again for now. Please, let me know if there’s a good time to turn it on again for you to have a look at it.

might be better to work on a staging site to get this sorted out, do you have one Dave?

I haven’t at the moment, but I’ve just contacted my host to ask them to set one up on a subdomain for me. I’m just waiting to hear back from them.

Normally I would have maintenance mode running on a staging site. This won’t be possible in this case, right? Otherwise, citicalcss won’t be able to access what it needs to. Or could there be some way around that? If not, I’m guessing I should add noindex to robots.txt, and then everything will be OK anyway…

Also, do I need to contact CriticalCSS directly to ask for them to set up the subdomain API (I’m guessing they’ll let me do that for free if it’s only for a few days, for testing reasons)? Or are you one and the same?

Thanks again for your help!

-> criticalcss indeed needs access, but if your maintenance plugin allows to whitelist IP’s we could to that?
-> subdomain + robots.txt should work. additionally you could maybe find some plugin to add “canonical” meta-tags pointing to your main site “just in case”?
-> criticalcss & optimizingmatters are not one and the same, but feel free to contact Jonas with me in CC, I will confirm Jonas we’re troubleshooting here (he’ll be happy to assist I’m sure).

frank

Hi Frank,

Thanks as always for your help. I’m hoping the staging site will be up and running later today. I will check out the maintenance plugin’s options and use the whitelist function if it has one. Otherwise, your other suggestion sounds very robust.

I’ve written to Jonas just now.

Hopefully everything will be set up soon

Thanks again!

Hi Frank,

OK, I’ve got the staging site running criticalcss. The list is still growing, but there’s plenty that’s turned up already. Here’s a list of issues I’ve come across so far…

Homepage – dev.southeastasiabackpacker.com – Photo slider to the right of “The Story of South East Asia Backpacker Magazine!” not working properly, big white space underneath. Instagram feed at the bottom not working properly, another big white space underneath.

Product sliders on multiple pages – messed up + big white space. See example on https://dev.southeastasiabackpacker.com/activities/scuba-diving/ – find “Discover Scuba Diving – Latest Offers…”

Post sliders on multiple pages – same problem – see example below the pin image (scroll down) on – https://dev.southeastasiabackpacker.com/destinations/cambodia/#ftoc-heading-16

It’s worth noting that I cannot successfully check the Optimise JavaScript Code? box in AO without a lot of errors appearing these days. When it’s checked, the ?ao_noptimize=1 command doesn’t work. On the live site I have WP Rocket optimizing JS instead. I have searched for the code that shows in the error message on the staging site (AO JS optimization enabled) with the ?nocache version on the live site. The errors seem to relate to scripts that are already in the AO exclude JS scripts list. The errors appear whether I clear the contents of that list, or not.

It’s very strange…