mozilla / donate.mozilla.org

Mozilla donation platform
https://donate.mozilla.org
Mozilla Public License 2.0
62 stars 47 forks source link

Optimize css for above the fold #496

Open ScottDowne opened 9 years ago

ScottDowne commented 9 years ago

What this means is css that isn't used in our initial display, can be loaded later and not block the page.

CSS that is required for the initial page, we should load inline(or something else, require?) as blocking.

I'm guessing that any components or css that's use in the page we link to in the snippet is considered above the fold, the rest we can load later.

ScottDowne commented 9 years ago

From the technical point of view, this might be quite easy.

We already want to chop up our css as a set of component based less files.

Then, we have two less files, one is above the fold, which we require in, one is below, which we link to.

These files would just be importing the components as they need them. So header.less, footer.less, the main page, and any component less files needed for page 1 of seq could be in above the fold.less, the rest in below.