wp_maybe_inline_styles()
Allows small styles to be inlined.
Description
This improves performance and sustainability, and is opt-in. Stylesheets can opt in by adding path
data using wp_style_add_data
, and defining the file’s absolute path:
wp_style_add_data( $style_handle, 'path', $file_path );
Source
File: wp-includes/script-loader.php
function wp_maybe_inline_styles() { global $wp_styles; $total_inline_limit = 20000; /** * The maximum size of inlined styles in bytes. * * @since 5.8.0 * * @param int $total_inline_limit The file-size threshold, in bytes. Default 20000. */ $total_inline_limit = apply_filters( 'styles_inline_size_limit', $total_inline_limit ); $styles = array(); // Build an array of styles that have a path defined. foreach ( $wp_styles->queue as $handle ) { if ( wp_styles()->get_data( $handle, 'path' ) && file_exists( $wp_styles->registered[ $handle ]->extra['path'] ) ) { $styles[] = array( 'handle' => $handle, 'path' => $wp_styles->registered[ $handle ]->extra['path'], 'size' => filesize( $wp_styles->registered[ $handle ]->extra['path'] ), ); } } if ( ! empty( $styles ) ) { // Reorder styles array based on size. usort( $styles, function( $a, $b ) { return ( $a['size'] <= $b['size'] ) ? -1 : 1; } ); /* * The total inlined size. * * On each iteration of the loop, if a style gets added inline the value of this var increases * to reflect the total size of inlined styles. */ $total_inline_size = 0; // Loop styles. foreach ( $styles as $style ) { // Size check. Since styles are ordered by size, we can break the loop. if ( $total_inline_size + $style['size'] > $total_inline_limit ) { break; } // Get the styles if we don't already have them. $style['css'] = file_get_contents( $style['path'] ); // Set `src` to `false` and add styles inline. $wp_styles->registered[ $style['handle'] ]->src = false; if ( empty( $wp_styles->registered[ $style['handle'] ]->extra['after'] ) ) { $wp_styles->registered[ $style['handle'] ]->extra['after'] = array(); } array_unshift( $wp_styles->registered[ $style['handle'] ]->extra['after'], $style['css'] ); // Add the styles size to the $total_inline_size var. $total_inline_size += (int) $style['size']; } } }
Changelog
Version | Description |
---|---|
5.8.0 | Introduced. |
© 2003–2021 WordPress Foundation
Licensed under the GNU GPLv2+ License.
https://developer.wordpress.org/reference/functions/wp_maybe_inline_styles