Learning material for professionals eager to explore the science behind building a successful online product

#ASKTHEINDUSTRY 19: How do you handle above-the-fold CSS?

There are two ways that I know of:

  • You use a tool like CriticalCSS to find and inline the styles you need for the visible above the fold content
  • You manually author CSS with the above the fold idea in mind

I choose the second option, but it may not be the best. You tell me.

Here is what I do:

  • I author my CSS using SASS
  • I split my SASS partials by component
  • I transpile two SASS files per page, for example: home.core.sass and home.later.sass
  • In home.core.sass I @import only those components that I figure should be rendered immediately
  • In home.later.sass I @import all the rest

Now. Here comes the easy part:

  • Embed home.core.css in a style tag in the head of the document. I usually use jade (or, recently, dust) for this. In jade you can

      include /static/styles/home.core.css
  • Asynchronously load in home.later.css. I strongly advise you use loadCSS by the Filament Group for this.

Aaaand there you have it! Sweet, easy and fast! Just the way we like it.

I read each and every comment, and look forward to see what you think! Also, this piece is part of the #ASKTHEINDUSTRY project, which is a distributed interview to the web industry: you ask, I’ll answer, or find someone who can! Drop a comment if there is anything I can help you with!

Care to leave a comment? Drop down a line on the Twitters