Blogestudio

Pau Iglesias

Improve user experience by having your above-the-fold (top of the page) CSS styles in-page.
Even if the rest of the CSS files take a seconds to load, these specific CSS styles displayed from the head section ensure a quick rendering of your page and better score in testing systems like Google Page Speed Insights.
But you do not need to maintain two separate stylesheets, just select specific fragments of your theme style file with a special markup to create an above-the-fold styles joining the CSS fragments in the head section.
This plugin enables a special open and close tags that you can insert editing your style.css theme file to surround pieces of code:
[css-above-the-fold]
… Your theme CSS code fragment …
[/css-above-the-fold]
But this syntax is not an standard CSS, so you need to include this tags between CSS comments, there are two ways to do it:
<h3>1. Comment whole section</h3>
The easiest way, the CSS is rendered only in the head but not in the stylesheet. 
This kind of markup does not allow to use your own CSS comments inside the fragment. 
Take care to use this way only when the plugin is active, because you are commenting some parts of your theme stylesheet.
/* [css-above-the-fold]
… CSS code fragment …
[/css-above-the-fold] */
<h3>2. Comment only the tags</h3>
The unobtrusive way, it allows you to include comments inside fragments, but the fragments are rendered both in the head section and the CSS file. 
This way is plugin-independent, and your theme stylesheet will keep running with this plugin activated or not.
/* [css-above-the-fold] */
… CSS code fragment …
/* [/css-above-the-fold] */
You can use these two kinds of markup combined in your CSS File.
The resulting CSS fragments introduced in the header are compacted and minified.
This plugin only read the style.css file when it is modified, and stores the results using the WP options API.

CSS Above The Fold

Good idea for a plugin. Works perfectly. Thanks.



Good idea

Faster CSS browser rendering displaying selected fragments of your theme stylesheet file directly into the head section.

Khang Minh

Allows you to combine and minify your CSS and JS files to improve page load time. This plugin uses the PHP library <a href="http://code.google.com/p/minify/" rel="nofollow ugc">Minify</a> and relies on WordPress’s enqueueing system rather than the output buffer, which respects the order of CSS and JS files as well as their dependencies. BWP Minify is very customizable and easy to use.
Useful resources to help you get started and make the most out of BWP Minify
<ul>
<li><a href="http://betterwp.net/wordpress-plugins/bwp-minify/#usage" rel="nofollow ugc">Official Documentation</a></li>
<li><a href="http://betterwp.net/wordpress-minify-javascript-css/" rel="nofollow ugc">WordPress Minify Best Practices</a></li>
</ul>
Some Features
<ul>
<li>Uses enqueueing system of WordPress which improves compatibility with other plugins and themes</li>
<li>Allows you to move enqueued files to desired locations (header, footer, oblivion, etc.) via a dedicated management page</li>
<li>Allows you to change various Minify settings (cache directory, cache age, debug mode, etc.) directly in admin</li>
<li>Allows you to use friendly Minify urls, such as <code>http://example.com/path/to/cache/somestring.js</code></li>
<li>Allows you to use CDN for minified contents, one CDN host for JS and one for CSS with SSL support</li>
<li>Allows you to split long Minify strings into shorter ones</li>
<li>Offers various way to add a cache buster to your minify string such as WordPress’s version, Theme’s version, Cache folder’s last modified timestap, etc.</li>
<li>Supports script localization (<code>wp_localize_script()</code>)</li>
<li>Supports inline styles</li>
<li>Supports RTL stylesheets</li>
<li>Supports media-specific stylesheets (e.g. ‘screen’, ‘print’, etc.)</li>
<li>Supports conditional stylesheets (e.g. <code><!--[if lt IE 7]></code>)</li>
<li>Provides hooks for further customization</li>
<li>WordPress Multi-site compatible</li>
</ul>
Please don’t forget to rate this plugin <a href="https://wordpress.org/support/view/plugin-reviews/bwp-minify?filter=5" rel="ugc">5 shining stars</a> if you like it, thanks!
Get in touch
<ul>
<li>Support is provided via <a href="http://betterwp.net/community/" rel="nofollow ugc">BetterWP.net Community</a>.</li>
<li>Follow and contribute to development via <a href="https://github.com/OddOneOut/Better-WordPress-Minify" rel="nofollow ugc">Github</a>.</li>
<li>You can also follow me on <a href="http://twitter.com/0dd0ne0ut" rel="nofollow ugc">Twitter</a>.</li>
<li>Check out <a href="http://feeds.feedburner.com/BetterWPnet" rel="nofollow ugc">latest WordPress Tips and Ideas</a> from BetterWP.net.</li>
</ul>
Languages
<ul>
<li>English (default)</li>
<li>Romanian (ro_RO) – Thanks to <a href="www.enjoyprepaid.com" rel="nofollow ugc">Luke Tyler, International Calling Cards</a>!</li>
<li>Turkish (tr_TR) – Thanks to Hakan E</li>
<li>French (fr_FR) – Thanks to Sebastien</li>
<li>Italian (it_IT) – Thanks to Gabriele – http://cookspot.it</li>
<li>Spanish (es_ES) – Thanks to Ruben Hernandez – http://usitility.com/</li>
<li>Dutch (nl_NL) – Thanks to Martijn van Egmond</li>
<li>German (de_DE) – Thanks to Matthias</li>
<li>Serbo-Croatian (sr_RS) – Thanks to Borisa Djuraskovic – <a href="http://www.webhostinghub.com/" rel="nofollow ugc">Web Hosting Hub</a></li>
<li>Indonesian (id_ID) – Thanks to Nasrulhaq Muiz – http://al-badar.net</li>
<li>Russian (ru_RU) – Thanks to Эдуард Валеев</li>
</ul>
Please <a href="http://betterwp.net/wordpress-tips/create-pot-file-using-poedit/" rel="nofollow ugc">help translate</a> this plugin!

Better WordPress Minify

Allows you to combine and minify your CSS and JS files to improve page load time.

CSS Above The Fold vs Better WordPress Minify