CRPテスト

12396 ワード

HTMLと画像

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <section>
    <h3>포스트</h3>
    <div>
      <img src="./unsplash.jpg" />
    </div>
  </section> 
</body>
</html>

  • HTMLダウンロードの末尾と「DOMContentLoaded」の間隔は、ブラウザがDOMツリーを構築するのに要する時間です.

  • 画像はDOMツリーを生成しますが、ブロックされていないようです.
  • cssとjavascriptの追加



  • 現在parser blocking JavaScriptが含まれているため、domctentLoadedイベントはCSSがダウンロードされ、パケットが分割されるまでブロックされます.(JavaScriptはCSOMを操作する可能性があるので)

  • したがって、cssとjavascriptまでイベントが発生します.
  • CSSはデフォルトではレンダリングをブロックするリソースであるため、HTMLの最上位ヘッダラベルに配置して高速に実行できるようにすることができ、Webパフォーマンスの最適化に役立ち、解析器のブロックを招く可能性があります.

    cssのみを使用する場合は、以下のようになります.

    asyncからJavaScriptへ

    <!DOCTYPE html>
    <html lang="ko">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link href="style.css" rel="stylesheet" />
    </head>
    <body onload="measureCRP()">
      <section>
        <h3>포스트</h3>
        <p>Hello <span>web performance</span> students!</p>
        <div>
          <img src="./unsplash.jpg" />
        </div>
      </section>
      <script src="./timing.js" async></script>
    </body>
    </html>

  • スクリプトでasyncキーワードを使用すると、ブロック解析器を遅らせることができます.

  • 下の写真はdeferを使った時の写真ですが、元々deferも阻止解析器を遅らせていたのですが、asyncと違ってHTML解析が終わってから実行されるのですが、なぜかHTML Parsingが完成した時間がasyncと違って見えます.

  • Reference

  • https://web.dev/critical-rendering-path-analyzing-crp/