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

Question

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

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

谢谢。

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">

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

Answer 2

好的，据我所知，没有办法将 3rd 方 css 提取到 AMP 页面。但是您可以下载 fontawesome 的all.css文件并手动将其中的样式复制到您的<style amp-custom>标签中。同样，因为 AMP 不允许样式超过50 KB您必须从 fontawesome 中挑选必要的样式。

PS：我不确定使用上面描述的 fontawesome 样式是否存在任何版权问题，请检查一下。但它保证工作。