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

Question

我在GoogleAMP项目中有方案，在那里我无法将CSS从头标中移出。否则事件无法使用JavaScript创建元素。并在页面内容加载之后将其添加到头部。

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

谢谢。

Answer 1

据我所知，无法将第3方CSS提取到AMP页面。但是，您可以下载fontawesome的all.css文件，并将样式从其中手动复制到您的<style amp-custom>标记中。同样，由于AMP不允许的样式超过50 KB，因此您必须从fontawesome中手动选择必要的样式。

PS：我不确定使用上述字体风格是否存在版权问题，请检查一下。但是可以保证工作。

Answer 2

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

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

以下来源被列入白名单，并允许通过链接标签投放字体：

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

Fonts.com：https://fast.fonts.net

Google字体：https://fonts.googleapis.com

Typekit：https://use.typekit.net

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

For more information click here

更新：获取GooglePageSpeed见解（阻止渲染）css

您可以这样使用

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

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