如何优化你的Elementor网站速度？13个实用技巧等你来尝试！（4000字）
亲爱的梨粉们，别错过这里啊！！！
更多精彩文章，请查看博客shelleydigital.com
大家好，我是雪梨～
今天来和大家分享一下如何有效提升你的Elementor网站速度。
希望这些建议对你有所帮助（如果有疑问，请随时在文章末尾私信我们）。
激活Elementor实验功能
前往Elementor → 设置 → 实验，然后激活以下选项：
图片来源：谷歌截图
内联字体图标– 将Font Awesome + eicons字体图标作为SVG内联加载，减少CSS请求和渲染阻塞。
延迟加载背景图像– 使用带有“lazy-bg”帮助程序类的优化插件，轻松实现背景图像的延迟加载。
优化DOM输出– 通过删除不必要的div包装器，避免在PSI中产生过大的DOM项（elementor-inner、elementor-row和elementor-column-wrap）。
改进资源加载– 仅在需要时加载灯箱、全屏库、对话框库和共享链接库，减少JavaScript加载。
改进CSS加载– 仅加载正在使用的小部件CSS和动画，减少网站上的CSS和渲染阻塞资源。
使用数据共享– 禁用插件中的数据共享功能，减少服务器资源使用。
图片来源：谷歌截图
这些测试是在“延迟加载背景图像”发布之前完成的，有效减少了图像请求。
将CSS打印方法更改为“外部文件”
虽然每种方法都有优缺点，将外部CSS文件打印方法更改为“外部文件”可以缓存每个文件，不会增加HTML大小。你可以测试你的网站效果，但我通常推荐使用外部文件。
图片来源：谷歌截图
禁用默认的谷歌字体
在接下来的几个步骤中，我们将在预加载时仅加载您需要的字体（本地使用woff2）。第一步是禁用Google Fonts和Font Awesome图标。
图片来源：谷歌截图
更改字体/CSS设置后，重新生成CSS和CSS Elementor的数据，然后在瀑布图中测试结果。您可以立即判断字体是否是本地托管的，使用更快的woff2格式，GTmetrix中的棕色条表示阻塞时间，可以通过预加载来减少阻塞时间。
图片来源：谷歌截图
使用woff2在本地托管字体
如果fonts.gstatic.com或其他第三方字体加载到您的网站上，请将它们托管在本地。
第1步：转至Google Fonts网站（或其他字体网站）并下载您需要的字体。确保只选择所需的权重，以减小文件大小。
第2步：使用CloudConvert将它们转换为woff2格式（woff2文件比.ttf小）。
顺便说一下💡
在WordPress建站｜如何在WordPress中添加自定义字体？中，给大家分享如何添加自己喜欢的自定义字体。
woff2格式相比于TTF格式更为紧凑，文件尺寸更小。WOFF2（Web Open Font Format 2）是一种经过优化的字体文件格式，专为在网页上加载字体而设计，以提供更高的性能和更快的加载速度。
WOFF2通过采用先进的压缩算法，能够显著减小字体文件的大小，而不影响字体质量。这对于网页性能和用户体验而言非常重要，特别是对于移动设备和慢速网络连接的用户。
因此，在网页上使用自定义字体时，推荐使用WOFF2格式，以确保更高效的加载速度和更好的性能。这种格式的广泛支持也使其成为当前网页设计中常用的字体格式之一。
第3步：上传字体作为自定义字体。如果您没有使用Elementor Pro，OMGF会在您点击“保存并保存”时自动下载它们。在设置中进行“优化”。它还可以提前加载字体（预加载它们），或者您可以选择根本不加载它们。
图片来源：谷歌截图
预加载字体
最后一步是预加载字体首屏。
复制它们的文件名，然后预加载它们，您可以在大多数优化插件中执行此操作。如果您使用eicons和Font Awesome Icons，您还应该预加载它们。预加载字体后，您应该会看到阻塞时间减少（在瀑布图中显示为棕色条）。
图片来源：谷歌截图
检查您的控制台报告是否有错误，因为预加载未使用的字体会降低性能。
图片来源：谷歌截图
将Google字体加载保留为“Swap”
将Google字体加载设置为“swap”修复确保文本在网络字体加载期间保持可见。但是，Font Awesome建议font-display: block，因为它使它们非渲染阻塞。您还可以更改Elementor Pro自定义字
谷嗨科技！在跨境电商领域，从市场调研到选品，再到站内运营和销量提升，谷嗨科技都拥有成熟的运营方案与策略。别再为跨境之路感到迷茫，谷嗨科技带你走向成功！
