带宽用量说明

带宽使用理解

了解是什么导致了带宽使用,如何跟踪它,以及如何有效减少带宽使用。

带宽是指您的网站向访问者提供的数据总量。每次有人加载您的网站时,图像、视频、字体和代码等资源都会下载到他们的设备上。本指南将说明带宽在 Framer 中的工作原理、如何监控带宽以及如何优化项目以保持在限制范围内。

哪些因素影响带宽使用

在 Framer 中,带宽使用取决于访问者下载的数据量,而不是文件的存储大小。

主要影响因素包括:

  • 图像和媒体: 全屏或自动播放的视频、未压缩或无损图像格式以及高分辨率媒体通常是最大的带宽消耗来源。

  • 访问者: 访问您网站的人越多,资源被下载的次数就越多,总使用量也随之增加。

  • 字体和脚本: 这些资源也会按访问者下载,但通常在首次加载后会被缓存。

什么是站点模块?

站点模块是运行您的 Framer 网站所需的核心系统生成文件。这包括 JavaScript 模块、HTML 文件、CMS 数据、自定义代码以及其他关键依赖项。这些内容会计入您的每月带宽使用量。

如果超出带宽限制会怎样?

Framer 按月统计带宽使用情况。如果您超出套餐限制:

  • 第一个月: 您将收到一封电子邮件通知。

  • 第二个月: 系统会提示您升级到支持当前使用量的套餐。

  • 持续超额: 您的网站可能会被自动升级或收取超额费用。

如何追踪高带宽使用情况

使用 Framer 仪表板和浏览器开发者工具来识别高带宽消耗的资源。

  1. 查看 Framer 仪表板,它会按文件名列出主要的带宽消耗资源。

  2. 打开 Chrome 开发者工具 → Network(网络)选项卡。

  3. 执行强制刷新(CMD/CTRL + Shift + R)以模拟首次访问。

  4. Size(大小) 列进行排序,以识别大体积资源。

  5. 将这些资源与仪表板中的列表进行匹配(例如 Cw4grH0hI3nRYQLiC53MUuRL0.mp4)。

Chrome DevTools Network 选项卡显示多个 AVIF 视频文件请求。界面显示从 500ms 到 6,000ms 的时间线,带有网络活动条。下方是一个表格,包含 Name、Status、Type、Initiator、Size 和 Time 列。多行显示 YTUCK2gRZ8uyrWmMJAUnoDaimuo.png 文件,状态为 200,类型为 AVIF,发起者为 index.js:1,大小为 348 kB,加载时间在 33ms 到 513ms 之间。Size 列已高亮,表示可点击按文件大小从大到小排序。

高带宽使用的常见原因

了解导致带宽激增的典型原因可以帮助您更高效地缩小排查范围。

  • Framer 托管的视频,尤其是全屏、自动播放或未优化的视频。

  • 无损图像或未优化的格式 也可能是一个因素。虽然 Framer 会自动优化大多数图像,但在某些(不常见)情况下,我们仍可能得到过大的图像。

  • 项目中的自定义代码 —— 例如代码覆盖和代码组件 —— 可能会加载额外资源。如果管理不当,这些隐藏资源可能会显著增加您的带宽使用量。

降低带宽使用的最佳实践

一旦确定了原因,以下实用建议可以帮助您降低带宽使用并提升网站性能。

  • 优化视频: 上传封面图像,以便视频仅在接近视口时才加载。如果您使用的是长视频或高分辨率视频,最好将其托管在 YouTube 或 Vimeo 等外部平台。尽量将背景视频控制在 30 秒以内,特别是当它们以全屏自动播放时。您可以在 本文档 中找到更多优化建议。

  • 图像分辨率设置为“自动”: 确保在图像设置面板中将图像分辨率设置为“自动”,以尽可能减小图像大小。除非看到图像出现瑕疵,否则避免使用“自动(无损)”。

  • 管理自定义代码: 审查您添加的任何代码覆盖或组件,查找可以删除的不必要的脚本或嵌入资源。值得注意的是,从非 Framer 域拉取资源的 <script> 标签不会计入您的 Framer 带宽。

  • 监控进展: 应用更改后进行监控。带宽使用量会在每个月的 1 号重置,因此您可以清楚地评估优化措施是否有效。

如果您在执行上述步骤后仍然遇到高带宽使用问题,并认为存在异常,请随时通过 我们的联系页面 联系 Framer 支持团队。

Create a free website with Framer, the website builder loved by startups, designers and agencies.