避免 render-blocking CSS/JS 在直接控制之外

Question

我是运行一个名为 Smoolis 的平台上的网站。他们的部分设置涉及一系列 css 和 js 文件，这些文件被 google 描述为 render-blocking - 我的页面是 http://www.csselectronics.com/.

一个例子是文件 workspace.core.baf8814.min.js，它有 1 MB 并且驱动了大部分问题 - 但它被放置在我无法编辑它的 header 中因为它是平台的一部分。

是否有一些 work-around 可以改进设置，例如通过一些智能代码与其他 material 同时加载此文件？我可以在 header 中输入额外的代码，但我无法改变某些 CSS/JS 文件的加载方式。

Answer 1

也许你可以试试这个（我用它取得了很好的效果）

要有一个关键的 css 文件（具有非常基本的宽度和高度定义（也包括页眉和页脚），以及其他样式，

因此，例如在 PHP 中，它会像这样

<html>
    <head>
       <style type="text/css"><?php include ('css/critical.css'); ?></style>
       <link rel="stylesheet" href="css/other_styles.css">
</head>
<body>...</body>
</html>

根据我的经验，我可以告诉你这在 google 页面速度得分

中的平均得分为 10-20+（取决于之前的分数）

避免 render-blocking CSS/JS 在直接控制之外

Avoid render-blocking CSS/JS outside direct control

javascript

css

pagespeed