Skip to content

Advanced CSS optimization toolkit. Critical CSS, minification, concatenation, async loading, advanced editor, CSS Lint, Clean CSS (professional), beautifier and more.

Notifications You must be signed in to change notification settings

mxmkmarquette/wordpress-css-optimization

 
 

Repository files navigation

Build Status Version

WordPress CSS Optimization

Advanced CSS optimization toolkit. Critical CSS, minification, concatenation, async loading, advanced editor, CSS Lint, Clean CSS (professional), beautifier and more.

This plugin is removed from WordPress.org. Read the story here.

Installation

Github Updater

This plugin can be installed and updated using Github Updater (installation instructions)

WordPress WPO Collection

This plugin is part of a Website Performance Optimization collection that include Javascript, HTML, Web Font, HTTP/2, Progressive Web App (Service Worker) and Security Header optimization.

The WPO optimization plugins provide in all essential tools that enable to achieve perfect Google Lighthouse Test scores and to validate a website as Google PWA, an important ranking factor for Google's Speed Update (July 2018).

Google Lighthouse Perfect Performance Scores

The WPO optimization plugins are designed to work together with single plugin performance. The plugins provide the latest optimization technologies and many unique innovations.

JSON shema configuration

The WPO optimization plugins are based on JSON schema based configuration that enables full control of the optimization using JSON. This provides several great advantages for website performance optimization.

Read more about JSON schemas.

Google PageSpeed vs Google Lighthouse Scores

While a Google PageSpeed 100 score is still of value, websites with a high Google PageSpeed score may score very bad in Google's new Lighthouse performance test.

The following scores are for the same site. It shows that a perfect Google PageSpeed score does not correlate to a high Google Lighthouse performance score.

Perfect Google PageSpeed 100 Score Google Lighthouse Critical Performance Score

Google PageSpeed score is outdated

For the open web to have a chance of survival in a mobile era it needs to compete with and win from native mobile apps. Google is dependent on the open web for it's advertising revenue. Google therefor seeks a way to secure the open web and the main objective is to rapidly enhance the quality of the open web to meet the standards of native mobile apps.

For SEO it is therefor simple: websites will need to meet the standards set by the Google Lighthouse Test (or Google's future new tests). A website with perfect scores will be preferred in search over low performance websites. The officially announced Google Speed Update (July 2018) shows that Google is going as far as it can to drive people to enhance the quality to ultra high levels, to meet the quality of, and hopefully beat native mobile apps.

A perfect Google Lighthouse Score includes validation of a website as a Progressive Web App (PWA).

Google offers another new website performance test that is much tougher than the Google PageSpeed score. It is based on a AI neural network and it can be accessed on https://testmysite.thinkwithgoogle.com

Description

This plugin is a toolkit for professional CSS optimization.

The plugin provides in a complete solution for CSS code optimization, CSS delivery optimization (async CSS loading) and Critical CSS management.

The plugin provides the option to minify CSS code using multiple CSS minifiers including CSSMin (PHP), Yahoo's YUI Compressor PHP Port, a fast regular expression based CSS minifier and the option to use a custom minifier using a WordPress filter that enables to use any solution, including a Amazon Lambda or Google Cloud function with Node.js based CSS optimization software.

The plugin provides many unique innovations including conditional Critical CSS, timed CSS loading and/or rendering based on requestAnimationFrame with frame target, requestIdleCallback, element scrolled into view or a Media Query.

The plugin enables to render and unrender stylesheets based on a Media Query or element scrolled in and out of viewport enabling to optimize the CSS for individual devices (e.g. save +100kb of CSS on mobile devices). The plugin makes it possible to enable and disable stylesheets based on the viewport orientation change or element scrolled in or out of view event, making it possible (and easy to manage) to dynamically redesign a website based on events.

With debug modus enabled, the browser console will show detailed information about the CSS loading and rendering process including a Performance API result for an insight in the CSS loading performance of any given configuration.

The plugin contains an advanced CSS editor with CSS Lint, Clean-CSS code optimization and CSS Beautifier. The editor can be personalized with more than 30 themes.

Advanced CSS Editor

Additional features can be requested on the Github forum.

About

Advanced CSS optimization toolkit. Critical CSS, minification, concatenation, async loading, advanced editor, CSS Lint, Clean CSS (professional), beautifier and more.

Resources

Stars

Watchers

Forks

Packages

No packages published

Languages

  • PHP 99.4%
  • Other 0.6%