search

gajus / usus

Webpage pre-rendering service. ⚡️
Other
805 stars 33 forks source link

Multiple viewports, mobile + non-mobile #8

Open glebm opened 7 years ago

glebm commented 7 years ago

Is there a way to call usus to obtain a single stylesheet with "critical" CSS for all possible viewport sizes, and mobile and retina options?

Motivation: We don't know the client's viewport size on the server side, so the critical CSS should include the necessary CSS for all viewport sizes.

gajus commented 7 years ago

Motivation: We don't know the client's viewport size on the server side, so the critical CSS should include the necessary CSS for all viewport sizes.

Probably the best way to do it is to call usus multiple times, extract css for different viewports, and then use a minifier.

Also, see "Bonus: rendering device specific pages" in https://medium.com/@gajus/pre-rendering-spa-for-seo-and-improved-perceived-page-loading-speed-47075aa16d24.

Making usus capture this information is possible too, just need to be careful of the feature creep.

glebm commented 7 years ago

I don't think the minifier solution is viable, because concatenating CSS may result in different selector priorities? WRT feature creep, this actually seems like the most common use case.

david-trejo-ck commented 6 years ago

Yes I want this too! @glebm waddup!

PS Usus is by far the easiest way to get CSS that's in use... tried a couple other things and none of the others worked well with just one CLI command. Well done.

Note: posting from work, which makes me feel guilty for commenting b/c I don't pay anything

PPS I'd be open to contributing to make this happen.

glebm commented 6 years ago

@david-trejo-ck Hi! I ended up using uncss https://github.com/giakki/uncss

gajus commented 6 years ago

@glebm Have you cross-checked accuracy of uncss?

I have not had much luck with uncss (https://github.com/giakki/uncss/issues/313). In addition to the problems described in the latter issue, the generated CSS does not represent the critical path, i.e. the page looks broken if loaded just with the CSS obtained from uncss.

Not saying not to use uncss. They will eventually fix it (presumably implementing the same features as usus provides via headless Chrome). Just the current (PhantomJS) implementation is broken.

glebm commented 6 years ago

uncss does not use phantomjs anymore, the current version uses jsdom. I haven't checked the coverage numbers in Chrome devtools yet, but visually looks ok

david-trejo-ck commented 6 years ago

I used uncss and it ended up working for me after I removed @font-face calls which were messing stuff up for me. It did preserve all the media queries I needed without needing to specify them myself, so that was helpful. Thanks gajus & gleb!

glebm commented 6 years ago

@font-face worked for me but I filter them out with filter-css anyway because custom fonts are not critical (even icon fonts)

david-trejo-ck commented 6 years ago

ooh nice, didn't know about filter-css, thank you!

gajus commented 6 years ago

More on the same discussion, https://github.com/gajus/usus/issues/17

I used uncss and it ended up working for me after I removed @font-face calls which were messing stuff up for me.

This gave me an idea for another feature... https://github.com/gajus/usus/issues/21