New plugin

We have published a new plugin for CSS optimization and Web Font Optimization. It is advised to use the new plugin for access to the latest technologies and long term support.

Install new plugin

WARNING: PLUGIN INSTALLATION NOT COMPLETE, MISSING public/js/src/loadcss_package.json

failed to parse public/js/src/loadcss_package.json

CTRL->gwfo->package_version(true); if (empty($webfont_version)) { $webfont_version = '(unknown)'; } ?>
Optimize CSS Delivery

When enabled, CSS files are loaded asynchronously via loadCSS (v). Click here for the recommendations by Google.

CSS Delivery Optimization

Enhanced loadCSS

When enabled, a customized version of loadCSS is used to make use of the requestAnimationFrame API following the recommendations by Google.
CSS render delay
Warning: A higher Google PageSpeed score may sometimes be achieved using this option but it may not be beneficial to the page rendering experience of your users. Often it is best to seek an alternative solution.

Optionally, enter a time in milliseconds to delay the rendering of CSS files.
Position

Select the position where the async loading of CSS will start.
Ignore List

Stylesheets to ignore in CSS delivery optimization. One stylesheet per line. The files will be left untouched in the HTML.
Remove List

Stylesheets to remove from HTML. One stylesheet per line. This feature enables to include small plugin related CSS files inline.
Optimize Web Fonts

When enabled, web fonts are optimized using Google Web Font Loader.

Web Font Optimization

webfont.js Load Method

Select the method to load webfont.js (v).
Load Position

Select the position where the loading of web fonts will start.
WebFontConfig WebFontConfig variable not recognized.

'; } ?>

Enter the WebFontConfig variable for Google Web Font Loader. Leave blank for the default configuration. (more information)
Google Web Fonts

Enter the Google Font API definitions of Google Web Fonts to load. One font per line. (documentation)


When enabled, fonts are automatically extracted from the HTML, CSS and existing WebFontConfig.


 Ignore List

Enter (parts of) Google Web Font definitions to ignore, e.g. Open Sans. The fonts in this list will not be optimized or auto-detected.


 Remove List

Enter (parts of) Google Web Font definitions to remove, e.g. Open Sans. This feature is useful when loading fonts locally. One font per line.
Local Font Loading

Google Fonts are served from fonts.googleapis.com that is causing a render-blocking warning in the Google PageSpeed test. The Google fonts stylesheet cannot be cached by the external resource proxy because it serves different content based on the client.

To solve the PageSpeed Score issue while also achieving the best font render performance, it is possible to download the Google fonts and load them locally (from the critical CSS). Loading Google fonts locally enables to achieve a Google PageSpeed 100 Score while also preventing a font flicker effect during navigation.


How to place Google Fonts locally

Select the option "Disabled (remove all fonts)" from the webfont.js Load Method menu (above) to remove dynamic and static Google fonts from the HTML and CSS.

Step 1: download the font files and CSS

Visit Google Webfonts Helper and search for the fonts that you want to download. Select the font configuration (weight, charset and style) and download the zip-file.

Step 2: upload the fonts to your theme directory

Extract the zip-file and upload the font files to /fonts/ in your theme directory. Optionally, use the file upload to extract the zip-file in your theme directory automatically (requires PHP5).

Step 3: create a Conditional Critical Path CSS entry for Google Fonts

Create a Conditional Critical Path CSS entry without conditions and select the @appendToAny option.

Enter the Google Font CSS into the CSS input field.

Change the paths of the fonts to the location of the fonts in your theme directory, e.g. and minify the CSS.