登录

会员权益

获取需求

查看名片

专属客服

尊贵标识

VIP低至1.5U/天

如何给Elementor网站有效提升速度?13个黄金tips赶快利用起来!(4000字)

分享

2024-01-01

大家好,我是雪梨~跟大家说说如何有效提升你的Elementor网站速度。

亲爱的梨粉们,看这里吖!!!


更多精品文章,请查看博客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 小)。


顺便说一下

免责声明:
详情

Please Play Responsibly:

Casino Games Disclosure: Select casinos are licensed by the Malta Gaming Authority. 18+