CSS优化和PageSpeed见解

Question

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

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

至 -

<script>
  var cb = function() {
    var l = document.createElement('link'); 
    l.rel = 'stylesheet';
    l.href = '/static/css/landing-page.css';
    var h = document.getElementsByTagName('head')[0]; 
    h.parentNode.insertBefore(l, h);
  };
  var raf = requestAnimationFrame || mozRequestAnimationFrame ||
      webkitRequestAnimationFrame || msRequestAnimationFrame;
  if (raf) raf(cb);
  else window.addEventListener('load', cb);
</script>

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

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

Answer 1

您应该考虑关键路径,并在您的head部分中放置所有必要的样式,以避免FOUC(仅仅是折叠内容的样式).这可以通过手动提取样式或者 - 对于较大的站点 - 使用自动任务,例如关键路径-css-demo for gulp来完成

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

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

作为对近期浏览器的进一步优化(此时它仅适用于Chrome Canary),可以使用早期预加载样式表

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

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

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

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>.