javascript - 避免直接控制之外的渲染阻塞 CSS/JS

标签 javascript css pagespeed

我在名为 Smoolis 的平台上运行网站。 他们的部分设置涉及一系列 css 和 js 文件,这些文件被谷歌标记为渲染阻塞 - 我的页面是 http://www.csselectronics.com/ .

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

是否有一些解决方法可以改进设置,例如通过一些智能代码同时加载此文件和其他 Material ?我可以在 header 中输入其他代码,但无法更改某些 CSS/JS 文件的加载方式。

最佳答案

也许你可以试试这个(我用它得到了很好的结果)

拥有一个关键的 css 文件(具有非常基本的 withs 和 heights 定义(也包括页眉和页脚),以及其他样式,

因此,例如在 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>

根据我的经验,我可以告诉你这在谷歌页面速度得分中平均有 10-20+(取决于之前的分数)分

关于javascript - 避免直接控制之外的渲染阻塞 CSS/JS,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41336930/

相关文章:

javascript - 如何在 clearInterval() 之后启动一个 eggtimer?

jquery - 使部分输入[文本]变灰?

javascript - 如何停止清除顺风组件

javascript - mod_pagespeed 下的网页不会加载 SVG 图像

javascript - "Cannot import useState because there is no useState export in react"(使用 React Hooks 的流程)

javascript - 为 jQuery 工具提示加载 AJAX 数据

jquery - jquery 数组中的响应式 img

jquery - 包括 js 来旋转图像与保留 9 个不同的图像?

css - 为什么网站检查器给 CSS !important 打负分?

javascript - 如何使用 typescript 分割字符串的一部分?