amankapoor / wordpress-javascript-optimization

Advanced Javascript optimization toolkit. Minify, concat/merge, async loading, advanced editor, ES Lint, UglifyJS (professional), beautifier and more.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Build Status Version

WordPress Javascript Optimization [beta]

Advanced Javascript optimization toolkit. Minify, concat/merge, async loading, advanced editor, ES Lint, UglifyJS (professional), beautifier and more.

Installation

Github Updater

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

Installation instructions

Step 1: Install Github Updater and first optimization plugin

Installing and updating the plugins is possible using Github Updater. It is easy to install one of the plugins. You simply need to download the Github Updater plugin (zip file), install it from the WordPress plugin admin panel and copy the Github URL of the plugin into the Github Updater installer.

image

Step 2: Install other optimization plugins with a single click

A recent update of all plugins contains a easy single click install button.

image

Beta Notice

This plugin is a first beta which was banned from WordPress.org for a yet unknown motive. The plugin never received extensive user feedback which was originally planned and a lot of planned improvements and features were never added. Besides that, the investment by the (now) CEO of PageSpeed.pro Ltd. that was agreed mid 2017 was paid in the beginning of 2018, resulting in a severe delay and a greatly reduced version of the originally planned Advanced Optimization plugin (the bigger plugin was stripped of features and cut into individual plugins).

Thanks to the valuable feedback from Github users, the plugins did receive feedback. The quality of the plugins is very good however in sense of usability/documentation there are simply unresolved issues.

The plugins are able to deliver results for SEO. Our www.e-scooter.co demo website (started in 2018) ranks in the top 10 in Google in many countries and received visitors from 205 countries and is now visited from 174 countries per week on average. In The Netherlands, www.e-scooter.nl ranks #1 for many scooters. The website is currently at 1.5M visits per year.

The WPO plugins are operating sublimely.

gogoro-prijs

image

It will take a bit more effort, and maybe some more feedback from users, but then the WPO plugins could simply be 'perfect' for getting Google Lighthouse 100-scores and even better performance results (speed) than would be required for a 100-score (think of the unique innovations such as timed javascript execution and CSS rendering, advanced Web Worker based preload logic, preload on mouse-down and Service Worker Push with better performance than HTTP/2 Server Push).

Description

This plugin is a toolkit for professional Javascript optimization.

The plugin provides in a complete solution for code optimization and delivery optimization (minify, concat/merge (with groups), async loading, timed execution and more).

Multiple minifiers and custom minifier

The plugin provides the option to minify Javascript code using multiple Javascript minifiers including JSMin (PHP), Google Closure Compiler API 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 Javascript optimization software.

Javascript Code Optimization

Custom minifier

Show custom minifier example
/* Custom Javascript minifier */
add_filter('o10n_js_custom_minify', function ($JS) {

    // apply javascript optimization
    exec('/node /path/to/optimize-js.js /tmp/js-source.js');
    $minified = file_get_contents('/tmp/output.js');

    // alternative
    $minified = JSCompressor::minify($JS);

    return $minified;

});

Grouped Concatenation with Dependencies

The plugin provides advanced concatenation with the ability to configure concat groups with an optional dependency on other concat groups.

Group Concat

Async loading and timed download and/or execution

The plugin provides many unique innovations including timed script downloading and/or execution based on requestAnimationFrame with frame target, requestIdleCallback, element scrolled into view or a Media Query.

The plugin enables to download and/or execute scripts based on a Media Query or element scrolled into viewport enabling to optimize Javascript loading for individual devices (e.g. save +500kb of scripts on mobile devices).

Async Load Config Filter Timed Javascript Exec

Service Worker Push

The plugin provides a unique innovation called Service Worker Push. It is an alternative for HTTP/2 Server Push + Cache-Digest with better performance and better efficiency.

Cache-Digest is not yet an official supported feature. HTTP/2 Server Push without Cache-Digest causes a lot of overhead and has almost no performance advantage.

Cache-Digest calculation for thousands of assets causes overhead. Service Worker Push has direct access to the browser cache storage and is therefor able to support millions of cached assets without performance loss.

Service Worker Push uses PHP method \O10n\attach_preload() to attach assets such as images, stylesheets and scripts to a page which are then exposed to a Service Worker using a HTTP header. The Service Worker is then able to preload assets intelligently on the basis of a page URL.

/* Attach assets to page for smart preloading in the Service Worker */
add_action('init', function() {

    if (function_exists('O10n\attach_preload')) {

        // attach single asset to page
        \O10n\attach_preload('/path/to/image.jpg');

        // attach multiple assets to page
        \O10n\attach_preload(array('/path/to/image.jpg', 'https://cdn.google.com/script.js', '/path/to/stylesheet.css'));

    }
});

The Service Worker Optimization plugin (PWA Optimization) provides an option to preload pages for offline availability and an option to start preloading a page on mouse down. Service Worker Push enables to automatically load all essential assets of a page on the basis of page URLs which makes it easy to make a full website available offline, or to provide an instant navigation experience for websites with many unique assets per page.

With the mouse-down preload option + Service Worker Push for Javascript, the scripts of a page would start loading in the background as soon as a user touches a link.

Localstorage

The plugin provides the option to cache stylesheets using localStorage with a HTTP HEAD based background update. LocalStorage has proven to be exceptionally fast for loading CSS, much faster than browser cache.

localStorage Javascript

External Script Proxy

The plugin provides a unique innovation to capture and proxy external script injected scripts to pass the Leverage browser caching rule from Google PageSpeed Insights.

The proxy can also be used to remove or modify script injected scripts.

Script Proxy

Javascript Code Search & Replace

The plugin provides an option to search and replace strings in Javascript code before minification. The configuration supports both strings and regular expression.

Javascript code search & replace

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

Browser Console performance debug

Javascript Editor

The plugin contains an advanced Javascript editor with ES Lint, UglifyJS code optimization and a Javascript beautifier. The editor can be personalized with more than 30 themes.

Advanced Javascript Editor

Additional features can be requested on the Github forum.

WordPress WPO Collection

This plugin is part of a Website Performance Optimization collection that include CSS, 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 configuration

100% of the WPO plugin settings are controlled by JSON. This means that you could use the plugins without ever using the WordPress admin forms.

The JSON is verified using JSON schema's. More info about JSON schemas.

Local editing of optimization settings

A recently added Stealth Optimization Config Proxy concept makes it possible to edit the plugin settings using physical .json files from a local editor (with auto upload) making it efficient for fine tuning optimization settings. An update would cost a second compared to using + saving a WordPress admin panel.

https://github.com/o10n-x/wordpress-http2-optimization/releases/tag/0.0.55

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

About

Advanced Javascript optimization toolkit. Minify, concat/merge, async loading, advanced editor, ES Lint, UglifyJS (professional), beautifier and more.


Languages

Language:PHP 100.0%Language:CSS 0.0%Language:JavaScript 0.0%