在使用延迟CSS加载时改进UI

我一直在按照Google Speed Insights中指定的要求优化页面。与此问题相关的是“消除折叠内容上方的渲染阻塞JavaScript和CSS””

因此，基本上在这个特定的例子中，我使用了前面提到的

loadDeferredStyles

函数

通过使用谷歌的PageSpeed评级，结果非常好，但是。。。加载页面时，在加载的前1秒或2秒内，以及在应用样式表之后，页面显示为没有任何样式

我的问题是，我该怎么做才能让用户看不见这个。我想要么把一个内联的

body{opacity:0}

，然后在CSS中重写它，但我不确定这是最好的选择。我也在考虑用加载的gif或类似的东西覆盖，但我也不确定这是否是理想的做法

我想避免的是，用户在加载页面时看到纯文本。

几乎总是“在折叠内容上方消除渲染阻塞JavaScript和CSS”意味着页面资源的加载顺序不正确。

没有该网站的链接，我无法帮助您。你提出的建议都不好。我不明白它们与渲染阻止内容有什么关系。

运行您的站点。然后查看在javascript文件之后加载的.css或.woff（或等效文件）的瀑布

更新 你的服务器速度非常快，达到17525000 Bps。但是用4.5秒来完成视觉效果并不好。但是，当您使用第三方JavaScript（如Bootstrap和jQuery）而不是CSS和HTML创建页面时，就会发生这种情况

永远不要将JS置于CSS之前。JS应该尽可能位于HTML后面，紧跟在结束标记之前。

标记。

这就是谷歌所谓的渲染阻塞。 字体被认为是CSS。所有CSS必须在JavaScript之前加载，因为它会延迟呈现

更新 如果操作正确，没有理由无法在一秒钟内加载此页面

你真的需要学习基本的HTML和CSS。始终通过W3CHTML和CSS增值工具运行页面。这样做是有规则的。你以如此可怕的方式违反了如此多的规则，我对页面阅读器感到惊讶。浏览器正在修复所有错误，这就是渲染需要3.5秒的原因。此页面的呈现不应花费100毫秒。

首先要做的是消除HTML错误。你的

真是一团糟。

示例：您不能将其放入

中：

为什么到app.css的链接在正文的底部？？

移动此链接

<link rel="stylesheet" type="text/css" href="https://printome.mx/css/app.css"/> 

在

CSS文件应仅包含正在使用的CSS

为什么在

之后有FB脚本，这太可怕了。
将其移动到HTML之后的

之前。

我不认为有任何令人信服的理由使用外部字体，而标准的web字体就可以了，但这不是我的要求。我不会使用它们。

看来无论如何都没有使用该字体。似乎默认为无衬线。

除非有正当理由，否则不要使用Web字体加载器。

如果您想使用Google字体，请使用如下所示的

：

<title>Diseñar y personalizar playeras en minutos | printome.mx</title>
<link rel="stylesheet" type="text/css" href="https://printome.mx/css/app.css"/>
<link rel="stylesheet" type="text/css"
  href="https://fonts.googleapis.com/css?family=Font+Name">
<style>

<style>


  .

Diseñar y personalizer playeras en minutos | printome.mx
.
网站是，我使用的是基础6，但是没有CSS，JS不能正确地触发事件，这会影响视觉元素。我最小化了2个文件中的所有内容，app.css和main.js，但如果我将main.js放在app.css之前，我会遇到评论中提到的视觉问题。我把app.css放在页脚，因为它大大提高了速度洞察结果，但正如我最初所说的，它在最初的几分钟内显示了无样式的页面。我喜欢将css保持在非常小的位置，并将其放在