优化网站性能和速度
Framer 会自动应用多种优化措施以保持网站的快速运行，但您还可以采取额外步骤来提升性能。如果您的网站速度仍不如预期，请尝试以下建议。
图片
Framer 会自动优化大多数图片，因此你无需手动调整尺寸或将图片转换为 WebP 格式。
常规图片：直接上传原始图片，并将分辨率设置为“自动”。Framer 会为你完成 WebP 转换和尺寸调整。
SVG 图片：通过创建一个画框并将 SVG 文件拖入其中来上传。
了解更多详情，请参阅 Framer 中图片是如何优化的。
字体
Framer 有助于优化字体加载，以提升性能和可读性。请遵循以下建议以获得最佳体验。
使用 Light 到 Extra Bold 之间的字重：这可以防止字体加载时文本消失，得益于
font-display: swap的支持。优先使用 Google Fonts：它们加载更快，因为仅下载必要的字符。
重新上传 2023 年 11 月之前添加的自定义字体：这会将其转换为更高效的 WOFF2 格式，减小文件大小。
了解更多详情，请参阅 Framer 中字体是如何优化的。
视频
视频可以增强你的网站效果，但必须经过优化以避免造成卡顿。以下是一些最佳实践：
使用 YouTube 或 Vimeo：这些平台会根据网络速度和屏幕尺寸自动调整视频质量，而 Framer 始终以原始分辨率提供视频。你可以使用插入面板中的 YouTube 和 Vimeo 组件。
避免自动播放：自动播放会占用额外带宽，拖慢其他页面元素。
使用静音、循环且无控件的视频：这类视频采用懒加载，仅在可见时播放，节省带宽。
了解完整细节，请参阅 Framer 中视频是如何优化的。
优化
确保你的网站已优化，可提升加载速度和整体性能。请按照以下步骤检查网站状态：
打开 菜单 → 网站设置 → 版本。
确认最新版本标记为 已优化。
自定义代码
Framer 允许你在网站的 head 或 body 中添加自定义代码。请谨慎使用，以免影响性能。
仅在必要时添加代码：例如，仅在使用 MailChimp 表单的页面上加载其脚本。
使用项目设置 → 自定义代码 添加全站脚本，页面设置 → 自定义代码 添加特定页面脚本。
将
<script>标签放在<body>标签末尾，或使用defer。
如果脚本需要尽快加载，请使用
async而非defer。避免两者都不使用，否则可能拖慢网站。内联脚本及带有type="module"的脚本已默认优化。
动效
动画可以提升用户体验，但需谨慎使用以确保最佳性能。
对网站顶部的关键元素使用出现效果：这些效果在 JavaScript 加载前即生效。
避免对这些元素使用滚动动画效果。
阴影与模糊
阴影和模糊可为设计增添层次感，但可能影响性能。
适度使用：阴影和模糊可能会拖慢动画和滚动表现，即使不影响初始加载时间。
保持模糊值低于 10 以维持良好性能。
外部嵌入与 iframe
嵌入第三方内容可能影响网站速度。添加外部元素时请谨慎。
添加 HubSpot 表单或 Spline 3D 插图等元素可能会拖慢网站。Framer 已对嵌入内容启用懒加载，但仍需加载额外代码。建议在副本站点中尝试移除这些元素，查看性能是否改善。
若按上述步骤操作后仍存在问题，请访问 我们的联系页面 获取进一步帮助。