亲爱的梨粉们,看这里吖!!!
更多精品文章,请查看博客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 小)。
顺便说一下