如何引入Google Places/Geocoding API避免Pagespeed未使用JS警告？

Pagespeed的这个警告，本质是它检测到脚本加载了，但页面初始渲染后没有立即调用相关API代码。试试下面几个解决办法：

1. 按需动态加载脚本，绑定用户行为触发 #

把原来提前加载的脚本改成只有用户需要使用地址补全时才加载，比如监听地址输入框的focus事件，用户点击输入框再加载API：

// 获取地址输入框元素
const addressInput = document.getElementById('your-address-input-id');

// 监听输入框聚焦事件
addressInput.addEventListener('focus', () => {
  // 检查Google API是否已经加载过
  if (!window.google) {
    // 创建script标签动态加载API
    const script = document.createElement('script');
    script.src = 'https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=places,geocoding&callback=initAutocomplete';
    script.async = true;
    document.body.appendChild(script);
  } else {
    // 已加载过，直接初始化自动补全
    initAutocomplete();
  }
});

// 初始化地址自动补全的函数
function initAutocomplete() {
  new google.maps.places.Autocomplete(addressInput, {
    // 可根据需求加配置，比如限制国家
    componentRestrictions: { country: 'us' }
  });
}

这样脚本只会在用户真正要输入地址时才加载，Pagespeed就不会判定它是“未使用的JS”了。

2. 移除未用到的库 #

如果你的地址自动补全功能只用到了Places API的Autocomplete，根本没调用Geocoding API的接口（比如解析坐标、反向地理编码），那直接把libraries=places,geocoding里的geocoding删掉，改成libraries=places——减少加载的冗余代码，也能消除警告。

3. 确认初始化代码的执行时机 #

如果你的地址输入框是隐藏状态（比如需要用户点击按钮才显示），那原来的初始化代码可能根本没执行，导致加载的API脚本没被调用。这种情况要把初始化逻辑移到输入框显示之后再执行，确保API代码真正被用到。

内容的提问来源于stack exchange，提问作者O'Niel