search

rubynz / kiwi-ruby-2017

The conference website for Kiwi Ruby 2017
https://2017-kiwi.ruby.nz
MIT License
2 stars 2 forks source link

Inline the CSS #59

Closed ndorfin closed 7 years ago

ndorfin commented 7 years ago

This PR pulls the main CSS file into the <head> after Webpack is done with it. This will improve the rendering performance of the site for first time visitors.

We could look at only doing this for the homepage, but for now the HTML is below 14KB (the critical size for one round-trip).

mermop commented 7 years ago

The home page is coming up as 36kb for me, compared to 20kb on master, and taking 200ms longer to load locally - doesn't seem like a win, and it would get progressively slower if the CSS gets bigger (as it tends to).

This also means that a second page view would not benefit from caching the styles - it would need to load them all again on every page. I don't think the CSS is set up in a way that this makes sense.

Usually the suggestion is to inline critical styles, not all styles. Do you have any reading arguing otherwise?

ndorfin commented 7 years ago

You're right, we should load the critical CSS. My reasoning was as such: When the HTML is gzipped, the total payload is under 14KB, which means all HTTP1.1 browsers should be able to download the HTML and CSS in one round trip, which is a round-trip faster than having separate CSS.

We should break the CSS up into modules, but I'm scared to touch the CSS after previous attempts.

Running it locally could be giving poor metrics since there's no round-trip to contend with.

What we could do as a compromise is inline the CSS just for the homepage, and then every other page gets a normal stylesheet <link> element to work with. We could get the homepage to download the stylesheet post-load so that the next page view is faster. Waddayathink? 😀

mermop commented 7 years ago

That sounds fine - the homepage is by far the most common landing page

mermop commented 7 years ago

I've put in a preload for the CSS on the home page to speed up subsequent requests - it's not super well supported but nothing bad happens in browsers that don't support it https://caniuse.com/#search=preload