亲爱的梨粉们，看这里吖！！！

更多精品文章，请查看博客shelleydigital.com

大家好，我是雪梨～

跟大家说说如何有效提升你的Elementor网站速度。

希望这会对你有所帮助（如果您有疑问，请在文章的最后随时私信我们）。

1激活Elementor Experiments

激活 Elementor 实验

前往 Elementor → 设置 → 实验，然后激活以下选项：

图片来源：谷歌截图

内联字体图标– 字体图标（即 Font Awesome + eicons）将作为 SVG 内联加载，而无需加载整个库。这意味着 PSI 中的 CSS 请求和渲染阻塞 CSS 问题更少。

延迟加载背景图像– 您最初必须使用带有“lazy-bg”帮助程序类（或类似）的优化插件，并将其添加到您的背景图像中。这更容易。

优化 DOM 输出– 地址通过删除不必要的 div 包装器来避免 PSI 中的 DOM 大小过大项（elementor-inner、elementor-row 和 elementor-column-wrap）。

改进的资源加载– 仅在页面上使用灯箱和全屏库、对话框库和共享链接库时加载它们，从而减少您网站上的 JavaScript .

改进的 CSS 加载– 仅加载正在使用的小部件 CSS 和动画（同时加载它们），从而减少网站上的 CSS 和渲染阻塞资源。

使用数据共享– 与插件开发人员共享数据需要少量用于发送数据的服务器资源。因此，我建议在所有插件中禁用此功能。

图片来源：谷歌截图

该测试是在“延迟加载背景图像”发布之前完成的（这减少了图像请求）

2将CSS打印方法更改为“外部文件”

虽然有优点和缺点缺点对于每个外部 CSS 文件都可以缓存，并且它们不会增加 HTML 的大小。您可以测试您网站的结果，但我通常推荐外部文件。

图片来源：谷歌截图

3禁用默认的谷歌字体

在接下来的几个步骤中，我们将在预加载时仅加载您需要的字体（本地使用 woff2）。第一步是禁用 Google Fonts 和 Font Awesome 图标。

图片来源：谷歌截图

更改字体/CSS 设置时，您应该重新生成 CSS 和 CSS Elementor 的工具设置中的数据，然后在瀑布图（例如 GTmetrix 或 Chrome 开发工具）中测试结果。您可以立即判断字体是否是本地托管的，使用更快的 woff2 格式，GTmetrix 中的棕色条表示阻塞时间，可以通过预加载来减少阻塞时间。

图片来源：谷歌截图

4使用woff2在本地托管字体

如果 fonts.gstatic.com 或其他第三方字体加载到您的网站上，请将它们托管在本地。

第 1 步：转至 Google Fonts 网站（或其他字体网站）并下载您的字体字体。确保仅选择所需的权重，因为过多的权重会增加文件大小。

第 2 步：使用 CloudConvert 将它们转换为 woff2（woff2 文件为 < a i=4>比 .ttf 小）。

顺便说一下