malhuda/fictioneer
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 112 Wiki Activity

Optionize async font loading pattern

Browse Source 
This works great, but if the site has a content policy preventing onload events from working, you can turn it off with a constant.
This commit is contained in:
Tetrakern 2024-03-08 11:46:24 +01:00
parent c3b3a784fd
commit f0612c7d0f
3 changed files with 15 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
INSTALLATION.md
View File

@ -1369,4 +1369,5 @@ define( 'CONSTANT_NAME', value );
| FICTIONEER_ENABLE_STORY_CHANGELOG | boolean | Whether changes to the story chapter list should be logged. Default `true`. | FICTIONEER_ENABLE_STORY_CHANGELOG | boolean | Whether changes to the story chapter list should be logged. Default `true`.
| FICTIONEER_ENABLE_BROWSER_NOTES | boolean | Whether to inform visitors of missing browser features. Default `true`. | FICTIONEER_ENABLE_BROWSER_NOTES | boolean | Whether to inform visitors of missing browser features. Default `true`.
| FICTIONEER_DEFER_SCRIPTS | boolean | Whether to defer scripts or load them in the footer. Default `true`. | FICTIONEER_DEFER_SCRIPTS | boolean | Whether to defer scripts or load them in the footer. Default `true`.
| FICTIONEER_ENABLE_ASYNC_ONLOAD_PATTERN | boolean | Whether the [onload pattern](https://www.filamentgroup.com/lab/load-css-simpler/) for asynchronous CSS loading is used. Default `true`.
| FICTIONEER_EXAMPLE_CHAPTER_ICONS | array | Collection of example Font Awesome icon class strings. | FICTIONEER_EXAMPLE_CHAPTER_ICONS | array | Collection of example Font Awesome icon class strings.

5
functions.php
View File

@ -386,6 +386,11 @@ if ( ! defined( 'FICTIONEER_DEFER_SCRIPTS' ) ) {
define( 'FICTIONEER_DEFER_SCRIPTS', true ); define( 'FICTIONEER_DEFER_SCRIPTS', true );
} }
// Boolean: Asynchronous loading via onload pattern
if ( ! defined( 'FICTIONEER_ENABLE_ASYNC_ONLOAD_PATTERN' ) ) {
define( 'FICTIONEER_ENABLE_ASYNC_ONLOAD_PATTERN', true );
}
/* /*
* Arrays * Arrays
*/ */

13
includes/functions/_theme_setup.php
View File

@ -1262,10 +1262,15 @@ if ( ! function_exists( 'fictioneer_output_head_fonts' ) ) {
// Critical path fonts // Critical path fonts
fictioneer_output_critical_fonts(); fictioneer_output_critical_fonts();
// Bundled fonts // Setup
$bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css'; $bundled_fonts = WP_CONTENT_DIR . '/themes/fictioneer/cache/bundled-fonts.css';
$last_built_timestamp = get_option( 'fictioneer_bundled_fonts_timestamp', '123456789' ); $last_built_timestamp = get_option( 'fictioneer_bundled_fonts_timestamp', '123456789' );
$cache_bust = "?timestamp={$last_built_timestamp}"; $cache_bust = "?timestamp={$last_built_timestamp}";
$loading_pattern = '';
if ( FICTIONEER_ENABLE_ASYNC_ONLOAD_PATTERN ) {
$loading_pattern = 'media="print" onload="this.media=\'all\'; this.onload=null;"';
}
// Create file if it does not exist // Create file if it does not exist
if ( ! file_exists( $bundled_fonts ) ) { if ( ! file_exists( $bundled_fonts ) ) {
@ -1279,9 +1284,9 @@ if ( ! function_exists( 'fictioneer_output_head_fonts' ) ) {
$custom_fonts_href = get_template_directory_uri() . '/cache/bundled-fonts.css' . $cache_bust; $custom_fonts_href = get_template_directory_uri() . '/cache/bundled-fonts.css' . $cache_bust;
// Start HTML ---> ?> // Start HTML ---> ?>
<link rel="stylesheet" id="base-fonts-stylesheet" href="<?php echo $base_fonts_href; ?>" data-no-optimize="1" media="print" onload="this.media='all';"> <link rel="stylesheet" id="base-fonts-stylesheet" href="<?php echo $base_fonts_href; ?>" data-no-optimize="1" data-no-minify="1" <?php echo $loading_pattern; ?>>
<noscript><link rel="stylesheet" href="<?php echo $base_fonts_href; ?>"></noscript> <noscript><link rel="stylesheet" href="<?php echo $base_fonts_href; ?>"></noscript>
<link rel="stylesheet" id="bundled-fonts-stylesheet" href="<?php echo $custom_fonts_href; ?>" data-no-optimize="1" media="print" onload="this.media='all';"> <link rel="stylesheet" id="bundled-fonts-stylesheet" href="<?php echo $custom_fonts_href; ?>" data-no-optimize="1" data-no-minify="1" <?php echo $loading_pattern; ?>>
<noscript><link rel="stylesheet" href="<?php echo $custom_fonts_href; ?>"></noscript> <noscript><link rel="stylesheet" href="<?php echo $custom_fonts_href; ?>"></noscript>
<?php // <--- End HTML <?php // <--- End HTML
} else { } else {
@ -1289,7 +1294,7 @@ if ( ! function_exists( 'fictioneer_output_head_fonts' ) ) {
$full_fonts_href = get_template_directory_uri() . '/css/fonts-full.css' . $cache_bust; $full_fonts_href = get_template_directory_uri() . '/css/fonts-full.css' . $cache_bust;
// Start HTML ---> ?> // Start HTML ---> ?>
<link rel="stylesheet" href="<?php echo $full_fonts_href; ?>" data-no-optimize="1" media="print" onload="this.media='all';"> <link rel="stylesheet" href="<?php echo $full_fonts_href; ?>" data-no-optimize="1" data-no-minify="1" <?php echo $loading_pattern; ?>>
<noscript><link rel="stylesheet" href="<?php echo $full_fonts_href; ?>"></noscript> <noscript><link rel="stylesheet" href="<?php echo $full_fonts_href; ?>"></noscript>
<?php // <--- End HTML <?php // <--- End HTML
} }