Prioritize critical css testing

[Hemant Nandrajog]

Hello, 

How does prioritize_critical_css actually works?

I am trying 

http://mastposters.com/avril-lavigne/?ModPagespeedFilters=combine_css

and then 

http://mastposters.com/avril-lavigne/?ModPagespeedFilters=combine_css,prioritize_critical_css

But no change in the css output as such 

On top of that its rewrite_css stops working when prioritize_critical_css is enabled 

http://mastposters.com/avril-lavigne/?ModPagespeedFilters=combine_css,rewrite_css

outputs rewritten css but 

http://mastposters.com/avril-lavigne/?ModPagespeedFilters=combine_css,rewrite_css,prioritize_critical_css

does not 

Thanks

Hemant

[Hemant Nandrajog]

I am not sure if this is normal but prioritize_critical_css is inlining the whole stylesheet file

[Anthony George]

From my conversations with a Google employee:

"Basically, we will first instrument the page with javascript and check to see which CSS rules actually apply to elements on the page (this is the critical CSS). This is what gets sent back to /mod_pagespeed_beacon. After we've collected this data, on future visits to the page we will inline just the critical CSS rules, and then stick some JS at the bottom to lazyload the complete CSS at onload.

So on you should see a few style tags at the bottom of the head with just the css we've identified as critical, a noscript tag with the complete css set, and a small javascript snippet"

[Jud Porter]

Hi Hemant,

Thanks Anthony for digging up that snippet. Also take a look at http://modpagespeed.com/filter-prioritize-critical-css.html, which should provide some more details on the function of this filter.

Also note that prioritize_critical_css currently doesn't get enabled when combine_css is turned on. We're aware of and tracking down this issue (https://code.google.com/p/modpagespeed/issues/detail?id=669), although we should also add an note in the instructions while we're fixing this.

Checking out http://mastposters.com/avril-lavigne/?ModPagespeedFilters=rewrite_css,prioritize_critical_css it looks like the feature is working as expected. You should see a large block of CSS inlined in the head, and a noscript tag at the bottom that will lazyload the rest of the CSS. The inlined CSS at the top is just the set CSS rules that actually apply to DOM elements on the page, stripping CSS rules with selectors that didn't match anything. The idea with this filter is that the page can render more quickly because only the subset of CSS needed to render is sent, and no external requests are required.

Keep us posted if you see anything else strange or unexpected.

[Hemant Nandrajog]

For test results to make more sense have removed advertising from the page 

Enabled default filters 

         ModPagespeedRewriteLevel PassThrough
       
        #cache
        ModPagespeedEnableFilters extend_cache
        
        #minify
        ModPagespeedEnableFilters combine_css,rewrite_css
        ModPagespeedEnableFilters fallback_rewrite_css_urls
        ModPagespeedEnableFilters rewrite_style_attributes
        ModPagespeedEnableFilters move_css_above_scripts
        ModPagespeedEnableFilters rewrite_javascript
        ModPagespeedEnableFilters combine_javascript
        ModPagespeedEnableFilters collapse_whitespace
        ModPagespeedEnableFilters elide_attributes
        ModPagespeedEnableFilters remove_comments
        ModPagespeedRetainComment "google_ad_section*"
        ModPagespeedEnableFilters remove_quotes
        
        #javascript optimization
        ModPagespeedEnableFilters make_google_analytics_async
        ModPagespeedEnableFilters defer_javascript
        
        #Image optimization
        ModPagespeedEnableFilters rewrite_images
        ModPagespeedEnableFilters inline_images
        ModPagespeedEnableFilters recompress_images
        ModPagespeedEnableFilters sprite_images
        #ModPagespeedEnableFilters recompress_jpeg
        #ModPagespeedEnableFilters recompress_png
        #ModPagespeedEnableFilters recompress_webp
        ModPagespeedEnableFilters resize_images
        ModPagespeedEnableFilters insert_image_dimensions
        
        #Optimization
        ModPagespeedEnableFilters insert_dns_prefetch
        
        #beta testing
        ModPagespeedLazyloadImagesAfterOnload on
        ModPagespeedCriticalImagesBeaconEnabled true
        #ModPagespeedEnableFilters lazyload_images
        #ModPagespeedEnableFilters inline_preview_images
        #ModPagespeedEnableFilters resize_mobile_images
        #ModPagespeedEnableFilters prioritize_critical_css
        <Location /mod_pagespeed_beacon>
            <IfModule mod_rewrite.c>
                RewriteEngine Off
            </IfModule>
            SetHandler mod_pagespeed_beacon
        </Location>

With above settings 

Have tested the following urls 

Default -> mastposters.com/avril-lavigne/

Prioritizing CSS -> mastposters.com/avril-lavigne/?ModPagespeedFilters=-combine_css,+prioritize_critical_css

Using http://www.webpagetest.org

For default 

http://www.webpagetest.org/result/130414_T9_8VQ/

				Document Complete			Fully Loaded
	Load Time	First Byte	Start Render	Speed Index	Time	Requests	Bytes In	Time	Requests	Bytes In
First View	4.067s	0.628s	0.978s	1857	4.067s	82	793 KB	5.842s	82	863 KB
Repeat View	2.797s	0.491s	0.792s	1670	2.797s	23	375 KB	2.841s	23	376 KB

For Prioritized CSS

http://www.webpagetest.org/result/130414_91_8W7/

				Document Complete			Fully Loaded
	Load Time	First Byte	Start Render	Speed Index	Time	Requests	Bytes In	Time	Requests	Bytes In
First View	3.170s	0.393s	0.717s	1490	3.170s	66	786 KB	3.235s	66	786 KB
Repeat View	2.491s	0.460s	0.689s	760	2.491s	15	98 KB	2.876s	18	103 KB

The above result does show decrease in number of requests for first view and repeat views and improvement in rendering time

[Hemant Nandrajog]

Testing with another tool 

http://gtmetrix.com/compare/kvXKgna4/eBbbl02b

-4 requests and -0.25s loading time 

Thanks

[Hemant Nandrajog]

I was trying this filter on my other site which is not in wordpress 

and somehow am not able to make this work 

http://bollywoodfans.in/songs?ModPagespeedFilters=-combine_css,+prioritize_critical_css

Any pointers to where the start debug will be helpful

Thanks

Hemant

[Jud Porter]

Hi Hemant,

It looks like this is working now that you've updated to the latest beta release. Our CSS parser is having trouble with http://bollywoodfans.in/public/style_css/css_13/ipb_styles.css?ipbv=f97b0e1742c84363fd64a07164aafa6e, which previously caused prioritize_critical_css to abort. The latest release is now more robust to parser errors, but you might want to see if you can get that css file to parse, since you'll get better results that way.

Running that file through our CSS parser (see https://developers.google.com/speed/docs/mod_pagespeed/build_from_source#debug-css for details on how to do this) gives the following:

$ ./out/Release/css_minify_main ~/ipb_styles.css > /dev/null

CSS parsing error mask 256

CSS unparseable sections mask 18566

Cannot parse unknown @-statement: font-face at byte 10 "...@font-face{font-family:'Handle..."

Ignoring {} block. at byte 10 "...@font-face{font-family:'Handle..."

Ignoring chars in value. at byte 22 "...ont-face{font-family:'Handlee';font-styl..."

Ignoring chars in value. at byte 43 "...'Handlee';font-style:normal;font-weight:..."

Ignoring chars in value. at byte 62 "...e:normal;font-weight:400;src:local('Hand..."

Ignoring chars in value. at byte 70 "...;font-weight:400;src:local('Handlee Regu..."

Ignoring chars in value. at byte 95 "...l('Handlee Regular'), local('Handlee-Reg..."

Ignoring chars in value. at byte 121 "...l('Handlee-Regular'), url(http://themes...."

Ignoring chars in value. at byte 4908 "...et 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0..."

Failed to parse values for property -moz-box-shadow at byte 4909 "...t 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,..."

Ignoring chars in value. at byte 4980 "...et 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0..."

Failed to parse values for property -webkit-box-shadow at byte 4981 "...t 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,..."

Ignoring chars in value. at byte 5044 "...et 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0..."

Failed to parse values for property box-shadow at byte 5045 "...t 0 1px 0 0 #5c5c5c, 0px 2px 3px rgba(0,..."

Ignoring chars in value. at byte 5237 "...et 0 1px 0 0 #eff3f8, 0px 2px 3px rgba(0..."

Failed to parse values for property -moz-box-shadow at byte 5238 "...t 0 1px 0 0 #eff3f8, 0px 2px 3px rgba(0,..."

[Shawn Ligocki]

Note: The root problem here (in your CSS) is the end:

#about_me img{max-width:100%}max-height: 50px;overflow:hidden}#postShareStrip .fb-like{height:20px;overflow:hidden;

Your braces are totally unbalanced and wonky. Fix that up and this should parse.

[Hemant Nandrajog]

Shawn, Jud,

Thanks for pointing out those errors 

I check with http://bollywoodfans.in/songs?ModPagespeedFilters=+prioritize_critical_css

and prioritize css is adding the style inline but its also adding quite a few empty style tags ?

<style media="screen"></style>

Thanks

[Matt Atterbury]

Hi,

Those are actually the original links replaced with just the CSS used by this page, which in this case is nothing, so you can remove the links entirely from this page (assuming prioritize_critical_css is getting this right of course :-).

I agree however that inserting them empty is odd and we should just remove them entirely instead.

m.

--
"Klaatu barada nikto"                          (754) 444-6288

[Hemant Nandrajog]

I think preferable method will be pagespeed not inserting those empty styles. 

The reason is that there are many web applications (like IPB which I am using) which have template system and separate css files for various modules and the styles for each module are inserted individually or clubbed together on almost all pages (I know its not efficient way but most apps do that), that's much more need of having systems like pagespeed with prioritized css :)

Thanks

[Matt Atterbury]

We have a fix for this and it will be in the next release. Thanks for reporting it!