如何删除未使用的 CSS/JS 并改善 WordPress 网站的服务器响应时间？

问题描述

我已经优化了我的 wordpress 网站性能并使用 web.dev

检查了它的性能

但是，仍然存在以下我无法解决的问题：

1. 删除未使用的 CSS
2. 删除未使用的 JS
3. 初始服务器响应时间很短

我该如何解决这个问题？

解决方法

性能优化是一个巨大的主题，可能无法简单地用一个答案来涵盖，但我仍然可以为您指明正确的方向。

删除未使用的 CSS 和 JS

首先，您必须确定您真正在每个页面上加载了哪些 CSS 和 JS 文件，找出它们的来源并考虑您是否真的需要它们。经常发生的是，很多沉重的 CSS 和 JS 文件被加载只是为了一个简单的动画，在网站上的某个地方使用一次。您可以在浏览器控制台中查看所有加载的文件，或者在 GT Metrix 等服务的帮助下。如果您发现不需要的资产但仍在加载它们，请首先尝试找到加载它们的源（例如：主题或插件）。流行的主题和插件具有禁用某些部分资产的设置，因此很容易。对于那些没有任何设置的人，您可以尝试这段代码，只需将文件名替换为您的即可。

add_action( 'wp_print_styles','remove_styles' );
add_action( 'wp_print_scripts','remove_scripts' );

// Remove styles from plugins we don't need
function remove_styles() {
    if ( $GLOBALS['pagenow'] != 'wp-login.php' && ! is_user_logged_in() ) {
        wp_dequeue_style( 'coblocks-frontend' );
        wp_dequeue_style( 'coblocks-frontend-css' );
        wp_dequeue_style( 'wp-editor-font' );
        wp_dequeue_style( 'duplicate-post' );
        wp_dequeue_style( 'thickbox' );
    }
}

// Remove scripts from plugins we don't use and don't need
function remove_scripts() {

    // just in case we use those in wp-admin,exclude only from front-end loading
    if ( ! is_user_logged_in() ) {
        wp_dequeue_script( 'coblocks-animation' );
        wp_deregister_script( 'coblocks-animation' );
        wp_dequeue_script( 'thickbox' );
        wp_deregister_script( 'thickbox' );
        wp_deregister_script('jquery');
    }
}

理想情况下，您需要使 CSS 和 JS 尽可能小，但在使用大量 CSS 和 JS 的现代 WP 主题中可能会很棘手。

初始服务器响应时间

响应时间长意味着您的服务器需要很长时间才能返回任何数据。 99% 的情况是因为网站优化不当或服务器薄弱。后者可以通过转移到其他托管服务提供商或更改托管计划轻松解决。

网站优化比较棘手，可能需要进行分析，特别是如果您已经安装了适当的整页缓存。一般来说，我可以这样描述所有的一般情况：

1. 缓慢的服务器响应 + 无缓存 = 先尝试缓存。 WP Super Cache、WP Rocket 或类似插件。
2. 缓慢的服务器响应 + 缓存 = 尝试使用支持 nginx 缓存的托管服务提供商（基本上在每个页面加载时提供静态内容）。我可以推荐 Kinsta 或 Pressjitsu。
3. 缓慢的服务器响应 + 大量动态内容 = 您无法以与常规网站相同的方式缓存内容。在这里，您需要一位经验丰富的开发人员，他应该首先使用 xhprof 或 blackfire.io 等工具分析您的网站，然后逐步优化性能最差的功能的性能。