這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援,並可能會與更新版本的 WordPress 產生使用上的相容性問題。

CSS Above The Fold

外掛說明

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:

1. Comment whole section

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] */

2. Comment only the tags

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.

螢幕擷圖

  • A edited CSS file using Whole section commented fragment
  • A fragment commenting only the special markup
  • Styles in-page resulting of joining css theme fragments

安裝方式

  1. Download the plugin from WordPress plugin repository
  2. Unzip and upload css-above-the-fold folder to the /wp-content/plugins/ directory
  3. Activate the plugin through the ‘Plugins’ menu in WordPress
  4. Edit your theme CSS file style.css following the instructions above

常見問題集

My theme will be dependent on this plugin?

Only if you use the Comment whole section type of fragment selection. However, it is easily reversible uncommenting the sections.
If you want an independent stylesheet use the Comment only the tags technique.

Why is important rendering CSS file on the top of the page?

Prioritizing above-the-fold content it’s an important factor to speed-up your website, rankings improvement and conversion.

Why using this technique of selecting fragments from the theme stylesheet file?

The aim is simplicity, editing a single file avoids having to maintain two separate stylesheets.

And what CSS should I mark to display it “above-the-fold”?

That is the million dollar question, this plugin does not do this task automatically, only provides a method for easy and quick implementation.
There are some tools to help you in the process of select the rights fragments of code, and maybe you will have to modify your stylesheet structure to properly isolate these CSS fragments.
You can find a lot of resouces about this topic performing a simple Google search like “css above the fold”.

使用者評論

2016 年 9 月 3 日 1 則留言
Good idea for a plugin. Works perfectly. Thanks.
閱讀全部 1 則使用者評論

參與者及開發者

以下人員參與了開源軟體〈CSS Above The Fold〉的開發相關工作。

參與者

將〈CSS Above The Fold〉外掛本地化為台灣繁體中文版

對開發相關資訊感興趣?

任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄

變更記錄

1.0

  • Initial Release.
  • Tested until WordPress 4.2