1

PageSpeed Insightsスコアを向上させるために、「スクロールせずに見えるコンテンツでレンダリングをブロックする JavaScript と CSS を削除する」という要件を修正したいと考えていますが、この問題に対する最善のアプローチが何であるかはよくわかりません。

  • 新規訪問者と再訪問者のページ負荷のバランスを最適に保つにはどうすればよいですか?
  • CSS を非同期的にロードする必要があるのはいつですか?
  • 小さな画面にはインライン CSS のみを使用する必要がありますか?

関連プレゼンテーション:クリティカル レンダリング パスの最適化

例

大量の CSS をインライン化すると、その後の訪問でページの読み込みが遅くなるため、Cookie に基づいて、定期的な訪問者にさまざまなバージョンを提供できます。スクロールせずに見える CSS を検出するには、次の記事のブックマークレットを使用できます: paul.kinlan.me/detecting-critical-above-the-fold-css/

新規訪問者の場合:

<!DOCTYPE HTML>
<html>
<head>
  <title>New Visitor</title>
  <style><!-- insert above the fold css here --></style>
  <noscript><link rel="stylesheet" href="style.css"></noscript>
</head>
<body>
  <!-- insert content here -->
  <script>
    // load css
    var node = document.createElement('link');
    node.rel = 'stylesheet';
    node.href = 'style.css';
    document.head.appendChild(node);
    // set cookie
    var exp = new Date();
    exp.setTime(exp.getTime() + 3600 * 1000);
    document.cookie = 'returning=true; expires=' + exp.toUTCString() + '; path=/';
  </script>
</body>
</html>

リピーターの方へ：

<!DOCTYPE HTML>
<html>
<head>
  <title>Returning Visitor</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- content here -->
</body>
</html>

このアプローチに問題はありますか？

4

1 に答える 1

1

過剰最適化というものがあります。あなたの例のアプローチは、不必要な複雑さを追加します。あなたが見なければならないのは、スクロールせずに見える部分のすべてを意味のあるものにし、デザインとレイアウトに適合させるヘッドセクションの最小限のスタイルシートです (ただし、必ずしも 100% 尊重する必要はありません)。

ページの残りの部分については、ページの最後に残りの CSS をロードするだけで問題ありません。スクロールしなければ見えない部分が重要な場合は、最初に読み込む CSS も重要です。他のすべてが遅れる可能性があります。

于 2014-05-17T00:02:31.387 に答える