删除不必要的.js和.css调用（Rt-Theme19 - themeforest）

Question

我有一个（（非常））具有上述主题的简单WP网站。

主题加载了大量的外部.css和.js文件，这些文件会导致渲染阻塞，我相信我不会使用其中的一半。

header.php只包含一些，而且大多数都是通过php wp_head（）-tag包含的。我正在努力寻找，哪些.js和.css 正在使用，哪些不是。另外如何完全摆脱它们，因为我觉得使用'defer'或'async'只能部分地解决问题。

我的网站是http://toptand.dk。请注意，我目前使用WP超级缓存进行压缩和自动优化，以进一步减少渲染阻塞等，这可能会使标题看起来非常不同。我宁愿真正摆脱它。

我已经阅读了很多关于如何防止渲染阻止的文章，但非真正解释了如何处理WP模板中的所有废话。

Answer 1

  

该主题在首屏上加载了大量外部.css和.js文件   导致渲染阻塞，我相信我不会使用其中的一半。

这是商业WordPress主题的典型特征;这样的主题加载了许多文件，因为“多用途”后端函数需要很多文件，这些函数提供短代码，拖放功能，自定义帖子类型，电子商务等。

您牺牲了所使用的所有功能的速度和页面重量以及您不使用的潜在功能。如果您需要速度和轻量级网站，请不要使用这样的主题。您可以进入该主题和wp_dequeue_script脚本和样式表，但功能主题将会中断。见https://codex.wordpress.org/Function_Reference/wp_dequeue_script

尝试使用https://wordpress.org/themes/中更简单，更轻量级（和免费）的主题，并了解主题如何工作https://developer.wordpress.org/themes/getting-started/，以便在没有所有额外代码的情况下获得所需的功能。

Answer 2

您可以使用Chrome开发工具的审核标签。

  

我正在努力寻找，其中.js和.css正在使用中   不是

选择“审核”选项卡后，根据需要包括“网络利用率”，但强制选中“网页性能”选项。选择完成后，单击“审核当前状态”或“重新加载”并进行审核。

一旦完成该过程，结果将提供有关未使用的CSS规则数量的输入。这将让您了解未使用的CSS。

  

另外如何完全摆脱它们，因为我觉得使用'延迟'或   'async'只能部分地解决问题。

Chrome（59）的最新版本引入了一项名为Coverage的新功能（您可以在开发工具中的更多工具下找到此功能）。这有助于理解当前页面中使用的CSS的百分比，并单击其中一个结果重定向到代码，并将未执行代码的部分标记为红色，将执行的部分标记为绿色。

这些输入可以帮助您优化资产并删除未使用的代码。

希望这有帮助！