css - 在不使用 JavaScript 的情况下消除渲染阻塞 CSS - GoogleAMP

Question

我在 Project 中有场景GoogleAMP，我无法CSS移出 head 标签。或者事件无法使用JavaScript. 并在页面内容加载后将其添加到 head 中。

是否有另一种方法可以满足 AMP 限制以及 GooglePageSpeed 见解。

谢谢。

标签： cssamp-htmlrender-blocking

Answer 1

您可以使用 AMP 列入白名单的链接属性添加您的 CSS

 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css">

以下来源被列入白名单并允许通过链接标签提供字体服务：

Typography.com：https://cloud.typography.com _

字体网：https ://fast.fonts.net

谷歌字体：https ://fonts.googleapis.com

打字机： https ://use.typekit.net

字体真棒：https://maxcdn.bootstrapcdn.com，https://use.fontawesome.com

欲了解更多信息，请点击此处

更新：对于 GooglePageSpeed 洞察（渲染阻止）css

你可以这样使用

<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700,900" rel="preload" as="style">

注意：预加载仅适用于现代浏览器