0

我有一个((非常))具有上述主题的简单 WP 站点。

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

header.php 只直接包含一些,大多数是通过 php wp_head() -tag 包含的。我正在努力找出哪些 .js 和 .css正在使用,哪些没有。还有如何完全摆脱它们,因为我觉得使用“延迟”或“异步”只是部分解决了问题。

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

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

4

2 回答 2

0

您可以使用 Chrome 开发工具的审核选项卡。

我正在努力找出哪些 .js 和 .css 正在使用,哪些没有

选择 Audits 选项卡后,根据需要包括 Network Utilization,但必须检查 Web Page Performance 选项。选择完成后,单击 Audit Present State 或 Reload and audit。

该过程完成后,结果将提供有关未使用 CSS 规则数量的输入。这将使您对未使用的 CSS 有所了解。

在此处输入图像描述

还有如何完全摆脱它们,因为我觉得使用“延迟”或“异步”只是部分解决了问题。

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

在此处输入图像描述

在此处输入图像描述

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

希望这可以帮助!

于 2017-08-07T18:53:40.500 回答
0

该主题在折叠上方加载了大量导致渲染阻塞的外部 .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/以获得您想要的功能没有所有额外的代码。

于 2017-02-01T14:47:33.677 回答