manifest / performance / autoptimize-critical-css-io

Autoptimize critical-css.io

An adapter to connect https://github.com/nico-martin/critical-css-api with Autoptimize

by Nico Martin · github.com/sayhellogmbh/autoptimize-critical-css-io · website

★ 0stars

Install

Download source zip No release zip yet

This is the repository archive. It installs, but the folder name will carry the branch suffix and updates will not flow.

Install straight from GitHub with WP-CLI:

wp plugin install https://github.com/sayhellogmbh/autoptimize-critical-css-io/archive/refs/heads/master.zip

No built-in updater. New versions won't appear under Dashboard → Updates. Install new releases yourself, or let Git Updater track the repository.

Readme github.com/sayhellogmbh/autoptimize-critical-css-io ↗

Autoptimize - Critical CSS API

A WordPress Plugin that connects Autoptimize with the open source CriticalCSS generator Critical CSS API.

conditonal Critical CSS

The Critical CSS follows a template hierarchy similar to the WordPress template hierarchy.

index.css
| singular.css
| | singular-{$post_type}.css
| | | singular-{$post_id}.css
| archive.css
| | archive-{$post_type}.css
| | archive-author.css
| | | archive-author-{$author_name}.css
| | archive-date.css
| | | archive-date-year.css
| | | archive-date-month.css
| | | archive-date-day.css
| | archvie-taxonomy.css
| | | archvie-taxonomy-{$taxonomy}.css
| | | | archvie-taxonomy-{$term_id}.css
| front-page.css
| 404.css
| search.css

The plugin allows you to create the Critical CSS for a specific page (as post meta box) or various fallbacks (on the settings page).

Developers

Filters

apiBaseURL

By default this plugin uses the hosted version of Critical CSS API on https://api.critical-css.io. But if you want to use a self-hosted version you can change the API base url using aoccssio/apiBaseURL:

function myplugin_api_base( $defaultAPIBase ) {
    return 'https://myapibaseurl.com';
}
add_filter( 'aoccssio/apiBaseURL', 'myplugin_api_base' );

dimensions

function myplugin_dimensions( $defaultDimensions ) {
    return [
        'desktop' => [
            'width'  => 1200,
            'height' => 800,
        ],
        'mobile'  => [
            'width'  => 700,
            'height' => 300,
        ],
    ];
}
add_filter( 'aoccssio/dimensions', 'myplugin_dimensions' )