Skip to content

Commit fbab0a7

Browse files
MiraeldMiraeld
authored
Closes #7284: Preload Fonts - Filter to add extensions (#7318)
1 parent d015e4c commit fbab0a7

13 files changed

+129
-64
lines changed

‎assets/js/wpr-beacon.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -379,13 +379,14 @@
379379
var BeaconLrc_default = BeaconLrc;
380380

381381
// src/BeaconPreloadFonts.js
382-
var BeaconPreloadFonts = class _BeaconPreloadFonts {
382+
var BeaconPreloadFonts = class {
383383
constructor(config, logger) {
384384
this.config = config;
385385
this.logger = logger;
386386
this.aboveTheFoldFonts = [];
387+
const extensions = (Array.isArray(this.config.processed_extensions) && this.config.processed_extensions.length > 0 ? this.config.processed_extensions : ["woff", "woff2", "ttf"]).map((ext) => ext.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
388+
this.FONT_FILE_REGEX = new RegExp(`\\.(${extensions})(\\?.*)?$`, "i");
387389
}
388-
static FONT_FILE_REGEX = /\.(woff2?|ttf|otf|eot)(\?.*)?$/i;
389390
/**
390391
* Checks if a given font family is a system font.
391392
*
@@ -443,7 +444,7 @@
443444
*/
444445
getNetworkLoadedFonts() {
445446
return new Map(
446-
window.performance.getEntriesByType("resource").filter((resource) => _BeaconPreloadFonts.FONT_FILE_REGEX.test(resource.name)).map((resource) => [this.cleanUrl(resource.name), resource.name])
447+
window.performance.getEntriesByType("resource").filter((resource) => this.FONT_FILE_REGEX.test(resource.name)).map((resource) => [this.cleanUrl(resource.name), resource.name])
447448
);
448449
}
449450
/**

‎assets/js/wpr-beacon.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/wpr-beacon.min.js.map‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎inc/Engine/Media/PreloadFonts/Frontend/Controller.php‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -119,9 +119,23 @@ public function add_custom_data( array $data ): array {
119119
*/
120120
$font_data = wpm_apply_filters_typed( 'array', 'rocket_preload_fonts_font_data', [] );
121121

122+
$processed_extensions = [
123+
'woff2',
124+
'woff',
125+
'ttf',
126+
];
127+
128+
/**
129+
* Filters the list of processed font extensions.
130+
*
131+
* @param string[] $processed_extensions Array of processed font extensions.
132+
*/
133+
$processed_extensions = wpm_apply_filters_typed( 'string[]', 'rocket_preload_fonts_processed_extensions', $processed_extensions );
134+
122135
$data['system_fonts'] = $system_fonts;
123136
$data['font_data'] = $font_data;
124137
$data['status']['preload_fonts'] = $this->context->is_allowed();
138+
$data['processed_extensions'] = $processed_extensions;
125139

126140
return $data;
127141
}

‎tests/Fixtures/inc/Engine/Common/PerformanceHints/Frontend/Subscriber/HTML/no_closing_body_tag_output.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
11
<html>
22
<head>
3-
<title>Test</title>
3+
<title>
4+
Test</title>
45
</head>
56
<body>
67
</html>
7-
<script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script>
8+
<script>
9+
var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"processed_extensions":["woff2","woff","ttf"],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script>
810
<script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async>
911
</script>

‎tests/Fixtures/inc/Engine/Common/PerformanceHints/Frontend/Subscriber/HTML/output_double_body_tag.html‎

Lines changed: 24 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,29 @@
11
<html>
22
<head>
3-
<title>Test</title>
3+
<title>
4+
Test</title>
45
</head>
56
<body>
6-
<iframe srcdoc="
7-
<!DOCTYPE html>
8-
<html lang='en'>
9-
<head>
10-
<meta charset='UTF-8'>
11-
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
12-
<title>Iframe Content</title>
13-
</head>
14-
<body>
15-
<header>
16-
<h1>Iframe Header</h1>
17-
</header>
18-
</body>
19-
</html>
20-
" width="600" height="400" style="border:none;"></iframe>
21-
<script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
7+
<iframe srcdoc="<!DOCTYPE html>
8+
<html lang='en'>
9+
<head>
10+
<meta charset='UTF-8'>
11+
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
12+
<title>
13+
Iframe Content</title>
14+
</head>
15+
<body>
16+
<header>
17+
<h1>
18+
Iframe Header</h1>
19+
</header>
20+
</body>
21+
</html>
22+
" width="600" height="400" style="border:none;">
23+
</iframe>
24+
<script>
25+
var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"processed_extensions":["woff2","woff","ttf"],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script>
26+
<script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async>
27+
</script>
28+
</body>
2229
</html>

‎tests/Fixtures/inc/Engine/Common/PerformanceHints/Frontend/Subscriber/HTML/output_preload_fonts.html‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
<html>
2-
<head>
3-
<title>Test</title>
4-
<link data-rocket-preload as="font" href="http://example.org/assets/fonts/font1.woff2" rel="preload">
5-
<link data-rocket-preload as="font" href="http://example.org/assets/fonts/font2.ttf" rel="preload">
6-
<link rel="stylesheet" href="http://example.org/assets/fonts/font1.woff2">
7-
<link rel="stylesheet" href="http://example.org/assets/fonts/font2.ttf">
8-
</head>
9-
<body><script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
2+
<head>
3+
<title>
4+
Test</title>
5+
<link data-rocket-preload as="font" href="http://example.org/assets/fonts/font1.woff2" rel="preload">
6+
<link data-rocket-preload as="font" href="http://example.org/assets/fonts/font2.ttf" rel="preload">
7+
<link rel="stylesheet" href="http://example.org/assets/fonts/font1.woff2">
8+
<link rel="stylesheet" href="http://example.org/assets/fonts/font2.ttf">
9+
</head>
10+
<body>
11+
<script>
12+
var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"processed_extensions":["woff2","woff","ttf"],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script>
13+
<script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async>
14+
</script>
15+
</body>
1016
</html>

‎tests/Fixtures/inc/Engine/Common/PerformanceHints/Frontend/Subscriber/HTML/output_preload_fonts_w_crossorigin.html‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
<html>
2-
<head>
3-
<title>Test</title>
4-
<link crossorigin data-rocket-preload as="font" href="http://external.domain/assets/fonts/font1.woff2" rel="preload">
5-
<link data-rocket-preload as="font" href="http://example.org/assets/fonts/font2.ttf" rel="preload">
6-
<link rel="stylesheet" href="http://external.domain/assets/fonts/font1.woff2">
7-
<link rel="stylesheet" href="http://example.org/assets/fonts/font2.ttf">
8-
</head>
9-
<body><script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
2+
<head>
3+
<title>
4+
Test</title>
5+
<link crossorigin data-rocket-preload as="font" href="http://external.domain/assets/fonts/font1.woff2" rel="preload">
6+
<link data-rocket-preload as="font" href="http://example.org/assets/fonts/font2.ttf" rel="preload">
7+
<link rel="stylesheet" href="http://external.domain/assets/fonts/font1.woff2">
8+
<link rel="stylesheet" href="http://example.org/assets/fonts/font2.ttf">
9+
</head>
10+
<body>
11+
<script>
12+
var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"processed_extensions":["woff2","woff","ttf"],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script>
13+
<script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async>
14+
</script>
15+
</body>
1016
</html>

‎tests/Fixtures/inc/Engine/Common/PerformanceHints/Frontend/Subscriber/HTML/output_preload_fonts_w_relative_path.html‎

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,16 @@
11
<html>
2-
<head>
3-
<title>Test</title>
4-
<link data-rocket-preload as="font" href="/assets/fonts/font1.woff2" rel="preload">
5-
<link data-rocket-preload as="font" href="/assets/fonts/font2.ttf" rel="preload">
6-
<link rel="stylesheet" href="/assets/fonts/font1.woff2">
7-
<link rel="stylesheet" href="/assets/fonts/font2.ttf">
8-
</head>
9-
<body><script>var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script><script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async></script></body>
2+
<head>
3+
<title>
4+
Test</title>
5+
<link data-rocket-preload as="font" href="/assets/fonts/font1.woff2" rel="preload">
6+
<link data-rocket-preload as="font" href="/assets/fonts/font2.ttf" rel="preload">
7+
<link rel="stylesheet" href="/assets/fonts/font1.woff2">
8+
<link rel="stylesheet" href="/assets/fonts/font2.ttf">
9+
</head>
10+
<body>
11+
<script>
12+
var rocket_beacon_data = {"ajax_url":"http:\/\/example.org\/wp-admin\/admin-ajax.php","nonce":"96ac96b69e","url":"http:\/\/example.org","is_mobile":false,"width_threshold":1600,"height_threshold":700,"delay":500,"debug":false,"status":{"atf":true,"lrc":true,"preload_fonts":true,"preconnect_external_domain":true},"elements":"img, video, picture, p, main, div, li, svg, section, header, span","lrc_threshold":1800,"system_fonts":["serif","sans-serif","monospace","cursive","fantasy","system-ui","ui-serif","ui-sans-serif","ui-monospace","ui-rounded","Arial","Helvetica","Times New Roman","Times","Courier New","Courier","Georgia","Palatino","Garamond","Bookman","Tahoma","Trebuchet MS","Arial Black","Impact","Comic Sans MS"],"font_data":[],"processed_extensions":["woff2","woff","ttf"],"preconnect_external_domain_elements":["link","script","iframe"],"preconnect_external_domain_exclusions":[{"type":"attribute","key":"rel","value":"profile"},{"type":"attribute","key":"rel","value":"preconnect"},{"type":"attribute","key":"rel","value":"dns-prefetch"},{"type":"attribute","key":"async","value":""},{"type":"domain","value":"static.cloudflareinsights.com"}]}</script>
13+
<script data-name="wpr-wpr-beacon" src='http://example.org/wp-content/plugins/wp-rocket/assets/js/wpr-beacon.min.js' async>
14+
</script>
15+
</body>
1016
</html>

0 commit comments

Comments
 (0)