流行的 WordPress 页面构建器插件 Elementor 宣布了一项更新，专注于提供更快的页面加载。 此更新提高了 JavaScript 和 CSS 文件的交付效率。 Elementor 3.2 版中的这些更改有望提高 Core Web Vitals 分数。
根据 Elementor 的公告：
“该公司优化了开发周期，并针对特定性能领域制定了五项计划，例如优化的资产加载、JavaScript/CSS 库、优化的内部 JavaScript 和 CSS、优化的后端和渲染流程以及更精简的代码输出。
Elementor 的计划确保性能的各个方面都得到显着改善，无论是正面还是背面。”
Elementor 还为发布者引入了一种方法来指示如何更有效地加载 Google 字体：
“新的 Google 字体加载功能可个性化用户的加载体验，使他们能够修改 Elementor 加载 Google 字体的方式。 Elementor 仪表板设置提供自动、交换、阻止、可选和回退。”
核心网络生命力
Core Web Vitals 是旨在衡量移动设备上实际用户的网页体验的指标。 测量结果由选择提供信息的 Chrome 用户收集，这些信息随后作为 Chrome 用户体验 (CrUX) 报告收集。
正是这些数据用于为网站创建 Core Web Vitals 分数，这反过来将成为 2021 年 6 月的排名信号。
在快速服务器上托管网站不会提高核心 Web Vitals 分数，因为对核心 Web Vitals 分数产生负面影响的问题与网站的编码方式有关。
从快速的 Web 主机更快地交付未优化的代码并不能解决必须在移动设备上下载和呈现的未优化代码造成的瓶颈。
这就是为什么网站模板和页面构建器的制造商必须让用户依赖的代码更有效率。
Elementor 宣布的是他们再次努力更有效地交付网页代码，以帮助发布商为他们的网站访问者提供更好的用户体验并帮助发布商更好地排名。
为什么 JavaScript 和 CSS 会出现问题
JavaScript 和级联样式表 (CSS) 是分别为网页提供功能和视觉样式的文件。 JavaScript 文件可以使联系表单工作，并且层叠样式表告诉浏览器使用什么颜色和字体（以及其他与视觉样式相关的数据）。
当一个人访问网页时，浏览器将下载这些文件以创建（呈现）网页。 但是每次遇到 JavaScript 或 CSS 文件时，网页渲染都会停止。 这就是为什么它们被称为渲染阻塞文件。
虽然有一些编码策略可以延迟下载文件或并行下载文件（与其他文件同时下载），但仍然需要激活这些文件（可以这么说）才能完成网页的呈现。
理想的方法是尽量减少需要下载的文件数量。 最好的方法是下载创建给定网页所需的绝对最少数量的 JavaScript 和 CSS。
例如，如果网页不包含联系表单，则无需下载创建联系表单所需的文件。
这种下载 JavaScript 和 CSS 的更有效方法称为条件加载。 这意味着在需要时下载它们，如果不需要则不下载。
这就是 Elementor 宣布的部分内容。
Elementor 现在更高效
Elementor 改变的是仅在需要时才下载许多 JavaScript 文件。 这称为有条件地加载文件。 Elementor 向我证实，他们也计划在不久的将来开始有条件地加载 CSS。
根据 Elementor：
“Lightbox、Screenful、Dialog 和 Share 链接库都是有条件加载的……”
Elementor 还宣布：
“电子图标 CSS 文件也被分成两个独立的库——前端和后端——在任何给定的页面加载时最多可节省 50KB。”
另一个改进是，仅影响作为编辑的站点访问者的 CSS 不会为所有用户自动加载。 这意味着如果网站访问者不是编辑器，他们的浏览器将下载更少的文件来渲染网页，从而节省 17 KB。
Elementor 团队与我分享了这一点：
“我们的研发团队和我们的 SEO 团队在过去 6 个月里一直致力于这个项目，以确保 Elementor 与即将到来的 Web Vitals Google 算法更改完全兼容。 我们一直专注于减少 DOM 元素的数量、渲染过程优化、动态资产加载等等。”
Elementor 发布视频以改善核心网络生命力
除了代码更改之外，Elementor 还采取了额外的措施来提供 YouTube 课程，以帮助他们更好地了解构建网站的最佳实践，从而提供更快的用户体验。
“为了指导人们完成这次更新，我们制作了一些优秀的教育材料，包括关于提高网站性能的新课程。 这将着眼于整个过程，因为性能取决于多种因素，而不仅仅是您选择的网站构建平台。”
Elementor 采取主动
看到越来越多的公司加紧进行这些重要的更新是令人鼓舞的。 Elementor 的公告对于插件的用户来说是一个令人兴奋的发展，并给从插件到主题制造商的 WordPress 生态系统的其他部分以跟上 Elementor 的步伐。
