Optimizing CSS Delivery

[Josiah Katz]

We inlined a bunch of our CSS and then defer the load of our external CSS file by switching the media="defer" to media="all" on DOMContentLoaded, with some other browser fallbacks. This used to give us a passing grade, but now it's failing. What is "wrong" with this method? We tried the Google suggested requestAnimationFrame, and saw no improvements as far as our waterfalls are concerned.

http://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.webstaurantstore.com%2Frestaurant-smallwares.html

[Carlos Lizaga Anadon]

Both css and js need to be async and doesn't seem to be deferred, it's just delayed but not enough. Maybe you should work first with your deferred js so you can load that script once the page has load. Maybe Dave can throw some light there.

Regards.

[Rick Steinwand]

I found this tool helpful for creating "above the fold" css: http://jonassebastianohlsson.com/criticalpathcssgenerator/

You'll still need to compare that with your original css to create the external css you need to load at the by the </body> tag.

[Miguel García Sánchez - Colomer]

WoW... testing it Rick!, thank you for sharing.

2014-08-05 15:46 GMT+02:00 Rick Steinwand <rickst...@gmail.com>:

I found this tool helpful for creating "above the fold" css: http://jonassebastianohlsson.com/criticalpathcssgenerator/

You'll still need to compare that with your original css to create the external css you need to load at the by the </body> tag.

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/d6629d63-d2d8-4203-b5e8-d2ad577a65ce%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Rick Steinwand]

I was excited to find it too.

I use Beyond Compare to compare the original with the above-the-fold css. (They have a 30 day trial.) You'll have to tweak it to add content from other pages, depending on what's above the fold on each page. 

I didn't have good luck with the async loader shown on the Insight page, but this one works for me for both css and js: https://github.com/n0mad01/asyncLoader

Meanwhile I'm still tweaking.

[Carlos Lizaga Anadon]

Great resource Rick, you just gave us a powerful tool!

/cheers 

Regards.

[Carlos Lizaga Anadon]

Oh, just as tip, you can compare those two CSS files by compressing them as one selector per line and then sort it alphabetically in a spreadsheet.

That way you will be able to compare those CSS files and discard rules and or selectors easily.

Best regards.

[Carlos Lizaga Anadon]

Sorry for the escalated reply, I also noticed that moving your <link rel="stylesheet"/> just after the </html> works just fine if you've set an inline <style> node with all the critical CSS in the header.

By the way, Dave, Rick, https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery this help resource makes no sense in the Spanish translation as it literally says:

"Ten cuidado al insertar URIs de datos en los archivos CSS. Aunque usar selectivamente URIs de datos de tamaño pequeño en el código CSS puede tener sentido, si insertas URIs de tamaño grande, podría aumentar el tamaño del código CSS de la mitad superior de la página, lo que ralentizaría la carga."

Which actually means something like "Beware of using data URIs in CSS Files. In despite of using in a selective way data URIs of small size in the CSS code might make sense, if you insert big size URIs, it might increase the size of the CSS code of the mid-upper page, which would mean a slower load".

That's why essentially this rule is a bit troublemaker por spanish people.

Regards.