wp_maybe_inline_styles()
云策文档标注
概述
wp_maybe_inline_styles() 是 WordPress 5.8.0 引入的函数,用于将小型样式表内联到 HTML 中,以提升性能和可持续性。该功能为可选启用,通过 wp_style_add_data() 添加路径数据来指定样式表。
关键要点
- 函数通过内联样式减少 HTTP 请求,优化加载性能,默认内联大小限制为 40000 字节(自 6.9.0 起从 20000 增加)。
- 使用 wp_style_add_data( $style_handle, 'path', $file_path ) 为样式表添加绝对路径以启用内联。
- 内联过程包括排序样式表大小、检查总大小限制、处理相对 URL 并更新 WP_Styles 对象。
- 可通过 apply_filters( 'styles_inline_size_limit', $total_inline_limit ) 钩子自定义内联大小限制。
代码示例
wp_style_add_data( $style_handle, 'path', $file_path );注意事项
- 内联仅适用于已注册且具有路径的样式表,需确保文件可访问且大小有效。
- 内联样式可能增加 HTML 大小,建议用于小型样式以避免性能反效果。
原文内容
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
function wp_maybe_inline_styles() {
global $wp_styles;
$total_inline_limit = 40000;
/**
* The maximum size of inlined styles in bytes.
*
* @since 5.8.0
* @since 6.9.0 The default limit increased from 20K to 40K.
*
* @param int $total_inline_limit The file-size threshold, in bytes. Default 40000.
*/
$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 ( ! isset( $wp_styles->registered[ $handle ] ) ) {
continue;
}
$src = $wp_styles->registered[ $handle ]->src;
$path = $wp_styles->get_data( $handle, 'path' );
if ( $path && $src ) {
$size = wp_filesize( $path );
if ( ! $size ) {
continue;
}
$styles[] = array(
'handle' => $handle,
'src' => $src,
'path' => $path,
'size' => $size,
);
}
}
if ( ! empty( $styles ) ) {
// Reorder styles array based on size.
usort(
$styles,
static 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'] );
/*
* Check if the style contains relative URLs that need to be modified.
* URLs relative to the stylesheet's path should be converted to relative to the site's root.
*/
$style['css'] = _wp_normalize_relative_css_links( $style['css'], $style['src'] );
// Keep track of the original `src` for the style that was inlined so that the `sourceURL` comment can be added.
$wp_styles->add_data( $style['handle'], 'inlined_src', $style['src'] );
// 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'];
}
}
}
Hooks
- apply_filters( ‘styles_inline_size_limit’, int $total_inline_limit )
-
The maximum size of inlined styles in bytes.
Changelog
| Version | Description |
|---|---|
| 5.8.0 | Introduced. |
Skip to note 2 content
Weston Ruter
See dev note: Block-styles loading enhancements in WordPress 5.8.