WordPress Above The Fold Optimization

The Above The Fold Optimization plugin is a toolkit that enables to achieve a 100 score in the Google PageSpeed Insights test. It is a plugin intended for optimization professionals and advanced WordPress users.

https://wordpress.org/plugins/above-the-fold-optimization/

The plugin is compatible with most optimization, caching and minification plugins such as Autoptimize and W3 Total Cache. The plugin offers modular compatibility and can be extended to support any optimization plugin. (more info)

Critical CSS Tools

The plugin contains tools to manage Critical Path CSS.

Some of the features:

• Conditional Critical CSS (apply tailored Critical CSS to specific pages based on WordPress conditions and filters)
• Management via text editor and FTP (critical CSS files are stored in the theme directory)
• Full CSS Extraction: selectively export CSS files of a page as a single file or as raw text for use in critical CSS generators.
• Quality Test: test the quality of Critical CSS by comparing it side-by-side with the full CSS display of a page. This tool can be used to detect a flash of unstyled content (FOUC).

Read more about Critical CSS in the documentation by Google. This article by a Google engineer provides information about the available methods for creating critical CSS.

CSS Load Optimization

The plugin contains tools to optimize the delivery of CSS in the browser.

Some of the features:

• Async loading via loadCSS (enhanced with requestAnimationFrame API following the recommendations by Google)
• Remove CSS files from the HTML source.
• Capture and proxy (script injected) external stylesheets to load the files locally or via a CDN with optimized cache headers. This feature enables to pass the "Leverage browser caching" rule from Google PageSpeed Insights.

The plugin does not provide CSS code optimization, minification or concatenation.

Javascript Load Optimization

The plugin contains tools to optimize the loading of javascript.

Some of the features:

• Robust async script loader based on little-loader by Walmart Labs (reference)
• HTML5 Web Worker and Fetch API based script loader with localStorage cache and fallback to little-loader for old browsers.
• jQuery Stub that enables async loading of jQuery.
• Abiding of WordPress dependency configuration while loading files asynchronously.
• Lazy Loading Javascript (e.g. Facebook or Twitter widgets) based on jQuery Lazy Load XT.
• Capture and proxy (script injected) external javascript files to load the files locally or via a CDN with optimized cache headers. This feature enables to pass the "Leverage browser caching" rule from Google PageSpeed Insights.

The HTML5 script loader offers the following advantages when configured correctly:

• 0 javascript file download during navigation
• 0 javascript file download for returning visitors (e.g. from Google search results, leading to a reduced bounce rate)
• faster script loading than browser cache, especially on mobile (according to a proof of concept by a Google engineer)

The plugin does not provide Javascript code optimization, minification or concatenation.

Google Web Font Optimization

The plugin contains tools to optimize Google Web Fonts.

Some of the features:

• Load Google Web Fonts via Google Web Font Loader.
• Auto-discovery of Google Web Fonts using:
  • Parse <link rel="stylesheet"> in HTML source.
  • Parse @import links in minified CSS from minification plugins (e.g. Autoptimize).
  • Parse existing WebFontConfig javascript configuration.
• Remove fonts to enable local font loading.
• Upload Google Web Font Packages from google-webfonts-helper to the theme directory.

Gulp.js Critical CSS Creator

The plugin contains a tool to create Critical CSS based on Gulp.js tasks. The tool is based on critical (by a Google engineer).

Maintainers

• @optimalisatie

License

(C) www.pagespeed.pro 2014–2017, released under the MIT license