消除呈现阻塞CSS?

时间:2019-06-08 作者:wordpressn00b

好吧,所以我真的很难找到一个“全新”的WordPress网站。我不是WordPress开发人员,我只是对HTML、CSS有一些了解,对PHP、Javascript和jQuery有非常基本的了解。

目前,我的网站加载速度很慢。我安装了少量插件(仅限基本插件)。我运行了Google加载速度测试,他们建议消除渲染阻塞资源。我看了一下here 我知道我需要做什么。如果我理解正确,我需要根据媒体查询将主样式表分为几个,即一个用于400px以下的屏幕,另一个用于900px以下的屏幕,等等。

问题是,我没有一个样式表。这显然是主要的风格。css样式表,但每个插件都有自己的!更不用说这个主题有几个不同的功能/特性,它们使用额外的样式表。

Javascript代码也是如此。

我应该如何拆分所有样式表?手动操作需要花费很长时间,更不用说我总是冒着把事情搞砸的风险。

有什么建议吗?谢谢

1 个回复
最合适的回答,由SO网友:Faye 整理而成

一般来说,您无法影响插件加载自己样式表的时间和方式。混淆视听通常意味着你永远无法更新,因为它会重置你所有的工作。

这是使用插件的一种权衡——您失去了对影响性能、可访问性和验证的某些事情的控制。没有天文数字的预算和时间来构建自己的版本,您通常必须接受这一点。

您可以在何处处理此任务your theme, 您的自定义主题或已安装内容的子主题。

您引用的这篇文章是对的,因为您可以将您的工作表拆分为非常特定的用例,以便只加载您需要的样式,但您是对的,一旦您已经有了大量的样式表,这是一项非常荒谬的任务。您确实需要花时间将每个项目复制并粘贴到相应的表单中,并相应地链接到它们。很抱歉,没有快速解决方法。

但即便如此,开发人员通常也不是这样工作的。我们通常用一种称为SASS的东西来编写样式表,并按照被设置样式的区域而不是用例来组织它们(即媒体查询与元素样式一起进行,而不是在单独的媒体查询文件中),然后将所有的样式表编译成一个单独的样式表,并使用Gulp或Grunt(例如)进行简化和加载。您可以对javascript文件执行同样的操作。这是我推荐的方法。

实现这样的东西确实需要更高水平的技能。如果您熟悉版本控制、命令行和使用节点。js,或者认为你可以找到答案,那么我鼓励你尝试一下。Here\'s a tutorial on getting started.

相关推荐

如何为ACF Gutenberg块获得“附加的css类”

我已向ACFs注册了自定义块acf_register_block. 我已经设置了render_callback 加载php模板,但希望访问用户在管理中设置的任何额外CSS类。WordPress是否提供全局相似$block (类似于$post) 或者我需要在ACF支持论坛上提出问题吗?