search

y7kim / agency-jekyll-theme

Agency Theme for Jekyll
Apache License 2.0
869 stars 2.02k forks source link

above the fold non-blocking css #18

Closed zbeekman closed 7 years ago

zbeekman commented 8 years ago

Hi, Do you have any tips on the best way to extract above the fold css so that it can be inlined? I've been hacking on your template quite a bit for my personal website (WIP) and was trying to get my google page speed test improved. However, between the janky, partial bootstrap.css yoinked from bootswatch and the lengthy agency.css file, it's quite challenging to follow the css style cascade. Do you have any tips? Eventually I think it would be nice to extract the critical css styles into their own critical.css file which could be included via liquid in head.html (between <style> tags) and also in the main style.css which could then use and asynchronous deferred load

y7kim commented 8 years ago

Hey zbeekman,

I am afraid that I'm not so up to speed with above-the-fold techniques, though now you have me intrigued. I doubt I could provide any insight on manually identifying above-the-fold CSS but these tools look like they could help:

http://addyosmani.com/blog/detecting-critical-above-the-fold-css-with-paul-kinlan-video/ https://github.com/addyosmani/critical

Have you tried either of these?

zbeekman commented 8 years ago

Strange, in my email notification, there was a link to uncss too, but I don't see it in your post.

I tried using critical, but it extracts a ton of stuff. I'm intrigued by uncss, especially if it can handle media queries well. I had tried a different tool (I don't remember which) that failed epically with the media queries. Using critical ends up actually including a lot of stuff and I think that some of order of precedence gets changed with critical resulting in some odd rendering problems.

I also came across this post which uses jekyll's built-in sass functionality to merge and minify all the css, and then simply jam it all into the <head><style> section. I like that this dispenses with the asynchronous javascript styling. The only problem is that the browser needs to read through the entire sites style sheet before it can start painting, if I understand correctly, so the site's css needs to be relatively small.

I think this latter approach might be feasible using jekyll's built-in sass capabilities. If my very limited understanding of sass is correct, then .css files should be valid scss files, no? So I think I have a decent handle on how to proceed.

The last performance issue that needs addressing is the google-fonts css url requests. The most ideal solution would be for me to find open web fonts and serve them directly.

zbeekman commented 8 years ago

scratch that, uncss is the tool I tried to use that didn't seem to work at all...