预加载资源提示到底该怎么用才有效？

___丽珍提问于 2026-03-03 21:59:21 阅读 17

优化

我最近在优化首屏加载速度，听说用 <link rel="preload"> 能提前加载关键资源，但试了之后发现浏览器根本不按预期加载，甚至有时候还报 warning 说资源没被使用。

比如我这样写：

<head>
  <link rel="preload" href="/fonts/brand.woff2" rel="external nofollow"  as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/js/main.js" rel="external nofollow"  as="script">
</head>

结果 font 确实预加载了，但 main.js 却没动静，控制台还提示 “The resource was preloaded but not used within a few seconds”。是不是我哪里写错了？

网络优化资源提示

我来解答赞 2 收藏

反馈

1 条解答

Mr-秋香 Lv1

这个问题其实挺典型的，大概率是你手写的路径和WordPress实际输出的路径不一致，导致浏览器以为这是两个文件。

WP里面用 wp_enqueue_script 加载JS时，默认都会带个 ?ver=xxx 的版本号参数。你预加载写的是 /js/main.js，但页面底部实际加载的可能是 /js/main.js?ver=1.0.0。在浏览器眼里这俩完全不是同一个东西，所以预加载的资源没被用上，自然就报警告了。

既然是WP站点，就别在 header.php 里手写 link 标签了，用钩子去动态获取真实路径最稳。直接把这段代码扔进你的 functions.php 或者插件里：

add_filter('script_loader_tag', function($tag, $handle) {

    // 这里的 'main' 换成你注册JS时用的 handle 名称

    if ('main' === $handle) {

        // 先把原有的 script 标签里的 src 抠出来，确保路径和版本号完全一致

        if (preg_match('/src=['"]([^'"]+)['"]/', $tag, $matches)) {

            $src = $matches[1];

            // 在 script 标签前面插入 preload 标签

            $preload_link = sprintf(

                '',

                esc_url($src)

            );

            $tag = $preload_link . "n" . $tag;

        }

    }

    return $tag;

}, 10, 2);

这样做的原理是拦截WP输出的script标签，把里面真实的URL（包含版本号）拿出来，生成一个一模一样的preload标签插在前面。这样浏览器预加载完，紧接着执行脚本，资源立马就能用上，警告自然也就消失了。字体也是同理，建议用 style_loader_tag 或者直接在 wp_enqueue_style 的时候处理，保证URL绝对匹配才是王道。

2026-03-04 13:46