Advanced WordPress Web Font optimization toolkit. Font Face API, Web Font Observer, Google Font Loader, Critical CSS, async and timed font rendering and more.
Clone or download
o10n-x
o10n-x core update
Latest commit b68ffe3 Sep 20, 2018
Permalink
Failed to load latest commit information.
admin core update May 12, 2018
controllers core update Jul 8, 2018
core core update Sep 20, 2018
docs core update Jun 9, 2018
includes 0.0.1 beta Feb 15, 2018
languages 0.0.5 beta Feb 20, 2018
public core update Jun 8, 2018
tests tests Feb 27, 2018
.travis.yml core update Mar 13, 2018
README.md core update Jul 12, 2018
README.txt core update Sep 20, 2018
changelog.txt 0.0.1 beta Feb 15, 2018
index.php 0.0.1 beta Feb 15, 2018
phpunit.xml tests Feb 27, 2018
uninstall.php core update Jun 14, 2018
web-font-optimization.php core update Sep 20, 2018

README.md

Build Status Version

Web Font Optimization

Advanced Web Font optimization toolkit. Font Face API, Web Font Observer, Google Font Loader, Critical CSS, async and timed font rendering 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 professional web font optimization.

The plugin provides an advanced management solution for the following font loading technologies:

The plugin contains many unique innovations such as async and timed font loading and/or rendering which enables to load and/or render fonts only on specific screen sizes/devices using a Media Query, when an element scrolls into view or using methods for page load time optimization purposes (requestAnimationFrame with frame targeting and more). Timed font loading is available for all loading strategies.

Font Face API Configuration Font Face Observer Configuration Google Font Loader Configuration

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

Debug info in Browser Console

The plugin contains a tool to download and install Google fonts locally for a theme, it provides an option to push fonts using HTTP/2 Server Push, it enables to remove linked fonts from HTML and CSS source code (<link rel="stylesheet"> and @import links) and to remove Google Font Loader from HTML and javascript source code.

Google Font Downloader

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, 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