0

谷歌根据以下文档链接建议了优化 CSS 交付方法：

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 交付方法问题。

4

2 回答 2

3

我想你误解了几件事：

  • 仅当 Javascript 被禁用或不可用时，<noscript>标签才会显示包含的内容。
  • 谷歌解释的是，内联 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>
于 2013-11-14T07:38:50.440 回答
0

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

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

于 2013-11-14T07:25:14.727 回答