AMP要求所有css在页面的头部内联呈现。Drupal默认链接或导入css。这需要AMP主题以非标准方式提供css,忽略核心和贡献模块提供的所有css,并要求用户在他们的主题中复制他们所需的任何css。
8.3分支有一个服务装饰器,按摩所有Drupal的CSS。这意味着AMP主题现在可以正常处理css,其方式与任何其他主题相同。使用Drupal的库系统添加的任何CSS都将自动最小化并按照AMP的要求内联呈现。
AMP还要求内联css不大于50KB。这意味着必须排除一些核心和贡献的CSS。
Drupal的主题系统有一种删除css的方法,包括库排除。8.3分支为该过程提供了一些帮助。将'&debug#development = 1'添加到任何AMP网址,您将看到系统创建的内联css大小的摘要,以及聚合到其中的所有css文件及其大小的列表。这样可以更容易地找到可能减少或删除的大型css文件,以保持在所需的css大小限制内。目标是删除AMP页面上不需要的任何css,以使总大小减少到50,000字节或更少。好的候选者是与删除的javascript相关的css文件,以及每个页面上不需要的css,并且不会在AMP页面上使用。
您还可以启用AMP CSS Tree Shaking模块。该模块不需要配置,只需启用它即可。它将自动“摇动”每个AMP页面上的css并删除页面上未使用的任何CSS。它还会缩小页面上的所有标记。使用此模块,您不必将包含的css严格降低到50KB,您可以依靠该模块来执行此操作。如果你有很多css,即使在摇晃之后你也可能超过50KB,所以你必须密切关注它,因为你可能仍然需要手动排除某些样式或库。
评论