Post by account_disabled on Feb 11, 2024 23:32:49 GMT -5
内容索引 使用 Elementor 构建的网站可以非常美观且实用，但如果您不遵循一些良好的做法，网站也会非常慢。网站的速度对于为用户提供良好的体验和提高在搜索引擎上的排名至关重要。 在本文中，我将向您展示如何通过 24 个步骤来加速使用 Elementor 构建的网站，从选择主题和托管，到优化图像和插件，再到使用缓存和 CDN 等工具。通过遵循这个完整的指南，您将能够使您的网站更快、更高效，而无需牺牲设计和内容的质量。 在开始本教程之前，我强烈建议使用 Chrome 开发工具 + KeyCDN 的性能测试网络报告来测试您的网站。这些可以告诉您 Elementor 网站是否由于 CSS/JavaScript、图像、字体或 TTFB（这也是 核心 中LCP 的 40% ）而变慢。 步骤 1 到 4 涉及实验，步骤 3 到 6 涉及字体，步骤7 到 14涉及CSS/JavaScript ，步骤 15 到 17 涉及图像，TTFB/内存使用情况主要与步骤 18 到 20 中的“托管/CDN”相关。 。 确实，Elementor 比 Gutenberg 添加了更多的
CSS/JavaScript。但是，只有当您安装额外的 Elementor 插件并且没有正确优化您的网站时，这才会成为问题。然后你检查你的覆盖率报告 并看到 这个。缓慢的主机/CDN/缓存插件也无济于事。 发展您的业务 医生网络机构 - 网站创建 SEO SEM 社会服务 医生网 - 免费电话号码 沙特阿拉伯电报号码 索取免费报价 1.启用ELEMENTOR实验 转到 Elementor → 设置 → 实验，然后启用以下选项： 元素实验2 内联字体图标– 字体图标（例如 Font Awesome + eicons）将作为 SVG 内联加载，而无需加载整个库。这意味着 PSI 中的 CSS 请求和 CSS 渲染阻塞问题更少。 背景图像的延迟加载- 此功能激活背景图像的延迟加载。 优化的 DOM 输出– 通过删除不必要的 div 包装器（elementor-inner、Elementor-row 和 解决了避免 PSI 中 DOM 大小过大的问题 。 改进的资源加载- 仅在页面上使用时加载灯箱和全屏库、对话框库和共享链接库，从而减少网站上的 JavaScript。 改进的 CSS 加载– 仅在使用它们的地方加载小部件 CSS 和动画（内联加载），从而减少网站上的 CSS 和渲染阻塞资源。 共享使用数据– 与插件开发人员共享数据需要少量用于发送数据的服务器资源。
因此，我建议您在所有插件中禁用此选项。 Elementor 无需实验字体优化 2.将CSS打印方式更改为“外部文件” 虽然各有 利弊 ，但外部 CSS 文件可以被缓存并且不会增加 HTML 的大小。您可以在自己的站点上测试结果，但我通常建议使用外部文件。 如何加快使用 Elementor 创建的网站速度：24 个步骤的完整指南图片 1 Elementor css打印方法 3.禁用默认字体/图标 在接下来的两个步骤中，我们将在预加载时仅加载必要的字体（本地使用 woff2）。第一步是禁用 Google Fonts 和 Font Awesome 图标。 Elementor 禁用谷歌字体 字体很棒 禁用默认字体 Elementor 4. 使用 在本地托管字体 如果您的网站上加载了 fonts.gstatic.com 或其他第三方字体，请将它们托管在本地。第 1 步：转到 Google Fonts网站 （或其他字体网站）并下载您的字体。请务必仅选择您需要的权重，因为过多的权重会增加文件大小。 步骤 2：使用CloudConvert将它们转换为 文件小于.ttf ）。 步骤 3：将字体加载为自定义字体（Tony Teaches Tech 有 视频教程）。如果您不使用 Elementor Pro， 当您在设置中单击“保存并优化”时，OMGF会自动下载它们。它还可以提前加载字体（预加载它们），或者您可以选择根本不加载它们[屏幕截图]。 如果您需要进一步说明 有另一个 视频教程。
CSS/JavaScript。但是，只有当您安装额外的 Elementor 插件并且没有正确优化您的网站时，这才会成为问题。然后你检查你的覆盖率报告 并看到 这个。缓慢的主机/CDN/缓存插件也无济于事。 发展您的业务 医生网络机构 - 网站创建 SEO SEM 社会服务 医生网 - 免费电话号码 沙特阿拉伯电报号码 索取免费报价 1.启用ELEMENTOR实验 转到 Elementor → 设置 → 实验，然后启用以下选项： 元素实验2 内联字体图标– 字体图标（例如 Font Awesome + eicons）将作为 SVG 内联加载，而无需加载整个库。这意味着 PSI 中的 CSS 请求和 CSS 渲染阻塞问题更少。 背景图像的延迟加载- 此功能激活背景图像的延迟加载。 优化的 DOM 输出– 通过删除不必要的 div 包装器（elementor-inner、Elementor-row 和 解决了避免 PSI 中 DOM 大小过大的问题 。 改进的资源加载- 仅在页面上使用时加载灯箱和全屏库、对话框库和共享链接库，从而减少网站上的 JavaScript。 改进的 CSS 加载– 仅在使用它们的地方加载小部件 CSS 和动画（内联加载），从而减少网站上的 CSS 和渲染阻塞资源。 共享使用数据– 与插件开发人员共享数据需要少量用于发送数据的服务器资源。
因此，我建议您在所有插件中禁用此选项。 Elementor 无需实验字体优化 2.将CSS打印方式更改为“外部文件” 虽然各有 利弊 ，但外部 CSS 文件可以被缓存并且不会增加 HTML 的大小。您可以在自己的站点上测试结果，但我通常建议使用外部文件。 如何加快使用 Elementor 创建的网站速度：24 个步骤的完整指南图片 1 Elementor css打印方法 3.禁用默认字体/图标 在接下来的两个步骤中，我们将在预加载时仅加载必要的字体（本地使用 woff2）。第一步是禁用 Google Fonts 和 Font Awesome 图标。 Elementor 禁用谷歌字体 字体很棒 禁用默认字体 Elementor 4. 使用 在本地托管字体 如果您的网站上加载了 fonts.gstatic.com 或其他第三方字体，请将它们托管在本地。第 1 步：转到 Google Fonts网站 （或其他字体网站）并下载您的字体。请务必仅选择您需要的权重，因为过多的权重会增加文件大小。 步骤 2：使用CloudConvert将它们转换为 文件小于.ttf ）。 步骤 3：将字体加载为自定义字体（Tony Teaches Tech 有 视频教程）。如果您不使用 Elementor Pro， 当您在设置中单击“保存并优化”时，OMGF会自动下载它们。它还可以提前加载字体（预加载它们），或者您可以选择根本不加载它们[屏幕截图]。 如果您需要进一步说明 有另一个 视频教程。