Issues with prioritize_critical_css

[Hemant Nandrajog]

Hello, 

I am having weird issue with prioritize_critical_css filter and chrome browser 

Example if you check this page in chrome 

http://mastposters.com/shriya-saran

then on the bottom it displays all the html which is supposed to be in noscript tags (It happens only with Chrome browser) 

And if I disable prioritize_critical_css with url 

http://mastposters.com/shriya-saran/?ModPagespeedFilters=-prioritize_critical_css

the page is clean at footer 

Attached the screenshot of html 

Thanks

Hemant

[Jud Porter]

Thanks for the report Hemant, I see and am able to reproduce the issue.

It looks like the problem is occurring because of some behavior in the script

http://mastposters.com/blogbase/wp-content/cache/minify/000000/4085c/default.include-footer.18a337.js

A quick background on how this filter works. Once it has determined the subset of critical CSS, it will stick just those rules at the top of the HTML and lazyload the full CSS at the bottom for safety. The lazyload works by inserting a noscript tag with a class attribute of "psa_add_styles" at the bottom of the document, and then runs some JS to move the text of that noscript block to a div that it creates.

Somehow, when that default.include-footer.js script runs it modifies the text in the noscript tag. It looks like it is escaping or URL encoding it. Then, when the CSS lazyload js runs, instead of the text in the noscript being interpreted as CSS rules, it's being interpreted as plain text and therefore being displayed at the bottom of the page, as you observed.

I'm not sure what that script is doing, or why it's modifying the noscript tag that we depend on since it's a large minified JS, but that does seem to be the culprit.

Thanks,

Jud

[Hemant Nandrajog]

Hello Jud, 

The java script is just the compiled version of jquery and its sub component. 

I will check if its causing that div/noscript tag to change. 

But the issue is the problem happens only in chrome and not in Firefox

Also wont it be better to have noscript tag with style information in the head of the document rather than footer (the browsers with js enabled will anyway not process it) 

even when checking with google page speed insights it suggests to move the css style to head 

Thanks

Hemant

[Jud Porter]

Do you know what other plugins or components are included with jquery in that script? I'm unable to reproduce by just including jquery. To help debug, I've attached a test case with that script that reproduces the issue. If you remove the script tag for default.include-footer.js you'll see that the contents of the noscript tag don't get displayed as text. You are correct that it only seems to happen with chrome, does that script have some user-agent specific logic in it?

You are correct that the general advice is to put CSS styles in the head. This is also part of the reason that CSS is problematic for performance though because it blocks other assets from downloading, and many sites include lots of unnecessary CSS rules. The way this filter works is that it tries to detect and insert into the head only the CSS rules that actually apply on the page. It can be risky to remove CSS rules though, so for extra safety we insert the full set of CSS into that noscript block at the bottom of the page. These CSS rules will only be loaded after the onload event, instead of blocking onload like other CSS rules will. In this way, the page still gets styled with the full CSS, but only the most critical rules are inserted into the head. For more detail on this check out this presentation by Ilya Grigorik on web performance and critical path rendering for mobile devices http://bit.ly/mobilecrp

[Hemant Nandrajog]

Hello Jud, 

The minified JS had modernizr (http://modernizr.com/) script to along with jquery and few functions based on jQuery 

and seems like culprit was modernizr disabling that removed the issue from chrome (still wonder why it was only with chrome though)

If you are interested in content of modernizer http://mastposters.com/blogbase/wp-content/themes/gridiculous/js/modernizr.min.js?ver=2.5.3

(the comment section on top shows components it was downloaded with) 

On the css in head part don't browsers which support JS ignore any content within noscript tags?

and thanks for sharing the presentation.

Thanks

Hemant

[Jud Porter]

Ah, that is strange. Good job tracking down modernizr as the culprit.

FWIW, it looks like the newest versions of modernizr don't have this issue. If I use http://modernizr.com/downloads/modernizr-2.6.2.js it looks fine, where if I use http://modernizr.com/downloads/modernizr-2.5.3.js I see the issue.

You're right that browsers will ignore the noscript tag. We also append JS that after onload will take the contents of that noscript and insert it into a new div, thereby loading the full CSS but only after onload.

[Hemant Nandrajog]

Understood the point about noscript and div conversion on load, will it be possible to have that as a separate filter so that user can control whether to load the whole css or not. I mean after testing for a month say my site does not has problem with just the prioritized css then it will make my site much more faster and smaller in long term 

Thanks for letting me know about the new modernizr version. 

Thanks

Hemant