search

mmistakes / jekyll-theme-skinny-bones

A Jekyll starter with a variety of flexible layouts and components.
https://mmistakes.github.io/jekyll-theme-skinny-bones
MIT License
802 stars 907 forks source link

CSS in index.html to reduce load time #64

Open wilsonmar opened 8 years ago

wilsonmar commented 8 years ago

I ran a Google Page Speed run on https://mmistakes.github.io/skinny-bones-jekyll/ Overall very good results (88/100 on mobile and 94/100 on desktop). One suggestion Google has is to "Eliminate render-blocking JavaScript and CSS in above-the-fold content". One of the great things about Jekyll is it rearranges files. How about including the main.css (62,958 bytes) into the index.html automagically? See https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery PS - this is the approach Google AMP is requesting as well.

mmistakes commented 8 years ago

I think this is something best left up to the theme user since it can be a bit heavy handed. I do this exact thing with my personal site.

A lot of people using my themes are not devs and inlining CSS adds one more hurdle for them... as if using Jekyll, Liquid, Sass, JavaScript, etc. wasn't enough to learn.

I'm trying to treat these themes as starting points with sensible defaults. It's up the user to decide how far they want to take things as far as web perf and the like are concerned.

wilsonmar commented 8 years ago

I think that this particular enhancement is relevant to all themes ... to all sites really. Would you like me to send you a PR after I make the change and test it? I'm thinking it's a matter of moving main.css as an include rather than as a download link.