Couple questions about CSS minification

Evening @danescobar ??

It makes Jetpack’s mobile menu disappear which makes Google Pagespeed give an error for the mobile tab score.

I just had a look, you seem to have CSS optimization active and I can see the mobile menu? Can’t you?

Although the website loads in mobile, Pagespeed said there were errors fetching the page.

No idea what’s happening there I’m afraid.

When interacting with shortcodes ultimate plugin it adds several line breaks after any image gallery shortcode, also wrongly resizes the images, etc.

Can you provide me with a URL of a specific page where I could see this happening?

Also, in some guides, I’ve seen that people recommend to delete js/jquery/jquery.js from the exclusion list to increase loading performance

You can try, but it is excluded by default because a lot of themes/ plugins require it to be available early.

Lastly I wanted to ask you if you know of a guide to correct “flashes of un-styled content (FoUCs)” that I started to get after applying css minification.

have a look at this video, it’s a good start ??

I just had a look, you seem to have CSS optimization active and I can see the mobile menu? Can’t you?

Unfortunately no I can’t, I tried both browsing from my smartphone and using desktop Chromium and activating agent “Chrome mobile” in “other tools > network conditions”.

In both cases the Jetpack mobile menu didn’t appear. What I get is a flash of unstyled links the menu has but when the page finishes rendering the dropdown menu doesn’t appear in the upper left corner.

Also the GooglePS error is directly related with CSS minification because when I deactivate it Google can fetch the mobile version again. Hope I can solve this because not solving it means being unable to minify css on my website. I will check different options like inlining all css if the problem persists.

When interacting with shortcodes ultimate plugin it adds several line breaks after any image gallery shortcode, also wrongly resizes the images, etc.

This happens randomly at the homepage linked in the first post. I’ve searched more thoroughly here and finally found a solution for this and thankfully also to the “flash of unstyled content”. Disabling “Aggregate inline CSS” solved both problems apparently. Hope disabling it won’t impact the pagespeed much.

<<In some guides, I’ve seen that people recommend to delete js/jquery/jquery.js from the exclusion list to increase loading performance>>
You can try, but it is excluded by default because a lot of themes/ plugins require it to be available early.

I’m currently using a child Twenty Seventeen theme. Checking right now. Also thanks for the video. That’s the one I’ve followed to configure above the fold properly.

weird, just tried in Chromium with small screen (developer tools -> samsung galaxy s5) and I do see you menu. maybe also due to inline CSS not being aggregated?

i did see jQuery is not defined errors, so it looks as though you’ll have to keep on excluding js/jquery/jquery.js after all ..

Thanks a lot for your patience Frank,

Changing some options I managed to get Google pagespeed fetch the mobile version and it shows some insight on why the menu disappear. This image explains how it is html response related.

Also here is a screenshot of Chromium using Chrome/Android as user agent. As you see the menu doesn’t appear in the upper left corner in my case.

Deleting jquery broke my theme completely lol. Most of my images didn’t load after that. Internet is full of bad advice it seems ??

Also the FoUC seems more pervasive than I thought. It still appear on other pages of my website. But now that issue has very low priority compared with the others. Pity that WPFASTER solved this issue in a lecture/video (lecture 33 I think) not uploaded yet to his Youtube channel.

Thanks again for all your help. Being such a newbie I’ve been three days at this only to achieve 61 score on mobile and 84 on desktop and on top of that my hosting provider tells me that they don’t offer http/2. I feel like my head is about to explode haha.

The FOUC is probably because of the “above the fold CSS”, which should be sufficient to render the page immediately, so that might need tweaking so it applies to all pages?

I feel like my head is about to explode haha.

yeah, performance optimization can be like that. stay strong ??

Some news, a contributor in Jetpack contacted with a possible culprit on the menu issue. He suspects some plugin that produces overlays offsets the entire theme. The menu appears but outside screen boundaries.

I’m testing this and encountered no errors. Perhaps is the custom CSS I have on my website that modifies a newsletter subscription popup and website’s wrap. The only thing that I could confirm is that it only happens when I activate CSS minification in AO. If I manage to solve the issue with them I’ll update here and mark the issue as solved.

EDIT: the problem seems to be in the above the fold code. When I use “Inline all content” there’s no theme offsetting. As per instructions I introduced all the code from the minified css file produced by AO when doing the above the fold part. Maybe a CriticalCSS.com bug?

• This reply was modified 7 years ago by danescobar.

yeah, I can confirm sometimes generated critical css needs some tweaking. how’s that exploding head of yours? ??

Better after disconnecting a bit, I like the challenge and the learning process is rewarding. I’m currently following this guide, optimizing plugins and trying to fix gtmetrix issues, mainly DNS lookups, query strings, browser caching, minimizing request size and combining external js.

Once all that is solved I will rebuild above the fold and see if the issue is fixed and if all the effort actually improved pagespeed scores ??

And thanks for your amazing support.

Hi,

As promised, after tinkering for a bit with AO here’s what I’ve seen. I can confirm that criticalcss tool doesn’t indentify critical css correctly.

Maybe the tool doesn’t identify Jetpack mobile menu css as critical and that produces the theme offsetting Jetpack guys mentioned before. I’ve searched for a couple of tools that may improve on criticalcss, automating the process more but their implementation is way over my skills. Maybe integrate them with AO somehow in a future update?

Also I’ve noticed that sometimes AO doesn’t minify all css content in a single .css file (not counting the exceptions in options) and needs reactivation. Also when inline all content is active the css code appears in the head but not inlined so I have to use an online minifier. Also it doesn’t include all content that should be included. For example, it doesn’t include the css code of Sassy Social Icons which appear in its own <style> tag.

These last observations aren’t 100% accurate as my knowledge of coding and css is only of a beginner so take them with a grain of salt. Despite them, Pagespeed scores improve and issues about minification of js and css improve, so it seems to be doing its job.

For now I’ve deactivated above the fold, because of the theme offsetting and FoUC and inline all content. Hope my observations help a bit to improve this great plugin. See you Frank.

Maybe the tool doesn’t identify Jetpack mobile menu css as critical and that produces the theme offsetting Jetpack guys mentioned before.

use the contact-/ suggestions-link on the top of the page to contact Jonas and explain the problem, if this indeed is a bug in criticalcss.com I’m sure he’ll be happy to fix it ??

I’ve noticed that sometimes AO doesn’t minify all css content in a single .css file

it indeed is possible that autoptimize produces several CSS-files, because it honours the media-attributes (“screen”, “all”, “print”, …) of the CSS

and needs reactivation

that I don’t understand, can you explain some more?

Also when inline all content is active the css code appears in the head but not inlined so I have to use an online minifier.

when “also aggregate inline CSS” is not active, then indeed the inline CSS is not optimized (but I’m not sure that is what you are referring to).

Also it doesn’t include all content that should be included. For example, it doesn’t include the css code of Sassy Social Icons which appear in its own <style> tag.

just had a look, the sassy CSS is aggregated now I think?

Hello Frank,

I’ll notify Jonas explaining the issue. I’m not sure about the part about minification and reactivation so take it with a grain of salt.

My observations are that sometimes the plugin minifies the code, deletes all line breaks, empty paragraphs, etc. With no changes in plugins, upon reactivation sometimes it’s not doing it with my webpage css code. Although is hard to keep track with all the things I’ve done to my website tbh (Although I keep a changes log it is not so minute as to keep track of code changes).

Only moves it to the head and some code is minified and other is not. Shouldn’t AO also minify all css when “optimize css code” is activated? Is this because of what you explain in your readme: “the priority of inline CSS gets lost”?

Thanks for your patience, I’m learning this semi-advanced stuff little by little ??

Shouldn’t AO also minify all css when “optimize css code” is activated?

yes, one should see all CSS minified, but there are exceptions;

1. the fact of the matter is that AO, to lessen the load on the server, makes assumptions, most important one (in this context) being that if a file ends in min.js or min.css that it is minified already, in which case these are not re-minified. so if you have whatever.min.css but the file isn’t *really* minified, then you will end up with un-minified code in your autoptimized CSS.
2. AO tries to make sure that, in case the JS or CSS minifier fail and return nothing (this is exceptional, but it can happen), your JS or CSS is not lost by using the unminified one as “backup”.
3. lastly AO also does not remove “important comments”, which generally contain licensing information. there’s a sticky post in the autoptimize support forum that explains how you can have those removed as well.

hope this clarifies,
frank

Hi Frank, thanks a lot for the clarification.

I have some news on the menu issue. I’ve contacted Jonas Ohlsson and he discovered where is the problem. It seems to be because of clumsy development by Automattic.

Twenty Seventeen is not a responsive theme. Although Automattic said it was, at the beginning, it presented many problems when browsing from mobile devices. For this reason I used Jetpack mobile theme which should interact with this theme in a responsive way since both are developed by Automattic. It doesn’t. What Jetpack does is present a different HTML code than Twenty Seventeen instead of managing user agent changes with CSS exclusively.

This is what is causing the theme offsetting and the disappearance of the menu as Jonas’ css generator is not prepared to handle that. It is really clumsy design since, as he says, is not really common practice in the web anymore.

One solution would be to specify both dimensions and a different user agent to generate different critical css files for mobile and desktop and then merge in AO. But Jonas says it would require a low level library.

This is making me lose trust in Automattic and thinking about changing to a well developed responsive theme and deactivate Jetpack mobile theme. And I chose Twenty Sev. because I thought would be the best developed and most compatible theme for WordPress ??

Thanks for all the support. Finally, thanks to you and Jonas I could pinpoint the culprit.

I see. Well, as far as theme’s go I’m currently enjoying Astra (see the “optimize more”-tab in Autoptimize settings). It has a free basic version on www.ads-software.com/themes and there are some (very) nice premium plugins available for it if you want to take it further.

I’ll check Astra right now. If Jetpack support can’t provide a solution for this I’ll change and reconfigure a child theme. Hope I won’t produce more problems than what I want to solve. My current theme as quite a number of custom CSS lines and other customizations that will take time to adapt to a new theme ^_^;