Webページのレンダリング時間の待機遅延を減らしますか？

Question

Webpagetest.orgのWebサイトでいくつかのテストを実行しましたが、最初のバイトまでの時間は200ミリ秒未満ですが、すべてのテストで異なる場所の異なるブラウザーで実行したため、最初のHTMLページが完全にダウンロードされました。

ニューヨークのfirefoxでネイティブ接続を使用してテストを実行したところ、レンダリングは600ミリ秒で開始されますが、100ミリ秒の時点で最初のダウンロード可能バイト（TTFB）の準備ができていることがわかります。

参照： http://www.webpagetest.org/result/150614_G7_KR7/1/details/

次に、同じコンピューターから他の設定を同じにしてchromeを試してみました。 TTFBはほぼ同じですが、レンダリングは350ミリ秒から始まります。

参照： http://www.webpagetest.org/result/150614_56_KTJ/1/details/

それから、カリフォルニアのIE 11を他の設定を同じにして試してみることにしました。 TTFBは予想よりも少し長くなりますが、600ミリ秒前にレンダリングの開始が拒否されます。

http://www.webpagetest.org/result/150614_T3_KYC/

私のページはgzipで提供され、HTTPヘッダーの出力と実際のWebページデータの出力の間にバッファーをフラッシュします。

圧縮レベルを上げることを検討しますが、他に何かがある場合は、ブラウザーが適切で表示する準備ができていると判断するまで待つのではなく、サーバー側で最初に読み込まれたページをすぐに見ることができます。

また、各テストのフィルムストリップビューを表示すると、500ミリ秒前に画面に何も表示されないため、私の問題がデッドオンしていることがわかります。

この質問が保留になった場合は謝罪しますが、これは解決策を必要とする問題であると感じており、少なくとも他の誰かが彼らのウェブサイトで同様の結果を経験したと確信しています。

Tim Fountain · Accepted Answer

興味深いケースです。ページはかなりシンプルだからです。第一に、closetnocのコメントに同意します。あなたのページはすでにかなり高速です-あなたが速度に取り組んでいる時間を費やしてきたことは明らかなので、それ以上の利益はせいぜいマイクロ最適化です。（あなたが言ったように、より速いDNSは確かに役立つでしょう。）

私のページはgzipで提供され、HTTPヘッダーの出力と実際のWebページデータの出力の間にバッファーをフラッシュします

これにより、HTML <head>セクションの終了後にフラッシュしていることになると思いますか？ブラウザのHTTPヘッダーのみを送信することにはあまり利点はありません。

「早期にフラッシュ」は、ブラウザが<head>セクションで指定された外部リソースの取得を開始し、残りのHTMLページがダウンロードされるのを待つため、一般的なアドバイスとして提供されます。ただし、<head>に外部リソースがリンクされておらず、ページが10ミリ秒でダウンロードされているため、これについて心配する必要はありません。

圧縮レベルを上げることを検討します

HTMLページは5Kb（圧縮）です。圧縮レベルを上げると、せいぜい数バイトしか節約できず、サーバー側で必要なCPU時間の増加により、これが悪影響を与える可能性があります。

これをさらに改善しようとすると、webpagetestの結果のCPU使用率グラフから、ブラウザーがHTMLページの受信とレンダリングの間に「何かをする」ことでビジーであり、外部リソースがないため、待って、できることはページのレンダリングを簡単にすることです。私が提案したい2つのことがあります：

非常にシンプルなレイアウトのページには多くのCSSがあります（HTMLソースの約50％を占めます）。おそらくこれは単純化できますか？昔々、ガイドはより効率的なCSSセレクター（#mp DIV DIV Aや#mp DIV DIVなどの使用を避ける）の使用を検討すると言っていましたが、これはそれほど大きな問題ではないようです）最近。（そして、Page Speed Insightsはこれを見ることをもはや示唆していないことがわかります。）
インラインjavascriptの行が数行あります。その目的は、Google広告をできるだけ早く（見えないように）ロードしてから、正しい位置に移動できるようにすることです。代わりに、adsbygoogle.js非同期呼び出しが<head>セクションにあり、広告<ins>タグが表示する場所になるように、Google広告JSを分割することをお勧めします。その後、インラインJSと関連するCSSルールを完全に取り除くことができます。