Advanced Progressive Web App and Service Worker optimization toolkit. Cache strategy, offline browsing, preloading, Google Lighthouse PWA validation and more.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
admin core update May 12, 2018
controllers core update Jul 25, 2018
core core update Sep 20, 2018
docs/images core update Jun 9, 2018
includes core update Mar 31, 2018
languages core update Mar 24, 2018
public core update May 4, 2018
tests core update Mar 24, 2018
.travis.yml core update Mar 24, 2018
README.md core update Jul 12, 2018
README.txt core update Sep 20, 2018
changelog.txt core update Mar 24, 2018
index.php core update Mar 24, 2018
pwa-optimization.php core update Sep 20, 2018
uninstall.php core update Jun 14, 2018

README.md

Build Status Version

WordPress Progressive Web App Optimization

Advanced Progressive Web App (PWA) and Service Worker optimization toolkit. Cache strategy, offline browsing, preloading, Google Lighthouse PWA validation 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

Description

This plugin is a toolkit for Progressive Web App and Service Worker optimization.

The plugin provides in a complete solution for service worker based performance optimization and enables to validate a website as a Progressive Web App (PWA) in Google Lighthouse.

The service worker can be configured with multiple cache strategies (cache first, network with fallback and event based), offline content, smart preloading, preload on mousedown to improve navigation speed and many more options to enable offline browsing and improved navigation performance.

Service Worker Optimization Service Worker Cache Policy Optimization

Cache Policy

The Service Worker cache policy can be configured using JSON.

Service Worker Cache Policy

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'));

    }
});

Background Fetch

A performance flaw of Service Workers is that they initiate Fetch requests that cannot be cancelled when a user wants to navigate which can slow and even block navigation. This plugin provides a unique innovation in which Fetch requests can be performed in a regular Web Worker that can be terminated when a user wants to navigate, instantly cancelling any Fetch requests or background tasks.

Background Fetch

Web App Manifest Editor

The plugin provides a Web App manifest.json and meta editor to easily optimize the web app configuration.

Web App Manifest 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, Javascript), HTML, Web Font, HTTP/2 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