如何优化Odoo网站的内容加载速度

问题根源 #

Odoo默认对图片、长列表等内容启用懒加载/滚动加载机制，目的是优化首屏加载速度，但会导致用户滚动时才逐步加载内容，影响体验。以下是针对性的优化方案：

1. 禁用图片懒加载 #

单图片设置 #

在网站构建器中编辑目标图片组件：

• 打开图片的设置面板，找到「懒加载」（Lazy Loading）选项，取消勾选即可让该图片在页面加载时一次性加载。

全局禁用（全站图片） #

如果需要所有图片都取消懒加载，可通过自定义代码实现：

1. 创建一个自定义模块，在其assets文件中添加以下JS代码：

document.addEventListener('DOMContentLoaded', function() {
    // 移除所有图片的lazy加载属性
    document.querySelectorAll('img[loading="lazy"]').forEach(img => {
        img.removeAttribute('loading');
    });
});

2. 安装该模块后，全站图片将不再延迟加载。

注意：全局禁用懒加载可能影响首屏加载速度，建议仅在内容量不大的页面使用，或配合图片压缩等优化手段。

2. 调整长列表/动态内容的加载逻辑 #

Odoo自带的列表组件（如产品列表、博客文章列表）默认采用无限滚动加载，可通过以下方式改为一次性加载：

组件设置调整 #

编辑目标列表组件：

• 找到「分页」或「加载方式」设置项，选择「显示全部内容」，或手动将「每页显示数量」设置为列表的总条目数。

代码强制加载（组件无设置项时） #

如果组件没有可视化设置选项，可通过前端JS强制触发全部加载：

// 针对Odoo无限滚动组件（如产品列表的.o_infinite_scroll容器）
const infiniteScrollEl = document.querySelector('.o_infinite_scroll');
if (infiniteScrollEl) {
    // 移除滚动加载监听
    infiniteScrollEl.removeEventListener('scroll', infiniteScrollEl._scrollHandler);
    // 强制加载所有内容
    if (typeof infiniteScrollEl._loadMore === 'function') {
        infiniteScrollEl._loadMore(true);
    }
}

3. 优化自定义/第三方组件的渲染逻辑 #

部分自定义或第三方模块的组件会采用延迟渲染（滚动到视口才初始化），需调整其触发条件：

• 检查组件模板是否带有data-delay-render等延迟渲染属性，移除该属性即可让组件在页面加载时立即渲染。
• 若组件通过JS控制渲染，修改逻辑为DOMContentLoaded事件触发时立即初始化，而非监听滚动事件。

4. 一次性加载的性能补充优化 #

为避免一次性加载导致首屏变慢，需配合以下优化：

• 图片压缩：在网站设置中开启「自动压缩图片」，减少图片文件大小。
• 静态资源合并压缩：进入「设置->技术->参数->系统参数」，设置：
  • web.asset_bundle = true
  • web.minify_js = true
  • web.minify_css = true
• 页面缓存：在网站设置中启用「缓存页面」，设置合适的缓存时长，降低服务器重复渲染压力。
• 内容拆分折中：若内容量极大（如上千条产品），建议折中处理——首屏加载前100条，剩余内容保留滚动加载，但优化加载动画减少用户感知。

最佳实践 #

• 优先使用可视化设置：尽量通过网站构建器的内置选项调整，避免直接修改代码，便于后续维护。
• 多场景测试：在不同设备（手机/桌面）和网络环境下测试页面加载速度与流畅度，平衡一次性加载和首屏性能。
• 性能监控：使用浏览器开发者工具的「Performance」面板分析页面加载瓶颈，针对性优化。

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