Google suggests inlining the styles for the above the fold content and then loading the rest of the site’s styles after the page is finished loading. Theme Foundation themes have an experimental feature for supporting this method of style loading. There are a few different parts to this feature.
SASS
Because we use SASS to preprocess our styles, we can create a file specifically to assemble the styles that should be loaded for content above the fold. We can do this without the need to write duplicate styles. In the sass/above-the-fold.scss file, we import all the SASS partials that are needed.
Grunt
Part of the Grunt task that handles our SASS files compiles the sass/above-the-fold.scss file to the css/above-the-fold.php file. Yes, it compiles to a PHP file, and yes, that is unusual. However, this is so that we can more naturally inline the styles into the page header rather than loading it as an external file.
PHP
To activate this feature, uncomment the following line in the includes/settings.php file:
add_theme_support( 'above-the-fold-styles' );