已添加UTF-8 charset标签，Google翻译CDN页面仍遇Page Insights字符编码报错

一、解决Google Page Insights字符集错误 #

• 把<meta charset="UTF-8">放在<head>标签的最顶部，确保它是head内第一个元素，前面不能有任何空白、注释或其他标签。示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content">
    <!-- 其他标签放在charset声明之后 -->
</head>

• 检查服务器HTTP响应头，确保返回Content-Type: text/html; charset=UTF-8。和meta标签配合形成双重保障，避免页面前1024字节未包含charset声明的问题。
• 移除<meta charset="UTF-8">标签前的多余缩进或空白字符，保证该标签落在页面前1024字节范围内。

二、实现默认从英文切换到西班牙语 #

• 确保页面中存在翻译组件的挂载容器，必须放在翻译脚本之前：

<div id="google_translate_element"></div>

• 替换原定时器的10ms等待时间为2000ms（可根据实际加载速度调整），因为Google翻译的DOM元素加载需要时间：

function googleTranslateElementInit() {
    var translator = new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');

    setTimeout(function () {
        var select = document.querySelector('.goog-te-combo');
        if (!select) {
            console.log("翻译下拉框未加载完成");
            return;
        }
        select.value = 'es';
        // 触发带冒泡特性的change事件，确保Google翻译脚本捕获到
        select.dispatchEvent(new Event('change', { bubbles: true }));
    }, 2000);
}

• 更可靠的替代方案：用MutationObserver监听下拉框生成，避免定时器的不确定性：

function googleTranslateElementInit() {
    new google.translate.TranslateElement({ pageLanguage: 'en' }, 'google_translate_element');

    const observer = new MutationObserver((mutations) => {
        const select = document.querySelector('.goog-te-combo');
        if (select) {
            select.value = 'es';
            select.dispatchEvent(new Event('change', { bubbles: true }));
            observer.disconnect(); // 找到元素后停止监听
        }
    });

    observer.observe(document.body, { childList: true, subtree: true });
}

内容的提问来源于stack exchange，提问作者Anurag