CINXE.COM

<!DOCTYPE html> <html data-auth="" data-permalink="1" itemscope itemtype="http://schema.org/BlogPosting" lang=ja> <head> <meta charset=utf-8> <title>HTTP2 で何をサーバープッシュすべきか | tech - 氾濫原</title> <meta content="width=device-width,initial-scale=1,maximum-scale=2,user-scalable=yes" name=viewport> <meta content=#000000 name=theme-color> <link href=/feed rel=alternate title=Feed type=application/atom+xml> <link href="https://lowreal.net/2016/04/13/3" rel=canonical> <meta content=unsafe-url name=referrer> <meta content="HTTP2 で何をサーバープッシュすべきか | tech - 氾濫原" property=og:title> <meta content="article" property=og:type> <meta content="https://lowreal.net/2016/04/13/3" property=og:url> <meta content=cho45@lowreal.net property=og:email> <meta content=cho45 property=fb:admins> <link href="/css/style.css" rel=stylesheet> <link href="/css/github.css" rel=stylesheet> <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap" rel=stylesheet> <link href="/api/similar?id=20662&" rel=preload as=fetch crossorigin id=preload-similar-entries> <link href="/api/exif?id=20662&" rel=preload as=fetch crossorigin id=preload-exif-entries>   <script defer src="/js/daterelative.js"></script> <script defer src="/js/balancetext/tinysegmenter.js"></script> <script defer src="/js/balancetext/balance.js"></script> <script defer src="/js/abcjs_basic_5.1.1-min.js"></script> <script defer src="/js/nogag.js"></script> </head> <body> <header id=global-header> <h1 id=header> <a href=/ > <img alt="HTTP2 で何をサーバープッシュすべきか | tech - 氾濫原" height=50 src=/images/hanrangen.svg width=60 style=margin:auto;display:block> </a> </h1> </header> <nav id=global-navigation> <ul> <li><a href=/ >最新</a></li> <li><a href=/photo/ >写真</a></li> <li><a href=https://www.lowreal.net/ >誰？</a></li> </ul> </nav> <div id=content> <div class=entries> <div class=date><a href="/2016/04/13/">2016年 04月 13日</a></div> <article class="tech status-public" data-id="20662" id="post-1460554988" > <header> <h2 itemprop=name><a href="/2016/04/13/3" class=bookmark rel=bookmark itemprop=url>HTTP2 で何をサーバープッシュすべきか</a></h2> <div class=metadata> <a href="/tech/"><span itemprop=keywords>tech</span></a> | <time datetime="2016-04-13T13:43:08Z" data-epoch="1460554988" itemprop=datePublished> 22:43 </time> | <div style=display:none> <meta content="/2016/04/13/3" itemprop=mainEntityOfPage itemscope itemtype=https://schema.org/WebPage> <span itemprop=headline>意外と何をプッシュすべきか悩んだのでひとまず現時点での自分の結論をまとめました。 CSS は必ずプッシ…</span> <span itemprop=author itemscope itemtype=https://schema.org/Person> <a href=http://www.lowreal.net/ itemprop=url> <span itemprop=name>cho45</span> </a> </span> <div itemprop=publisher itemscope itemtype=https://schema.org/Organization> <div itemprop=logo itemscope itemtype=https://schema.org/ImageObject> <meta content=https://www.lowreal.net/images/logo.png itemprop=url> <meta content=189 itemprop=width> <meta content=105 itemprop=height> </div> <meta content=cho45 itemprop=name> </div> <meta content="2016-04-13T13:43:08Z" itemprop=datePublished> <meta content="2016-04-14T23:53:35Z" itemprop=dateModified> <div itemprop=image itemscope itemtype=https://schema.org/ImageObject> <meta content=https://www.lowreal.net/images/logo.png itemprop=url> <meta content=189 itemprop=width> <meta content=105 itemprop=height> </div> </div> </div> </header> <div class=content itemprop=articleBody> <p>意外と何をプッシュすべきか悩んだのでひとまず現時点での自分の結論をまとめました。</p> <section class=level-1> <h3>CSS は必ずプッシュ・JSは場合による</h3> <p>サイトの構成によりますが、ページの表示に必要なものは全てプッシュするべきのようです。</p> <ul> <li>CSS の全て</li> <li>ページの根幹に関わるJSの全て</li> </ul> </section> <section class=level-1> <h3>サーバプッシュの目的</h3> <p>まずサーバプッシュの目的を改めて確認しておくと、これはクリティカルレンダリングパスを削減するためです。<p>クリティカルレンダリングパスについては <a href="https://developers.google.com/web/fundamentals/performance/critical-rendering-path/analyzing-crp?hl=ja">クリティカルレンダリングパスのパフォーマンスを分析する | Web Fundamentals - Google Developers</a> がわかりやすいです。<p>サーバープッシュなしの場合 HTML+CSS 構成のページはクリティカルレンダリングパスが必ず2以上になります。つまり最低でもRTTの2倍の時間がページ表示に加算されます。<p>これをサーバプッシュで行う場合、HTML+CSSを一度に送り返すので、クリティカルレンダリングパスは1になります。<p>イメージとしてはHTML内の外部CSSが全てインライン style 要素にしてある場合に似ています。ただしサーバプッシュの場合、適切なキャッシュを効かせることができるケースがあるので、インライン style 要素よりも効率的です。</p> <section class=level-2> <h4>JSをプッシュすべきか</h4> <p>これは場合によると思っています。JSがないとページの表示に致命的な不具合がある場合、サーバープッシュしないと意味がありません。<p>一方、JS がページのインターフェイスの向上のために使わていて、とりあえずの表示に関係がない場合、JS をプッシュした分、ファーストペイントが遅れます。<p>そういうわけでなので、JS をプッシュすべきかどうかは場合によるので簡単に決められない気がしています。</p> </section> </section> <section class=level-1> <h3>理想のサーバープッシュ</h3> <p>理想のサーバープッシュを考えるにあたって、ロードされるリソースの分類をしてみます。</p> <section class=level-2> <h4>クリティカルリソース (ブロッキングアセッツ)</h4> <p>ファーストペイントのために必要なリソース</p> <ul> <li>CSS</li> <li>ブロックする JS (async/defer のない script 要素)</li> <li>HTML</li> </ul> </section> <section class=level-2> <h4>DOMContentLoaded リソース</h4> <p>DOMContentLoaded までに必要なリソース</p> <ul> <li>defer された script</li> </ul> </section> <section class=level-2> <h4>onload リソース</h4> <p>onload までに必要なリソース</p> <ul> <li>画像</li> <li>async された script</li> </ul> </section> <section class=level-2> <h4>どうプッシュするか</h4> <p>最終的に必ずロードされるリソースなら、プッシュしてしまっていいはずです (初回ロードの場合)。</p> <ol> <li>クリティカルリソース</li> <li>DOMContentLoaded リソース</li> <li>onload リソース</li> </ol><p>の順に全てプッシュするのが理想そうです。ただ、現時点で任意の順番に優先順位を明確に決めて送信することはできないような気がしてます。</p> </section> </section> <ol itemscope itemtype=http://schema.org/BreadcrumbList><li itemprop=itemListElement itemscope itemtype=http://schema.org/ListItem><a href=/ itemprop=item><span itemprop=name>トップ</span></a> <meta content=1 itemprop=position> </li> <li itemprop=itemListElement itemscope itemtype=http://schema.org/ListItem> <a href="/tech/" itemprop=item><span itemprop=name>tech</span></a> <meta content=2 itemprop=position> </li> <li itemprop=itemListElement itemscope itemtype=http://schema.org/ListItem> <a href="https://lowreal.net/2016/04/13/3" itemprop=item><span itemprop=name>HTTP2 で何をサーバープッシュすべきか</span></a> <meta content=3 itemprop=position> </li> </ol> </div> <div class="content trackbacks"> <h3>このエントリを参照するエントリ</h3> <ul> <li data-id="20988"> <a href="/2016/12/31/1"> <b>今年やったことを自分で承認する</b><br> <span class=summary>日記を読みかえしてみたら今年もいろいろやっていた。年末にせめて自分で自分を承認してあげたい。おおまかには高周波関係アンテナアナライザ製作…</span> <time datetime="2016-12-30T15:04:32Z" data-epoch="1483110272" itemprop=datePublished> 00:04 </time> </a> </li> </ul> </div> <div class="content similar-entries"> </div> <div class=social> <span class=hatena-star></span> <p class=share-buttons> <a href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Flowreal.net%2F2016%2F04%2F13%2F3" class=share-button rel="noopener nofollow" onclick='ga("send","social","Facebook","Share","https://lowreal.net/2016/04/13/3")' style=background:#3b5998 target=_blank> <img alt=Facebook height=18 src=/images/sharebuttons/FB-f-Logo__white_50.png width=18> </a> <a href="https://bsky.app/intent/compose?text=HTTP2%20%E3%81%A7%E4%BD%95%E3%82%92%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E3%83%97%E3%83%83%E3%82%B7%E3%83%A5%E3%81%99%E3%81%B9%E3%81%8D%E3%81%8B%20https%3A%2F%2Flowreal.net%2F2016%2F04%2F13%2F3" class=share-button rel="noopener nofollow" onclick='ga("send","social","Bluesky","Share","https://lowreal.net/2016/04/13/3")' style=background:#efefef target=_blank> <img alt=Bluesky height=40 src=/images/bluesky_media_kit_logo_svgs.svg width=40> </a> <a href="http://b.hatena.ne.jp/add?url=https%3A%2F%2Flowreal.net%2F2016%2F04%2F13%2F3" class=share-button rel="noopener nofollow" onclick='ga("send","social","Hatena::Bookmark","Share","https://lowreal.net/2016/04/13/3")' style=background:#00a4de target=_blank> <img alt=はてなブックマーク height=40 src=/images/sharebuttons/hatenabookmark-logomark.svg width=40> </a> </p> </div> </article> </div> <div class=pager> <a href="/2016/04/13/2" rel=next>◀ [tech] 筋の悪…</a> <a href="/2016/04/13/">▲ この日のエントリ</a> <a href="/2016/04/13/4" rel=prev>[tech] プルリ… ▶</a> </div> </div> <footer id=global-footer> <h2>書いている人</h2> <div class=author> <div class=image> <img alt=Photo height=160 src=/images/profile.jpg width=160> </div> <div class=desc> <p> cho45 (<a href=https://www.lowreal.net/ rel=author>www.lowreal.net</a>) <<a href=mailto:cho45@lowreal.net>cho45@lowreal.net</a>> </p> <p> JavaScript, Perl, Ruby, HTML, CSS, Web etc </p> <p> <a href=https://github.com/cho45 rel=nofollow class="button github-button" onclick='ga("send","social","GitHub","Follow","cho45")'><i></i> <span class=label> Follow <b>@cho45</b> </span> </a> </p> <p> <a href=/archive>アーカイブ</a> </p> </div> </div> </footer>