Question

Google根据以下文档链接建议了Optimize CSS Delivery方法：

https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#dataURI

根据Google文档，我将CSS分成两个单独的CSS文件。 a）small.css - 关键CSS b）common.css - 其他普通CSS

然后我放置了关键的CSS代码结尾。

eg: <html>
      <head>
       <link href="/css/common.css" rel="stylesheet" type="text/css">
      </head>
      <body>
        content
      </body>
    <html>
    <noscript><link rel="stylesheet" href="small.css"></noscript>

但是，在查看页面时，该特定的关键CSS（small.css）样式未应用于HTML页面。请帮我解决这个优化CSS交付方法问题。

Answer 1

我认为你误解了几件事：

<noscript>标记只显示包含的内容 if Javascript已停用或无法使用。
谷歌解释的内联CSS显示速度比CSS快在外部文件中。

内联CSS看起来像：

 <head>
    <style>
      .blue{color:blue;}
    </style>
 </head>

虽然包含CSS的外部文件包含如下：

<head>
    <link rel="stylesheet" href="small.css" type="text/css">
</head>

现在回答您的问题，您的CSS不会显示，因为它包含在noscript标记中。这是正确的方法：

<html>
  <head>
   <link rel="stylesheet" href="small.css" type="text/css">
   <link href="/css/common.css" rel="stylesheet" type="text/css">
  </head>
  <body>
    content
  </body>
<html>

或者如果您正在关注谷歌推荐：

<html>
  <head>
   <style>
   //Copy content of small.css here
   </style>
  </head>
  <body>
    //content with inline styling
  </body>
<html>

Answer 2

为什么你有noscript标签？它仅用于识别JavaScript是否不存在，因此不会加载css。

此外，CSS可以在代码的顶部，不必在下面。请尝试仅保留下面的js代码。

优化CSS交付 - 由谷歌

2 个答案: