Shopify代码片段放置位置的性能问题及解决方案咨询

你的思路完全可行——把代码留在<head>里，通过JS在合适时机注入<body>，既能解决Shopify自动把head里代码移去body的问题，又能保住移动端的性能分数。

不过你给的代码可以优化下，避免DOM未加载时找不到body的情况，同时提升加载性能：

<script type="text/javascript">
// 等DOM结构加载完成再执行，防止找不到body元素
document.addEventListener('DOMContentLoaded', function() {
    const script = document.createElement('script');
    script.src = 'http://yourdomain.com/your_script.js';
    script.type = 'text/javascript';
    // 加defer让脚本异步加载，不阻塞页面渲染
    script.defer = true;
    document.body.appendChild(script);
});
</script>

如果你的代码片段不是外部JS，而是包含HTML、CSS和内联JS的完整代码块，直接组装DOM注入更方便：

<script type="text/javascript">
document.addEventListener('DOMContentLoaded', function() {
    const container = document.createElement('div');
    // 把你的HTML、CSS、JS直接写在这里
    container.innerHTML = `
        <style>
            /* 你的CSS代码 */
            .custom-block { padding: 10px; background: #f5f5f5; }
        </style>
        <div class="custom-block">
            <!-- 你的HTML内容 -->
            <p>自定义内容</p>
        </div>
        <script>
            /* 你的内联JS代码 */
            console.log('自定义脚本执行');
        <\/script>
    `;
    document.body.appendChild(container);
});
</script>

关键注意点： #

• 用DOMContentLoaded触发：确保页面核心DOM渲染完成后再注入代码，不会阻塞关键渲染路径——这也是直接放body末尾性能掉分的核心原因：末尾的脚本可能会阻塞渲染，而这个时机注入不会。
• 修正域名拼写：你原代码里的yourdomian是拼写错误，要改成yourdomain。
• 测试验证：用Lighthouse重新跑移动端性能分，同时在开发者工具Elements面板确认代码是否正确注入到body里。

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