搜索全站
性能优化 10 分钟阅读

首页加载大量外部请求(Google 字体、Gravatar)拖慢速度

首页明明没几张大图,加载却要好几秒?多半是 Google Fonts、Gravatar 这些国外请求超时拖慢的。本文教你把字体和头像本地化、公共库改为本地引用、第三方统计和客服脚本异步加载,一次性干掉拖后腿的外部请求,国内访客打开首页不再被卡住。

U
UFO_PF 2026-10-10 · 阅读 10 分钟
首页 性能优化
阅读提示
本文约 3,728 字,预计阅读 10 分钟。文中命令与配置均经过实测,可直接参考执行。

引言

用测速工具测首页,最扎眼的往往不是图片多大,而是一条条红色的「等待时间超长」请求。点开看域名,全是 fonts.googleapis.com、secure.gravatar.com、ajax.googleapis.com 这类国外服务。国内直连这些域名要么被墙、要么绕路,一个请求卡上两三秒很常见,而浏览器对同一域名的并发连接有限,这些卡住的请求还会阻塞后面的资源加载。结果是:你本地服务器的 HTML 早就返回了,页面却迟迟不显示完整,用户看到的是白屏或者残缺的布局。更隐蔽的是,Google Fonts 的 CSS 里还嵌了字体文件请求,Gravatar 头像每条评论一个请求,一个热门文章底下几十条评论就是几十个超时请求。这篇教你把这几类外部请求统统落地到本地,首页立刻轻快。

故障原因分析

  1. Google Fonts 被墙或绕路。主题默认调用 fonts.googleapis.com 加载 CSS,再拉 fonts.gstatic.com 的字体文件,两个域名国内访问都不稳。
  1. Gravatar 头像超时。评论头像默认来自 secure.gravatar.com,国内连接时常超时,而头像数量与评论数成正比,评论一多请求就爆炸。
  1. Google 托管的公共库。不少老旧主题用 ajax.googleapis.com 加载 jQuery,或引用 Google Analytics、reCAPTCHA,同样会卡。
  1. 第三方统计与客服脚本。百度统计、CNZZ、在线客服悬浮窗、广告联盟代码会在首屏同步加载,拖慢关键渲染路径。
  1. 缺少本地字体与 icon 方案。主题用了 Font Awesome、图标字体,若也从国外 CDN 拉取,同样受牵连。

分步解决方案

方法一:本地化 Google Fonts(推荐)

最彻底的做法是把字体文件下载到自己的服务器,用本地的 @font-face 或本地 CSS 引用。步骤如下:在浏览器打开 fonts.googleapis.com 生成的 CSS 链接,把里面的 @font-face 规则复制出来,把 url(...) 的域名替换成你服务器上的字体路径,再把字体文件(.woff2)下载到 wp-content/uploads/fonts/。然后在 functions.php 里移除主题的 Google Fonts 请求并加入本地样式:

// functions.php
add_action( 'wp_enqueue_scripts', function () {
    // 移除主题注册的 Google Fonts 句柄,句柄名视主题而定
    wp_dequeue_style( 'twentytwentyone-fonts' );
    wp_deregister_style( 'twentytwentyone-fonts' );
    // 改为加载本地字体样式
    wp_enqueue_style( 'local-fonts', get_stylesheet_directory_uri() . '/fonts/local-fonts.css' );
}, 100 );

主题句柄名各不相同,可以在浏览器 F12 的 Network 里看到实际加载的字体 CSS 文件名,或搜索主题源码里的 googleapis.com 定位。若不想手动折腾,也可用「Local Google Fonts」这类插件一键下载并本地托管,注意仍要在国内访问验证效果。

方法二:本地 CSS 内声明字体并配合 font-display

把字体文件放本地后,用 font-display: swap 让文字先用系统字体显示,字体加载完再替换,避免文字长时间空白:

/* functions.php 输出到页面的本地字体样式 */
@font-face {
  font-family: 'CustomFont';
  src: url('/wp-content/uploads/fonts/customfont.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
body { font-family: 'CustomFont', -apple-system, "Microsoft YaHei", sans-serif; }

方法三:替换 Gravatar 为国内或本地头像

用 get_avatar 过滤器把头像域名换成国内镜像,比如 cravatar.cn:

// functions.php
add_filter( 'get_avatar_url', function ( $url ) {
    return preg_replace( '/https?:\/\/(www\.)?gravatar\.com/', 'https://cravatar.cn', $url );
}, 10, 1 );

如果不想依赖任何第三方,可以干脆禁用头像显示,或改成读取本地默认头像图片,从根上消除请求。

方法四:把公共库改成本地引用

jQuery 等公共库从 Google 拉取,改为本地引用。先确认主题或插件注册时的句柄,然后在 functions.php 里重写:

// functions.php 示例:把 Google 托管的 jQuery 换成本地
add_action( 'wp_enqueue_scripts', function () {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', get_stylesheet_directory_uri() . '/js/jquery.min.js', array(), '3.7.1', true );
    wp_enqueue_script( 'jquery' );
}, 100 );

WordPress 自带打包了 jQuery,一般直接用 wp_enqueue_script('jquery') 走本地即可,不必引用外链。

方法五:延迟或异步加载第三方脚本

统计、客服、广告脚本尽量改为延迟加载,别阻塞首屏。用 defer 或 async:

// functions.php
add_filter( 'script_loader_tag', function ( $tag, $handle ) {
    $async_handles = array( 'baidu-analytics', 'kefu-widget' );
    if ( in_array( $handle, $async_handles, true ) ) {
        return str_replace( ' src=', ' async src=', $tag );
    }
    return $tag;
}, 10, 2 );

方法六:用浏览器工具验证效果

F12 打开 Network,按 Domain 分组,看还有没有 googleapis.com、gstatic.com、gravatar.com 的请求。PageSpeed Insights 的「减少第三方代码的影响」和「预连接」提示也会告诉你还剩哪些外部域名。全部清干净后,首屏时间通常会有明显改善。

常见踩坑点

  1. 只改 CSS 没改字体文件地址。@font-face 里的 url 还指向 gstatic.com,等于没本地化,要逐条替换。
  1. 移除字体的钩子写错句柄名。句柄不对,wp_dequeue_style 无效,Google Fonts 依然加载,需从源码或 Network 里确认真实句柄。
  1. 头像替换只顾前台没顾后台。后台评论列表也用 Gravatar,若只想前台生效,可在过滤器里加 is_admin() 判断或使用 get_avatar_url 的上下文参数。
  1. 一刀切异步所有脚本。有些脚本(如依赖 jQuery 的交互)异步后会执行顺序错乱,导致按钮失灵,按需选择 async/defer 并测试交互。
  1. 忽略了字体子集。中文字体文件巨大,直接本地化反而更重,建议只保留实际用到的字重和字库子集,或干脆用系统字体。

总结

首页加载大量外部请求拖慢速度,问题不在你的服务器,而在那些稳定连不上的国外域名。解决之道是「能本地就本地,能延迟就延迟」:把 Google Fonts 下载到本地并用 font-display: swap 平滑显示,把 Gravatar 换成国内镜像或本地默认头像,把公共库改为本地引用,再把统计和客服脚本异步化。做完后用浏览器 Network 面板逐一确认这些域名已经消失。这些改动不花一分钱,却能省下最关键的几秒钟首屏时间,对国内访客的体验提升尤其明显,也是性价比最高的一批 WordPress 前端优化动作。

U
UFO_PF作者

专注 WordPress 生态的实战作者,内容以「可复制、可验证」为第一原则。

留下你的想法

邮箱地址不会被公开。带 * 的为必填项。