加快Elementor WordPress网站速度的5个技巧

2022-07-07
WordPress

我正在对一个空白网站进行一些测试，以确定 Elementor 对网站加载速度的影响。

当我执行我的灯塔测试时，在 Elementor 中编辑一个页面需要一个从97到75的简单页面。那是22点的下降。

当然，这是因为 Elementor 有自己的一组 CSS 和 javascript 文件，它们会增加加载时间，但我发现了一些简单的技巧，可以让你修剪掉一些多余的脂肪（只要你不使用他们）。

您可以将这些代码添加到主题中的 functions.php 文件中。（注意：仅当您对 WordPress 主题和/或子主题有基本了解时才这样做）。

/*--- 删除谷歌字体 ---*/
add_filter('elementor/frontend/print_google_fonts', '__return_false');

/*--- 删除 Font Awesome ---*/
add_action('elementor/frontend/after_register_styles',function() {
	foreach( [ 'solid', 'regular', 'brands' ] as $style ) {
		wp_deregister_style('elementor-icons-fa-' . $style );
	}
}, 20);

/*--- 删除 Eicons: ---*/
add_action('wp_enqueue_scripts', 'remove_default_stylesheet', 20);
函数 remove_default_stylesheet() {
	wp_deregister_style('elementor-icons');
}

添加这些代码使我的分数提高了大约 10 分。

确保在 webfont 加载期间文本保持可见

Lighthouse 会抱怨的另一件事是在加载 Web 字体时文本不可见。大多数教程假设您在本地托管您的网络字体，但根据我的经验，大多数人使用 Google 字体。

所以这里是如何让你的谷歌字体异步加载…

将 &display=swap 参数添加到您的 Google 字体 URL 的末尾：

<link href="https://fonts.googleapis.com/css?family=Roboto:400,400i,700,700i&display=swap" rel="stylesheet">

关闭 Elementor Pro（如果不需要）

Elementor Pro 是一个功能强大且非常有价值的插件，但是如果您正在创建一个不使用高级功能的相当简单的网站，您还不如坚持使用基本版本。

寻找令人兴奋的奇幻冒险？

认识你最新的粉丝。

为什么？

Elementor Pro 增加了大约 500kb 的额外资源。关闭它可以提高您的页面速度和灯塔分数。

删除 Gutenberg CSS 文件

如果您不使用块编辑器，则也无需加载它的 CSS。

将以下代码添加到您的functions.php 文件以将其删除。

//从前端加载中删除 Gutenberg 块库 CSS
功能 smartwp_remove_wp_block_library_css(){
 wp_dequeue_style('wp-block-library');
 wp_dequeue_style('wp-block-library-theme');
}
add_action（'wp_enqueue_scripts'，'smartwp_remove_wp_block_library_css'）；