CSS优化和PageSpeed见解

时间:2016-03-15 09:02:50

标签: javascript html css

我在我的网站上运行了Google PageSpeed Insights - www.gpsheatmap.com,并建议更改我的样式表(https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example)的加载 -

If (data && data.length) {
    self.emailNotification(data[0].on_off)
}

到 -

<link href="/static/css/landing-page.css" rel="stylesheet">

我为我的样式表尝试了这个,它明显地改变了加载,所以你会看到pre-css视图,然后一秒钟后你会看到应用了样式表。这是在firefox中

我应该忽略这种方法,还是可以解决这个问题?

1 个答案:

答案 0 :(得分:6)

您应该考虑关键路径,并将所有必要的样式放在head部分中,以避免FOUC(仅仅是内容的样式)。这可以通过手动提取样式来实现,或者 - 对于较大的站点 - 使用像critical-path-css-demo这样的自动任务来获取gulp

无论如何,如果您选择使用javascript加载所有样式表,请考虑将它们仍包含在<noscript>块中,以便在JS不可用时也可以加载它们。

<noscript>
    <link rel="stylesheet" ...>
</noscript>

作为进一步的优化for near-future browser(目前仅适用于Chrome Canary),可以early preload stylesheets使用

<link rel="preload" href="..." as="style">

并以更简单的方式创建异步加载器

<link rel="preload" href="..." as="style" onload="this.rel='stylesheet'">

另一个有趣且最近的方法是described by Jake Archibald,它被称为“多阶段CSS加载”:它需要在必须设置样式的标记之前加载一小块CSS从而避免使用关键CSS,例如

<link rel="stylesheet" href="/site-header.css">
<header>…</header>

<link rel="stylesheet" href="/article.css">
<main>…</main>

<link rel="stylesheet" href="/comment.css">
<section class="comments">…</section>
  

计划是为了在加载样式表时阻止后续内容的呈现,但允许在其之前呈现内容。样式表并行加载,但它们是串联应用的。这使得行为类似于<script src="…"></script>